我知道我可以使用 run_at: document end 在页面加载后运行脚本,但现在大多数网站通过某种 js 框架注入(inject)大部分内容。据我所知,content.js 脚本在它们完成之前正在运行。
我对如何做到这一点有一些想法,但我不是真的,如果他们真的有意义,或者如果他们这样做的话,我什至不知道如何去做。
每次 DOM 更新时都运行我的脚本,以便在添加超链接时我可以再次删除 href。
我找到了这个 domwatcher thing in uBlock origin ,我假设他正在做类似的事情以删除显示的任何广告,但这真的很复杂,我不确定我需要或不需要哪些东西。
每隔一两秒运行一次扩展程序。这看起来真的很笨拙,但也许这是一个标准的事情?我不确定。我也不知道如何让内容脚本重复,这么简单的事情不会导致性能问题吧?
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);
}
});
最佳答案
由于 DOM 是由它使用的任何框架/库动态生成的,因此我会观察 DOM 中的任何变化并处理新创建的内容。我认为这比尝试检测 DOM 内容何时完成构建和运行更好 contentScripts
无论如何,考虑到页面内容可以在用户访问页面时随时动态生成和更改。
我的解决方案是您可以观察任何新创建的链接元素并删除 href
属性是否符合您想要的模式。这可以通过使用以下任一方法来完成:
- MutationObserver : 用于观察 DOM 变化的 Javascript 接口(interface)
- Arrive.js : 一个用于观察 DOM 变化的库。
您提供的 uBlock 示例也使用了 MutationObserver
观察 DOM 树的变化,所以我认为作者也使用了我在这里提到的方法。
关于javascript - 在网站的 javascript 完成页面构建后,如何运行 Chrome 扩展内容脚本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50733661/