How to Inject CSS Stylesheets as Strings in JavaScript for Chrome Extensions?

Injecting CSS Stylesheets as Strings in JavaScript

To add custom CSS styles to a Chrome extension's interface, we face challenges with document.stylesheets. Here's how to inject complete stylesheets using JavaScript strings:

Creating and Appending a Style Element:

The simplest solution is to create a

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

Multiple CSS Injections:

If you want to inject multiple styles into one pass, you can wrap the above code in a utility function:

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

Replaceable CSS Injections:

Alternatively, you can modify the function to overwrite previous CSS injections:

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

IE Limitations:

Note that IE9 and below have a limit of 32 stylesheets, while IE10 allows 4095. Be cautious when using the non-replaceable code for older browsers.

Modernizing the Answer:

Recent updates have replaced .innerHTML with .textContent for security reasons. The updated code:

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

The above is the detailed content of How to Inject CSS Stylesheets as Strings in JavaScript for Chrome Extensions?. For more information, please follow other related articles on the PHP Chinese website!