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图标时，我会收到传递的旧网址，表明内容脚本未获取该网页的新网址。

有什么想法吗？

Answer 1

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

如果网址片段发生变化，您可以使用window.onhashchange事件。

如果网址完全更改但页面未重新加载，则可能是使用history.pushState或history.replaceState功能实现的。不幸的是，他们不会触发任何事件。因此，检测起来很棘手。

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

编辑：从linked question开始，更好的解决方案是收听chrome.webNavigation.onHistoryStateUpdated（信用joshft91）

内容脚本不会在每个页面加载时注入

1 个答案: