Main-world Content Script

Injects a small UI into every web page from both the extension and the page's own JavaScript world, with an options page that moves it to the left or right edge.

Runs on Chrome, Edge, Firefox · Manifest V3 · Surfaces: content script, options page, background service worker · Styling: CSS · Level: intermediate

Create this project

npx extension@latest create my-content-main-world --template content-main-world
cd my-content-main-world
npm install
npm run dev

What it is for

  • Hook into page-level globals that isolated content scripts cannot reach
  • Bridge isolated and main-world execution contexts cleanly
  • Read a stored setting from a main-world script that has no chrome APIs

First steps

  • Run npm run dev to launch the extension
  • Click Open options on the UI injected into the page
  • Tick the setting and watch the main-world UI move to the left edge

Permissions it asks for

  • storage
  • <all_urls>

Source on GitHubDocumentation

extension.devDocumentation for extension.dev