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

这样,listener如果在500ms内没有其他事件,它将触发.

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事件.但是,每个选项卡都会触发这些"事件",我们希望确保我们只关心我们匹配内容脚本的那个(您可以在清单中指定匹配!).

通过将messgae传递给当前选项卡中正在执行的content_script,我们会问"你是我的内容脚本吗？如果有,请重新启动."