Chrome擴展程序標簽onUpdated事件

Question

我正在構建一個chrome擴展，每次打開一個新選項卡並加載頁面時都會收到通知，為此我使用了chrome.tabs.onUpdated事件。

問題是，如果在某個域（有src）上托管的頁面/選項卡上插入了iframe，則onUpdated事件會被觸發。 有沒有辦法區分這些事件的“真實”標簽加載與iframe加載觸發的那些？

Answer 1

tabs.onUpdated在loading complete之間狀態發生變化時觸發。 據推測，插入iframe會將標簽再次置於loading狀態。

您可以查看是否在onUpdated偵聽器中定義了details.url - 如果沒有，您知道文檔的URL沒有更改。

也許您應該使用webNavigation API來代替您的目的。 在那里，您將獲得可用於過濾子幀導航的TransitionQualifier 。

Answer 2

這個問題幫助我擴展，識別新頁面和加載內容在同一頁面上的區別，所以我想我會分享我的解決方案。 首先，您需要在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傳遞您想要的任何數據。 希望有人幫助！ \\（•◡•）/