时间戳

首页 > 解决方案 > 如何在站点的 javascript 完成构建页面后运行 Chrome 扩展内容脚本？

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

问题描述

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

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

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

    我在 uBlock origin 中发现了这个domwatcher 的东西，我认为他正在做这样的事情是为了删除出现的任何广告，但这真的很复杂，我不确定我需要或不需要什么东西。

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

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

这也是我的GitHub 页面，其中包含所有代码。

相关清单：

 "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);
    }
});

标签： javascriptasynchronousgoogle-chrome-extensioncontent-scriptpage-load-time

解决方案

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

我的解决方案是，您可以观察任何新创建的链接元素，href如果它与您想要的模式匹配，则删除属性。这可以通过使用以下任一方法来完成：

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

推荐阅读