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

Files in this template

  • extension.config.js
  • src/background.js
  • src/content/isolated-one.js
  • src/content/isolated-options.js
  • src/content/isolated-two.js
  • src/content/scripts.js
  • src/content/styles.css
  • src/content/utils/bridge.js
  • src/content/utils/constants.js
  • src/content/utils/create-badge.js
  • src/images/icon.png
  • src/manifest.json
  • src/options/index.html
  • src/options/scripts.js
  • src/options/styles.css

Source on GitHubDocumentation

extension.devDocumentation for extension.dev