Chrome 扩展标签 onUpdated 事件

Question

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

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

Answer 1

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

清单

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

background.js

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

    }
  }
);

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

background.js（续）

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

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

contentscript.js

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

您可以从background.js 传递您想要的任何数据。希望对某人有所帮助！ \ (•◡•) /

Answer 2

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

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

也许您应该使用webNavigation API 来代替您的目的。在那里，您会得到一个 TransitionQualifier，您可以使用它来过滤子框架导航。