chrome 扩展内容脚本在 url 更改时不起作用，但仅在刷新后起作用

Question

我正在开发一个 chrome 扩展，以便在 URL 后缀与源代码类型（例如 xxx.cpp）匹配的情况下在 Github 站点上进行一些更改

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

我做错了什么？谢谢。

以下是代码。

清单.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"
        }
    ]
}

内容.js

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

Answer 1

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

这提高了网站的性能，但这确实意味着浏览器扩展不能总是依赖于加载的内容脚本，即使浏览器显示匹配的 URL。

我的解决方案？为整个站点启用扩展，并控制 MutationObserver 后面的内容脚本功能，每次调用回调时都会检查 window.location.href：

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

我还会在调用内容脚本时立即调用回调，以确保脚本在页面重新加载时正确触发。您可能必须使用观察者配置以确保观察者在所有正确的时间触发回调。

请注意，除非刷新整个页面，否则观察者的目标节点将保留在文档中。如果它被覆盖，您将失去观察者并且您的脚本将不会被触发。就我而言， document.body 工作得很好。