Chrome 扩展程序：让它在每次页面加载时运行答案

【问题标题】：Chrome Extension: Make it run every page loadChrome 扩展程序：让它在每次页面加载时运行
【发布时间】：2011-06-27 18:56:36
【问题描述】：

我想制作一个 chrome 扩展，在加载一个页面后执行一些脚本，我不确定我是否必须在后台页面上实现这个逻辑，或者它可以在其他任何地方，这里的任何帮助将不胜感激。

【问题讨论】：

以防万一，它应该在浏览器中加载任何页面后运行脚本。
@ZloySmiertniy 是的，只需查找内容脚本，还要确保在 run_at 选项中放置 document_end 并在匹配项中：您需要指定脚本将被注入到哪个 url。
如果您只想为自己在页面上运行脚本，您也可以使用Tampermonkey

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

您可以从background script 监听chrome.tabs.onUpdated 事件并检查回调中的changeInfo.status 属性。它可以是加载或完成。如果它完成，则执行该操作。

例子：

chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
  if (changeInfo.status == 'complete') {

    // do your things

  }
})

因为这可能会在每个选项卡完成时触发，您还可以在其homonymous attribute 上检查选项卡是否为active，如下所示：

chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
  if (changeInfo.status == 'complete' && tab.active) {

    // do your things

  }
})

【讨论】：

Uncaught TypeError: Cannot read property 'onUpdated' of undefined
什么？这个答案来自两年半前。现在可能一切都变了。
做具体的url页面：if (tab.url.startsWith("https://example.com") == false) return;
@Green Chrome 现在有 Manifest v3，所以一切都会改变更多:)
截至 2021 年 11 月，使用 v3，这可以完美运行。不过，&& tab.active 似乎是不必要的。

【解决方案2】：

如果它需要在页面的onload 事件上运行，这意味着文档及其所有资产已加载，这需要在您希望跟踪的每个页面中嵌入content script @987654323 @。

【讨论】：

最好让内容脚本在“document_end”注入，见 content_script 清单中的“run_at”：run_at: "document_end"

【解决方案3】：

您可以将脚本放入内容脚本中，请参阅

content-script

【讨论】：

【解决方案4】：

这段代码应该可以做到：

manifest.json

   {
      "name": "Alert 'hello world!' on page opening",
      "version": "1.0",
      "manifest_version": 2,
      "content_scripts": [
        {
          "matches": [
            "<all_urls>"
          ],
          "js": ["content.js"]
        }
      ]
    }

content.js

alert('Hello world!')

【讨论】：

是否可以在“匹配”字段中使用正则表达式？
是的，见https://developer.chrome.com/extensions/content_scripts#matchAndGlob