Skip to content

Content Scripts

Chrome DocsFirefox Docs

When creating content script entrypoints, they are automatically included in the manifest.json along with any CSS files they import.


Input PatternOutput Path


export default defineContentScript({
  // Set manifest options
  matches: string[],
  excludeMatches: undefined | [],
  includeGlobs: undefined | [],
  excludeGlobs: undefined | [],
  allFrames: undefined | [],
  runAt: undefined | 'document_start' | 'document_end' | 'document_idle',
  matchAboutBlank: undefined | true | false,
  matchOriginAsFallback: undefined | true | false,
  world: undefined | 'ISOLATED' | 'MAIN',

  // Set include/exclude if the background should be removed from some builds
  include: undefined | string[],
  exclude: undefined | string[],

  // Configure how CSS is injected onto the page
  cssInjectionMode: undefined | "manifest" | "manual" | "ui",

  // Configure how/when content script will be registered
  registration: undefined | "manifest" | "runtime",

  main(ctx: ContentScriptContext) {
    // Executed when content script is loaded

All manifest options default to undefined.

When defining multiple content scripts, content script entrypoints that have the same set of options will be merged into a single content_script item in the manifest.


To include CSS with your content script, import the CSS file at the top of your entrypoint.

└─ entrypoints/
   └─ overlay.content/
      ├─ index.ts
      └─ style.css
// entrypoints/overlay.content/index.ts
import './style.css';

export default defineContentScript({
  matches: ['*://*', '*://*'],

  main(ctx) {
    // ...

Any styles imported in your content script will be added to that content script's css array in your manifest.json:

// .output/chrome-mv3/manifest.json
  "content_scripts": [
      "matches": ["*://*", "*://*"],
      "js": ["content-scripts/overlay.js"],
      "css": ["content-scripts/overlay.css"]

To disable this behavior, set cssInjectionMode to "manual" or "ui".

export default defineContentScript({
  matches: ['*://*', '*://*'],
  cssInjectionMode: 'manual',

  main(ctx) {
    // ...

See Content Script UI for more info on creating UIs and including CSS in content scripts.