Chrome 扩展：在加载的 Dom 上注入脚本

Posted 2023-03-06

【中文标题】Chrome 扩展：在加载的 Dom 上注入脚本

【英文标题】：Chrome Extension: Inject script on Dom loaded

【发布时间】：2016-03-09 12:28:57

【问题描述】：

我正在开发一个 chrome 扩展程序。实际上我在页面加载事件中注入了一些脚本，但这会导致丑陋的行为（我正在删除一些元素）。出于这个原因，我想在 DOM 加载后注入一些脚本，几年前我能够做到这一点，但现在对我来说是不可能的。

您知道在当前版本中是否可以实现以及如何实现？

编辑：

这是我当前的代码：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) 
    if (changeInfo.status === 'complete') 
        chrome.tabs.executeScript(tabId,'file':'onLoad.js');  
    
);

非常感谢您的帮助。

【问题讨论】：

请创建并发布minimal, complete and verifiable 示例...很难猜出您要做什么以及错误是什么...

至少，解释一下你所说的丑陋行为是什么意思——以及为什么你不能复制你多年前所做的事情。

嗨。这很简单，我从页面中删除了一些元素，因为它是在加载后完成的，您可以看到元素在更改网页布局几秒钟后消失，所以我想在渲染元素之前这样做，就在之后DOM 负载。在 Chrome 改变扩展策略以及在选项卡中捕获事件和注入脚本的方式之前，我能够做到这一点。

@Iskariote，当您说“在渲染元素之前但在 DOM 加载之后”时，您的意思是什么？您的意思是 DOM 是完整的，但图像等子资源不完整？

大家好，我编辑了描述以添加我的实际代码。 @HaibaraAi，确实我在引用 DOM 中的元素，我之前保存了一个选择器，我想在加载任何资源之前从 DOM 中删除元素。

【参考方案1】：

考虑你的意图

我想在加载任何资源之前从 DOM 中删除元素

您可以查看content scripts 并参考run_at 部分。您可以设置"run_at": "document_end"，这将确保您的代码在 DOM 完成之后但在任何其他资源加载之前被注入。

在“document_end”的情况下，文件在 DOM 完成后立即注入，但在图像和框架等子资源加载之前。

【讨论】：

请注意，在changeInfo.status === 'complete' 注入在任何情况下都会抵消这一点，因为它会在子资源加载后触发。

@Xan，所以我只建议通过manifest.json 执行此操作，而不是通过代码注入。

这取决于为什么首先使用程序注入。如果问题中的 sn-p 是实际的、未修剪的代码，那么基于清单的解决方案当然更好。否则，需要提及“完成”状态为时已晚。

@Xan，有没有关于“加载”和“完成”精确定义的文档？

很遗憾，没有。 The enum，the event。根据经验，当 Chrome 用网站图标替换微调器时会触发此事件（我认为这是在 window.onload 之后发生的）