WebExtension Svelte & TailwindCSS

A template for developing WebExtensions with Svelte & TailwindCSS

Features

• Svelte
• TypeScript
• TailwindCSS
  • MD3 Color Tokens
  • Dark Mode support
• Unplugin Icons (Iconify)
• WebExtension polyfill

Dev Tools

• pnpm
• npm-run-all

Usage

Directories

• src/ - main source

  • assets/ - assets for Svelte components
  • components/ - Svelte components that can be used on all pages
  • pages/ - directory for all extension pages
    • background/ - background scripts (additional scripts need to be added to vite.config.ts and manifest.json)
    • content/ - scripts and components to be used for content_script
    • options/ - options page files
    • popup/ - popup page files
  • theme/ - theme files

• public/ - static extension files

  • icon/ - extension icon files
  • manifest.json - manifest file

• dist/ - built files, use this directory for loading the extension

Development

pnpm dev

Then load the extension in browser from the dist/ directory. There is a nodemon config file for automatic building.

Build

pnpm prod

Then pack/zip files in the dist directory.

Things to change

• Change page titles in popup.html & options.html
• Change extension name and description in manifest.json
• Change package name in package.json
• Change extension icon in public/icon
• Setup colors in src/theme/tokens.css

Icons

• Preinstalled icon pack is Material Design Icons (@iconify-json/mdi)
• Learn how to install other icon packs here

Todo

• Linter/ESLint
• Find an elegant way to do HMR
• Find a way to have only one vite config
• Build manifest with typescript
• Many other optimizations