如何在 Chrome 扩展的 JavaScript 中将 CSS 样式表作为字符串注入？

在 JavaScript 中将 CSS 样式表作为字符串注入

要将自定义 CSS 样式添加到 Chrome 扩展程序的界面，我们面临着 document.stylesheets 的挑战。以下是如何使用 JavaScript 字符串注入完整的样式表：

创建并附加样式元素：

最简单的解决方案是创建一个

<code class="javascript">const style = document.createElement('style');
style.textContent = 'body { color: red; }';
document.head.append(style);</code>

多个 CSS 注入：

如果需要要在一次传递中注入多种样式，您可以将上述代码包装在实用函数中：

<code class="javascript">function addStyle(styleString) {
  const style = document.createElement('style');
  style.textContent = styleString;
  document.head.append(style);
}</code>

可替换 CSS 注入：

或者，您可以修改函数覆盖以前的 CSS 注入：

<code class="javascript">const addStyle = (() => {
  const style = document.createElement('style');
  document.head.append(style);
  return (styleString) => (style.textContent = styleString);
})();</code>

IE 限制：

请注意，IE9 及以下版本限制为 32 个样式表，而 IE10 允许 4095 个。请谨慎在旧版浏览器中使用不可替换的代码时。

现代化答案：

出于安全原因，最近更新已将 .innerHTML 替换为 .textContent。更新后的代码：

<code class="javascript">const style = document.createElement('style');
style.textContent = styleString;
document.head.append(style);</code>

以上是如何在 Chrome 扩展的 JavaScript 中将 CSS 样式表作为字符串注入？的详细内容。更多信息请关注PHP中文网其他相关文章！