Chrome扩展内容脚本在URL更改时不起作用，而仅在刷新后起作用

Question

我正在开发一个Chrome扩展程序，以在GitHub站点上进行一些更改，而URL Postfix匹配源代码类型（例如，XXX.CPP），

我希望每次选项卡时都会运行content.js完成加载DOM元素。但是，仅在我按“刷新”按钮时运行。如果我单击超链接并转到另一个URL，content.js将无法运行。

我做错了什么？谢谢。

以下是代码。

subtest.json

{
    "name": "My Chrome Ext",
    "description": "change appearance of source code on Github",
    "version": "0.1",
    "manifest_version": 3,
    "permissions": ["storage", "activeTab"],
    "action": {},
    "content_scripts": [
        {
            "matches": ["*://github.com/*cpp"],
            "all_frames": true,
            "js": ["content.js"],
            "run_at": "document_end"
        }
    ]
}

content.js

window.alert("start running content.js");

Answer 1

Chrome扩展内容脚本仅在匹配您清单中指定的URL的全新网页时才加载。在这个单页Web应用程序的时代，包括GitHub在内的许多网站都使用JavaScript框架和Ajax调用，仅在用户在网站周围导航时仅更新现有网页内容的部分。即使正在更新地址栏，大多数时候都没有执行实际的页面负载，因此您的Chrome扩展名不会触发。

这改善了网站的性能，但这确实意味着即使浏览器正在显示匹配的URL，浏览器扩展程序也不能总是取决于其内容脚本。

我的解决方案？启用整个站点和门的扩展名

function addLocationObserver(callback) {

  // Options for the observer (which mutations to observe)
  const config = { attributes: false, childList: true, subtree: false }

  // Create an observer instance linked to the callback function
  const observer = new MutationObserver(callback)

  // Start observing the target node for configured mutations
  observer.observe(document.body, config)
}

function observerCallback() {

  if (window.location.href.startsWith('https://github.com')) {
    initContentScript()
  }
}

addLocationObserver(observerCallback)
observerCallback()

。页面重新加载。您可能必须使用观察者配置来确保观察者在所有适当的时间触发回调。

请注意，除非整个页面刷新整个页面，否则观察者的目标节点是保留在文档中的节点。如果被覆盖，您将失去观察者，而您的脚本将不会被触发。在我的情况下，文档可以正常工作。

Answer 2

在战斗了几天之后，我找到了一种解决历史状态更新时可靠起作用的解决方案，但它需要许多许可才能运行。

这需要清单V3的以下权限

"permissions: [
  "tabs",
  "scripting",
  "webNavigation"]

，并将

"host_permissions":[ "https://github.com/*"]

以下代码添加到Service-worker.js

//This seems to force the content-script to be reloaded when the history changes
chrome.webNavigation.onHistoryStateUpdated.addListener( async (details) =>  {
   
    const getCurrentTab = async () => {
        let queryOptions = { active: true, lastFocusedWindow: true };     
        let [tab] = await chrome.tabs.query(queryOptions);
        return tab;
      }
    
    let tab = await getCurrentTab();

    chrome.scripting.executeScript({
        target: {tabId: tab.id},
        func: () => {} //this literally will execute an empty function in the current tab which seems to be enough to reload or reconnect the content-script
      });
});