Supex Text LogoSupex Logo Mark

Content Scripts

Script files inside app/contents will be used as content scripts.

Vanilla JSapp/contents/example.js

import 'index.css';

console.log('Working');

export const pattern = {
  matches: ['*://*.example.com/*'],
};

index.css

body {
  background-color: red !important;
}

If you visit example.com, the page background will be red and it'll also log Working in the console.

Note: For now the contents folder can contain only script files. So if you want to only apply styling, please create a script file and then import the css files into your script file.

Exports

Each content script can export a pattern object which specifies the URL patterns to be matched in order for the script to be loaded. The pattern has the following properties:

matches: string[]*

An array of URL patterns into which the script should be injected. Learn more about match patterns here.

globs: string[]

An array of wildcards applied after matches to include only the URLs that match this glob. Learn more about globs here.

runAt: string

Determines when the script file should be injected. Possible values are:

  • document_idle (Default)
  • document_end
  • document_start

allFrames: boolean

Determines whether the script should be injected into all frames matching the specified URL requirements or only to the topmost frame. Default to false.

matchBlank: boolean

Determines whether the script should be injected into an about:blank frame where the parent URL matches the URL requirements. Default to false.

excludeGlobs: string[]

An array of wildcards applied after matches to exclude URLs that match this glob.

excludeMatches: string[]

An array of URL patterns to exclude from the match.