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

Files in this template

  • extension.config.js
  • public/fonts/MomoSignature-Regular.ttf
  • public/fonts/MomoSignature-Regular.woff2
  • public/fonts/OFL.txt
  • src/background.js
  • src/content/scripts.js
  • src/content/styles.css
  • src/images/icon.png
  • src/manifest.json
  • src/options/index.html
  • src/options/scripts.js
  • src/options/styles.css

extension.devDocumentation for extension.dev