内容脚本不会在每次页面加载时都被注入

Question

我的 manifest.json 文件中有一个基本内容脚本，我让它匹配某个 URL 并加载脚本。

"content_scripts": [
    {
        "matches": ["http://www.urlhere.com/videos/*"],
        "js": ["scripts/jquery-2.1.1.min.js", "scripts/csScript.js"]
    }
],

csScript.js 获取页面上的一个属性，并通过消息将其发送回background.js 脚本。

chrome.runtime.sendMessage({url: getUrl()});

function getUrl() {
  url = $('meta[itemprop=contentURL]').attr('content');
  return url;
}

background.js 页面获取带有属性值的消息，对其进行操作，然后显示page_action 图标。

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    url = manipulateUrl(request.url);
    chrome.pageAction.show(sender.tab.id);
});

chrome.pageAction.onClicked.addListener(function(tab) {
console.log("url: " + url);
});

这一切都在第一个页面加载时正常运行 - 内容脚本被执行并且消息被传递。但是，该页面包含指向其他视频的链接...当我单击其中一个时，我注意到 Chrome 微调器在地址栏中加载了一个新 URL，但内容脚本没有再次执行。

当我点击我的page_action 图标时，我得到了传递的旧 URL，这表明内容脚本没有去获取页面的新 URL。

有什么想法吗？

Answer 1

URL 可能通过历史操作或 URL 片段更改而更改，但实际上并未重新加载页面。

如果是URL片段变化，可以使用window.onhashchange事件。

如果 URL 完全改变但页面没有重新加载，可能是通过 history.pushState 或 history.replaceState 函数实现的。不幸的是，它们不会触发任何事件。因此，检测起来很棘手。

一个 hacky 解决方案是将inject code 插入页面到页面上下文中的replace history.pushState function，这样它还可以执行您可以从内容脚本中检测到的一些事情。它可以是 DOM 更改、自定义事件或 window.postMessage 调用。

---

编辑：来自linked question，更好的解决方案是听chrome.webNavigation.onHistoryStateUpdated（感谢joshft91）