谷歌浏览器不会在某些网站上应用自建扩展程序的注入代码，直到滚轮转动

Question

我创建了两个Chrome扩展名，目的是在任何网页上应用CSS和SVG过滤器，可在此处查看代码：

CB校正器（修改现场颜色以帮助颜色蓝调的人）https://drive.google.com/open?id=1Hvjin3kpamjaiwraiutievkeesq1ce6w

CB模拟器（模拟色盲以帮助业余网络开发人员）https://drive.google.com/open?id=1_AHGNSLL2JAM0PXMH7WUPSBIWBZIEJQ0

虽然两个扩展具有不同的目的，但它们的实现相似：

• 按钮单击使弹出窗口发送消息到背景
• background.js注入代码（插入div，样式和/或SVG元素）或基于已发送消息的注入代码

由于某种原因，CB校正器和CB模拟器之间存在差异：当前者之间的过滤器之间切换时，更改始终是瞬时的；使用后者，在某些网站（例如Facebook）上，视口等待网站用中间轮按钮滚动。

按下按钮后，这两个扩展名都会更改页面的源代码，并且仅对CB模拟器发生实现的延迟。

如果您知道为什么会发生这种情况，请告诉我。

谢谢！

Answer 1

您正在创建一个SVG元素，并将整个SVG字符串添加到其InnerHTML属性中。这将创建这样的元素：

<svg id="insertedSVG">
   <svg width="0" height="0"></svg>
</svg>

我在Firefox中加载了您的扩展名，似乎该浏览器能够在没有<object>标签的情况下访问SVG元素作为包装器。您可以在此处阅读有关HTML文档中嵌入SVG的更多信息。

解决方案是将SVG元素包裹在<object>标签中，因此Chrome将能够访问SVG组件。

var insertSVG = document.createElement('object');

输出：

<object id="insertedSVG">
   <svg width="0" height="0"></svg>
</object>

obs：删除manifest.json中的背景persistent键，因为此功能将在清单V3中删除。如果您希望扩展在Firefox中工作。