如何在 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中文網其他相關文章！