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

Question

我创建了两个Chrome扩展程序，旨在将CSS和SVG过滤器应用于任何网页，可在此处查看代码：

CB校正器（在现场修改颜色以帮助色盲人员） https://drive.google.com/open?id=1hvJIn3kPAMjaIWrAiUtIEVkEesQ1ce6W

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

虽然这两个扩展名有不同的用途，但它们的实现方式是相似的：

• 单击按钮可使popup.js将消息发送到background.js
• background.js注入代码（插入div，样式和/或svg元素）或根据发送的消息删除注入的代码

由于某些原因，CB校正器和CB仿真器之间存在差异：在前者中的过滤器之间切换时，更改始终是瞬时的。对于后者，在诸如Facebook之类的某些网站上，视口会一直等到使用中间滚轮按钮滚动网站。

两个扩展名均会在按下按钮后立即更改页面的源代码，并且实现延迟仅发生在CB Simulator中。

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

谢谢！

Answer 1

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

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

我在Firefox中加载了您的扩展程序，看来该浏览器无需使用<object>标签作为包装即可访问SVG元素。 您可以阅读有关在HTML文档here中嵌入SVG的更多信息。

解决方案是将SVG元素包装在<object>标签中，这样Chrome就能访问SVG组件。

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

输出：

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

提示：删除persistent中的背景manifest.json键，因为此功能将在清单v3中删除。如果您希望扩展程序在Firefox中运行，也需要将其删除。