Chrome 扩展选项卡 onUpdated 事件

Question

我正在构建一个 chrome 扩展程序，每次打开新选项卡并加载页面时都应该收到通知，为此我使用 chrome.tabs.onUpdated 事件。

问题是，如果在某个域（具有 src）托管的页面/选项卡上插入 iframe，则会触发 onUpdated 事件。有没有办法区分“真实”选项卡加载的这些事件与 iframe 加载触发的事件？

Answer 1

这个问题帮助我完成了扩展，认识到新页面和在同一页面上加载内容之间的区别，所以我想分享我的解决方案。首先需要调用onUpdatedbackground.js：

\n\n

显现

\n\n

{\n  "name": "My test extension",\n  "version": "1",\n  "manifest_version": 2,\n  "background": {\n    "scripts":["background.js"]\n  },\n  "content_scripts": [\n    {\n      "matches": ["http://*/*", "https://*/*"],\n      "js": ["contentscript.js"]\n    }\n  ],\n  "permissions": [\n    "tabs"\n  ]\n}\n

\n\n

背景.js

\n\n

chrome.tabs.onUpdated.addListener(\n  function(tabId, changeInfo, tab) {\n    // read changeInfo data\n    if (changeInfo.url) {\n      // url has changed; do something here\n\n    }\n  }\n);\n

\n\n

然后，您可以扩展该脚本以将消息数据从 background.js 发送到您的内容脚本（使用chrome.runtime.sendMessage）：

\n\n

背景.js（续）

\n\n

chrome.tabs.onUpdated.addListener(\n  function(tabId, changeInfo, tab) {\n    // read changeInfo data\n    if (changeInfo.url) {\n      // url has changed; do something here\n      // like send message to content script\n      chrome.tabs.sendMessage( tabId, {\n        message: \'hello!\',\n        url: changeInfo.url\n      })\n    }\n  }\n);\n

\n\n

最后在扩展程序的内容脚本中监听要使用的数据：

\n\n

内容脚本.js

\n\n

chrome.runtime.onMessage.addListener(\n  function(request, sender, sendResponse) {\n    // listen for messages sent from background.js\n    if (request.message === \'hello!\') {\n      console.log(request.url) // new url is now in content scripts!\n    }\n});\n

\n\n

您可以传递任何您想要的数据background.js。希望对某人有帮助！\\（\xe2\x80\xa2\xe2\x97\xa1\xe2\x80\xa2）/

\n

Answer 2

tabs.onUpdated当状态在loading到之间变化时触发complete。据推测，插入 iframe 会使选项卡loading再次进入状态。

您可以查看侦听器details.url中是否定义了onUpdated- 如果没有，您就知道文档的 URL 没有更改。

也许您应该使用webNavigationAPI来实现您的目的。在那里，您TransitionQualifier可以使用它来过滤子帧导航。