javascript - 在网站的 javascript 完成页面构建后，如何运行 Chrome 扩展内容脚本？

Question

我知道我可以使用 run_at: document end 在页面加载后运行脚本，但现在大多数网站通过某种 js 框架注入(inject)大部分内容。据我所知，content.js 脚本在它们完成之前正在运行。

我对如何做到这一点有一些想法，但我不是真的，如果他们真的有意义，或者如果他们这样做的话，我什至不知道如何去做。

1. 每次 DOM 更新时都运行我的脚本，以便在添加超链接时我可以再次删除 href。

   我找到了这个 domwatcher thing in uBlock origin ，我假设他正在做类似的事情以删除显示的任何广告，但这真的很复杂，我不确定我需要或不需要哪些东西。

2. 每隔一两秒运行一次扩展程序。这看起来真的很笨拙，但也许这是一个标准的事情？我不确定。我也不知道如何让内容脚本重复，这么简单的事情不会导致性能问题吧？

3. Javascript 脚本在 html 中列出时按顺序执行，对吗？那么也许我将脚本添加到所有这些的末尾？但是它们无论如何都是异步运行的，所以这可能行不通。无论哪种方式，在完成所有其他操作后，都可以通过某种方式运行我的脚本。我可以把它们放在 promise 中吗？

这也是我的 GitHub page with all the code .

相关 list :

 "content_scripts": [
    {
    "matches": [
        "http://*/*",
        "https://*/*"
        ],
    "js": ["content.js"],
    "run_at": "document_end"
    }
]

和 content.js:

chrome.storage.sync.get('isEnabled', function (data) {
    if(!data.isEnabled) {
        return;
    }

    for (let link of document.links) {
        link.removeAttribute('href');
        console.log(link);
    }
});

Answer 1

由于 DOM 是由它使用的任何框架/库动态生成的，因此我会观察 DOM 中的任何变化并处理新创建的内容。我认为这比尝试检测 DOM 内容何时完成构建和运行更好 contentScripts无论如何，考虑到页面内容可以在用户访问页面时随时动态生成和更改。

我的解决方案是您可以观察任何新创建的链接元素并删除 href属性是否符合您想要的模式。这可以通过使用以下任一方法来完成:

• MutationObserver : 用于观察 DOM 变化的 Javascript 接口(interface)
• Arrive.js : 一个用于观察 DOM 变化的库。

您提供的 uBlock 示例也使用了 MutationObserver观察 DOM 树的变化，所以我认为作者也使用了我在这里提到的方法。