PushState 更改 - 相当于 Chrome 扩展 onHistoryStateUpdated

我正在将 Chrome 扩展程序移植到 Firefox 扩展程序，由于其运行的网站的性质，我需要监视pushState.

Chrome 扩展有一个方便的方法来处理这个问题：chrome.webNavigation.onHistoryStateUpdated。我在Chrome扩展中的使用方式如下：

chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
  var tabUrl = details.url;
  if (isTabUrlValid(tabUrl)) {
    $.get(tabUrl, function(data) {
    var videoUrl = $(data).find('meta[itemprop=contentURL]').prop('content');
    videoUrl = validateUrl(videoUrl);
    videoUrl5k = make5kUrl(videoUrl);
  });
 }
});

我需要对 Firefox 扩展执行同样的操作，但我还没有找到任何好的答案。我尝试过做这里提到的答案：如何通过history.pushState获得有关历史记录更改的通知？

(function(history) {
  var pushState = history.pushState;
  history.pushState = function(state) {
    if (typeof history.onpushstate == "function") {
        history.onpushstate({state: state});
    }
    var tabUrl = tabs.activeTab.url;
    console.log("UPDATED TAB URL: " + tabUrl);
    if (isTabUrlValid(tabUrl)) {
      $.get(tabUrl, function(data) {
        var videoUrl = $(data).find('meta[itemprop=contentURL]').prop('content');
        videoUrl = validateUrl(videoUrl);
        videoUrl5k = make5kUrl(videoUrl);
      });
    }
    return pushState.apply(history, arguments);
  };
})(window.history);

问题是当我这样做时cfx run它抱怨说history/window is undefined因此永远不会被发现。我认为这是由于它位于 SDK 内，但我不知道有什么好的解决方法。

有什么想法吗？

编辑：我看了下面 @willma 的答案，我认为这对我不起作用。问题是 URL 是通过以下方式更新的pushState并且 DOM 不是...有什么好的方法可以复制我在 chrome 扩展中所做的事情吗？

编辑：这是pageMod portion

pageMod.PageMod({
  attachTo: 'top', // Don't attach to iFrames --> http://goo.gl/b6b1Iv
  include: [URLs],
  contentScriptFile: [data.url("jquery-2.1.1.min.js"),
                      data.url("csScript.js")],
  onAttach: function(worker) {
    worker.port.on('url', function(url) {
      var videoUrl = validateUrl(url);
      videoUrl5k = make5kUrl(videoUrl);
      console.log("--5K URL--: " + videoUrl5k);
    });
  }
});

该历史代码需要使用注入到选项卡中content script。现在，您的逻辑是当历史事件发生时，检查选项卡 URL 是否有效。

在 Firefox 中，逻辑则相反：打开选项卡时，检查其 URL 是否有效，如果有效，则向其附加一个脚本来监视历史事件。为此，您需要使用Page Mod.

编辑：所有代码

您缺少的一个关键概念是内容脚本和主/库脚本之间的区别。库脚本存储在lib并有权访问所有 SDK 模块，但无权访问 DOM、窗口对象……内容脚本存储在data，使用以下方式注入到页面中PageMod or tabs模块，可以访问 dom 和 window 对象，但无法访问任何 SDK 模块。内容脚本本质上类似于您附加标准 HTML 页面的页面脚本（带有<script></script>）但需要注意的是，它们不能与其他页面脚本共享变量，但它们can与主要脚本进行通信。

我提出这个问题的唯一原因是因为您最初的问题是尝试访问window来自主脚本的对象，你的小提琴中的问题是你试图访问tabs内容脚本内的模块。如果这仍然令人困惑，那么值得阅读此答案中最上面的链接。

main.js

const { PageMod } = require('sdk/page-mod');

var sendXHR = function(url) {
  // Do something with the new URL
  // See Request Module docs (below) for sending XHRs from main script.
}

const pageMod = PageMod({
  attachTo: 'top',
  include: '*',
  onAttach: function(worker) {
    worker.port.on('newURL', sendXHR);
  }
});

内容.js

var sendNewUrlToMain = function() {
  self.port.emit('newURL', location.href);
}

var pushState = window.history.pushState;
window.history.pushState = function(state) {
    if (typeof history.onpushstate == "function") {
        history.onpushstate({state: state});
    }
    sendNewUrlToMain();
    return pushState.apply(history, arguments);
}

window.addEventListener('hashchange', sendNewUrlToMain); 

这里有请求模块文档，用于制作 XHR。

注意：如果您不想使用请求模块（唯一的原因是您的 chrome 扩展已经有了标准 XHR 代码，并且不想花时间学习/重写该代码），您可以发送标准XHR来自content脚本，但这样做时，您可能会冒允许用户关闭选项卡的风险，从而在执行 XHR 回调之前销毁脚本。