Chrome 扩展：如何根据 Ajax 请求重新加载/重新执行内容脚本

Question

我正在尝试执行某个网站的内容脚本（插入按钮或更改链接），但是我想在用户浏览网站时执行此操作。

问题在于网页是在用户浏览时通过 ajax 请求动态构建的。

我之前在我编写的扩展中通过将 JavaScript 实际注入到网页中解决了这个问题。

我想知道是否有更好的选择，可以在我的内容脚本中注册 ajaxComplete 事件或类似的事件，以便我可以重新执行。

我可以执行以下操作：

function listener()
{
    console.debug("listener fired.");
}
document.addEventListener("DOMSubtreeModified", listener, false);

但是，在一页加载期间会触发太多次。

Answer 1

据我所知，没有ajax侦听器，但无论如何它都没有多大帮助，因为您需要捕获页面被修改的时间，而不是发送/接收ajax请求的时间（页面修改通常发生在稍后，并且不能与ajax请求绑定）根本没有）。

DOMSubtreeModified 是正确的方法，只需实施一些保护，防止过于频繁的调用：

function listener()
{
    console.debug("listener fired.");
}

var timeout = null;
document.addEventListener("DOMSubtreeModified", function() {
    if(timeout) {
        clearTimeout(timeout);
    }
    timeout = setTimeout(listener, 500);
}, false);

这样，如果 500 毫秒内没有其他事件，它将触发 listener。

Answer 2

我发现的最佳答案有点有趣，涉及一些消息传递内容脚本和background.html 文件之间。

我将发布代码然后解释：

Background.html

  function updatePageAction(tabId)
  {
    chrome.tabs.sendRequest(tabId, {is_content_script: true}, function(response) {
      if (response.is_content_script)
        chrome.pageAction.show(tabId);
    });
  };

  chrome.tabs.onUpdated.addListener(function(tabId, change, tab) {
    if (change.status == "complete") {
      updatePageAction(tabId);
    }
  });

content_script.js

// The background page is asking us to find an address on the page.
if (window == top) {
  chrome.extension.onRequest.addListener(function(req, sender, sendResponse) {
        if (req.is_content_script)
            start_content_script();
            sendResponse({is_content_script: true});
  });
};

您想要解决在 DOM 更改时更新或重新执行脚本的问题。幸运的是，DOM 更改涉及 URL 更改（尽管是 AJAX DOM 更改来更新页面）。
然而，URL 更改会触发 onUpdated 事件。然而，每个选项卡都会触发这些“事件”，我们希望确保我们只关心与内容脚本匹配的事件（您可以在清单中指定匹配项！）。

通过将消息传递给当前选项卡中正在执行的 content_script，我们询问“你是我的内容脚本吗？如果是，请重新启动。”