Custom fonts in a content script

Injects a badge rendered in a custom font into every web page you visit, with an options page that turns the custom font on and off.

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

Create this project

npx extension@latest create my-content-custom-font --template content-custom-font
cd my-content-custom-font
npm install
npm run dev

What it is for

  • A content script that ships its own typeface
  • One font setting shared between an options page and a content script
  • Starting point for injected UI that must not inherit host page type

First steps

  • Run npm run dev to launch the extension
  • Click Open options on the badge injected into the page
  • Untick the setting and watch the badge fall back to the system font

Permissions it asks for

  • storage
  • <all_urls>

Source on GitHubDocumentation

extension.devDocumentation for extension.dev