content_script.js

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

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

Answer 2

我发现的最佳答案有点有趣，内容脚本和background.html文件之间有一些message passing。

我会发布代码然后解释：

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，我们会问“你是我的内容脚本吗？如果是，请重新开始。”

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

2 个答案:

Background.html

content_script.js