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

【问题标题】：Google Chrome won't apply injected code from self-built extension on some websites until scroll wheel turned谷歌浏览器不会在某些网站上应用自建扩展注入的代码，直到滚轮转动
【发布时间】：2019-02-15 03:44:31
【问题描述】：

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

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

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

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

按钮点击使popup.js向background.js发送消息
background.js 注入代码（插入 div、样式和/或 svg 元素）或根据发送的消息删除注入的代码

由于某种原因，CB Corrector 和 CB Simulator 之间存在差异：在前者的过滤器之间切换时，变化总是瞬时的；对于后者，在 Facebook 等某些网站上，视口会一直等到使用中间的滚轮按钮滚动网站。

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

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

谢谢！

【问题讨论】：

标签： javascript html css google-chrome google-chrome-extension

【解决方案1】：

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

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

我在 Firefox 中加载了您的扩展程序，并且该浏览器似乎能够在没有 <object> 标记作为包装器的情况下访问 SVG 元素。您可以阅读更多关于在 HTML 文档中嵌入 SVG 的内容here。

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

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

输出：

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

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

【讨论】：