Firefox 版本：chrome.tabs.onUpdated.addListener

Question

我有一个 Chrome 扩展程序可以监听页面上的更新。 onUpdated 方法在页面上进行任何更改后调用侦听器。 如果你添加或删除一个 DOM 节点>，就会调用监听器。 更新：它似乎是在加载请求后调用的。

我开始将此扩展移植到 Firefox，但到目前为止我找不到类似的功能。我想我可能需要深入研究 XPCOM。

有人能指出我正确的方向吗？ Firefox 是否提供类似的功能？

谢谢！

Answer 1

如果您已经有 Chrome 扩展，当您尝试将其移植到 Firefox 附加组件时，您绝对应该查看Addon SDK（这是编写 Firefox 附加组件的“新”方式，反对写 XUL/XPCOM）。此 SDK 提供了您在其他扩展平台中可以找到的大部分“标准扩展功能”。

我对你的问题的措辞方式有点困惑。您的标题非常明确：您正在寻找与chrome.tabs.onUpdated 等效的内容。但是，在您的问题正文中，您暗示此事件以某种方式用于检测何时添加/删除 DOM 节点。这是错误的。

插件 SDK 中没有一个与 chrome.tabs.onUpdated 等效的版本：

• Chrome 的“状态”变化：
  • “正在加载”-tabs' "open" event。
  • “完成”-tab's "ready" event（如果您想跟踪特定标签，请参阅"ready" event of a Tab instance）。
• Chrome 的“url”更改：
  • tabs' "open" event。
• Chrome 的“pin”状态更改：没有等效项
• Chrome 的“网站图标”更改：没有等效项

这些事件只能在插件的 main.js 中使用（相当于 Chrome 的背景页面）。如果您想向内容脚本发送消息，请参阅this guide。

---

如果您对任何选项卡更新事件（如上所述）不感兴趣，并且只对 DOM 节点更改感兴趣，只需坚持使用内容脚本并在 Chrome 扩展程序和 Firefox 插件中使用几乎相同的代码。 Chrome's content script 在 manifest 文件中声明，而 Firefox' content scripts 在 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。因此，使用 Add-on SDK，它的简化版本（仅适用于活动选项卡）将是：

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…
});

请参阅docs for the tab module 了解更多信息。如果您希望它适用于多个选项卡，您可以从 tabs.on('ready', function(tab) {…}); 开始，然后您必须创建一个 URL 数组，然后检查 if (urls[tab.index] === tab.url) …