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

Question

我知道我可以使用run_at：document end在加载页面后运行脚本，但现在大多数站点通过某种js框架注入大部分内容。据我所知，content.js脚本在完成之前就已经运行了。

我对如何做到这一点有一些想法，但我不是真的，如果他们真的有意义，甚至如果他们这样做的话怎么做。

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

   我发现了这个domwatcher thing in uBlock origin，我认为他会做这样的事情，以便删除任何出现的广告，但它真的很复杂，我不知道是什么我愿意或不需要的东西。

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

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

此处还有GitHub page with all the code。

相关清单：

 "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界面​​
• Arrive.js：用于观察DOM更改的库。

您提供的 uBlock 示例也使用MutationObserver来监视DOM树的更改，因此我认为作者也在使用我在此处提到的方法。