Syntax

await browser.scripting.insertCSS(
  details     // object
)

Parameters

details

An object describing the CSS to insert and where to insert it. It contains the following properties:

css Optional

string. A string containing the CSS to inject. Either css or files must be specified.

files Optional

array of string. The path of CSS files to inject relative to the extension's root directory. Either files or css must be specified.

origin Optional

string. The style origin for the injection, either USER, to add the CSS as a user stylesheet, or AUTHOR, to add it as an author stylesheet. Defaults to AUTHOR. This property is case-insensitive from Firefox 144.

• USER enables you to prevent websites from overriding the CSS you insert: see Cascading order.
• AUTHOR stylesheets behave as if they appear after all author rules specified by the web page. This behavior includes any author stylesheets added dynamically by the page's scripts, even if that addition happens after the insertCSS call completes.

target

scripting.InjectionTarget. Details specifying the target to inject the CSS into.

Return value

A Promise that fulfills with no arguments when all the CSS is inserted. If any error occurs, the promise is rejected.

Examples

This example inserts CSS taken from a string into the active tab.

browser.action.onClicked.addListener(async (tab) => {
  try {
    await browser.scripting.insertCSS({
      target: {
        tabId: tab.id,
      },
      css: `body { border: 20px dotted pink; }`,
    });
  } catch (err) {
    console.error(`failed to insert CSS: ${err}`);
  }
});

This example inserts CSS loaded from a file (packaged with the extension) called "content-style.css":

browser.action.onClicked.addListener(async (tab) => {
  try {
    await browser.scripting.insertCSS({
      target: {
        tabId: tab.id,
      },
      files: ["content-style.css"],
    });
  } catch (err) {
    console.error(`failed to insert CSS: ${err}`);
  }
});

Example extensions

• beastify

Browser compatibility