Firefox版本：chrome.tabs.onUpdated.addListener

Question

我有一個Chrome擴展程序，可以監聽頁面上的更新。 在頁面上進行任何更改后，onUpdated方法將調用偵聽器。 如果添加或刪除DOM node>，則會調用偵聽器。 更新：似乎在加載請求后被調用。

我開始將此擴展程序移植到Firefox，到目前為止，我找不到類似的功能。 我想我可能需要深入研究XPCOM。

有人可以指出我正確的方向嗎？ Firefox是否提供類似的功能？

謝謝！

Answer 1

如果您已經有了Chrome擴展程序，則在嘗試將其擴展到Firefox加載項時，一定要查看Addon SDK （這是編寫Firefox加載項的“新”方式，而不是編寫XUL / XPCOM）。 該SDK提供了在其他擴展平台中可以找到的大多數“標准擴展功能”。

我對表達問題的方式有些疑惑。 您的標題非常清晰：您正在尋找chrome.tabs.onUpdated的等效項。 但是，在您的問題中，您的意思是，此事件以某種方式用於檢測何時添加/刪除DOM節點。 這是錯誤的。

附加SDK中沒有chrome.tabs.onUpdated等效項：

• Chrome的“狀態”更改：
  • “正在加載”- 選項卡的“打開”事件 。
  • “ complete”- 選項卡的“ ready”事件 （如果要跟蹤特定的選項卡，請參見Tab實例的“ ready”事件 ）。
• Chrome的“ URL”更改：
  • 標簽的“打開”事件 。
• Chrome的“固定”狀態更改： 無等效項
• Chrome的“收藏夾”更改： 無等效項

這些事件只能在插件的main.js（與Chrome的背景頁面等效）中使用。 如果要將消息發送到內容腳本，請參閱本指南 。

---

如果您對任何選項卡更新事件（如上所述）不感興趣，並且僅對DOM節點更改不感興趣，請堅持使用內容腳本，並在您的Chrome擴展程序和Firefox附加組件中使用幾乎相同的代碼。 Chrome的內容腳本在清單文件中聲明，而Firefox的內容腳本在main.js中聲明。

Chrome和Firefox均支持Mutation Observers ，可用於高效地獲取DOM節點更改的通知。

Answer 2

是的，Firefox支持。 僅僅是在Firefox擴展中，擴展可以基於xul，自舉或基於sdk，而sdk可能不支持您的擴展正常工作所需的一切。

以下解決方案適用於基於xul和自舉的擴展。

在我的自舉擴展中，我使用以下命令：

首先，定義一個tabProgressListener。 您正在尋找onLocationChange

var tabProgressListener = {
  onLocationChange: function (
      /*nsIDOMXULElement*/ aBrowser,
        /*nsIWebProgress*/ aWebProgress,
        /*nsIRequest*/ aRequest,
        /*nsIURI*/ aLocation) {
        myExtension.handleTabLocationChanged(aBrowser, aLocation);
  },

  onProgressChange: function() {},
  onSecurityChange: function() {},
  onStateChange: function() {},
  onStatusChange: function() {},
  onRefreshAttempted: function(
    /*nsIDOMXULElement*/ aBrowser,
    /*nsIWebProgress*/ webProgress,
    /*nsIURI*/ aRefreshURI,
    /*long*/ aMillis,
    /*boolean*/ aSameURI) {
      // must return true to allow http-meta refreshes
      return true;

  },
  onLinkIconAvailable: function() {}
};

然后在窗口加載時添加tabProgressListener

var gBrowser = document.getElementById('content');
gBrowser.addTabsProgressListener(tabProgressListener);

最后，記得刪除進度監聽器

gBrowser.removeTabsProgressListener(tabProgressListener);

請注意，盡管我不喜歡addon-sdk，但編寫一個sdk擴展要比引導擴展要容易得多。

Answer 3

不幸的是，您需要等到選項卡准備就緒才能訪問URL。 因此，使用附加軟件開發工具包，它的簡化版本（僅適用於活動選項卡）將是：

main.js

var tabs = require('sdk/tabs');
var tab = tabs.activeTab;
var url = tab.url;
tab.on('ready', function() {
    if (tab.url === url) {
        //user just refreshed the page
        return;
    }
    url = tab.url;
    //The URL is different, let's code…
});

有關更多信息，請參見標簽模塊的文檔 。 如果您希望它可用於多個選項卡，則可以從tabs.on('ready', function(tab) {…}); 然后，您必須創建一個URL數組，然后檢查if (urls[tab.index] === tab.url) …