template-browser-extension

💡 Do you need a cool starter for your next browser extension? You can use template-browser-extension! ✅ Bun, TypeScript, ESLint v9, etc. 💻 Compatible with Mozilla Firefox and Chromium-based browsers (Google Chrome, Microsoft Edge, Opera, Vivaldi, etc.)

⭐ This project is part of the ecosystem of the Relivator and Reliverse projects. 🙏 Please give a star to our projects to make them even better.

Template Demo: 🦊 Firefox Addons (visit mozilla.org after installation)

Scripts

• To install dependencies: bun install
• To check/lint/format: bun appts
• To build: bun run build
• To lint: bun lint
• To run: bun dev

🩷 Sponsors

Thank you, everyone, for your support and for sharing this project! This project, Relivator, and Reliverse are currently sponsored by the following awesome people/organizations:

Patreon, Buy Me a Coffee, Ko-fi

Love using this project? If you're feeling generous, I'd appreciate a cup of coffee. You'll get Reliverse Pro, access to some private repos, pre-release downloads, and the ability to influence my project planning. Thanks!

Discord Server Boost

• demir

Roadmap

TODO: Add bun web-ext lint to the bun lint script, and bun web-ext run to bun dev. Currently, an error is thrown: Error: Cannot find module './url'.

TODO: Try to remove bun and install pnpm. Check if web-ext works with this package manager, which works natively with nodejs (bun has its own libs).

TODO: bun addons-linter ./extension/ doesn't work as well. This command throws an error: You did not build addons-linter yet. Maybe because of bun.

Resources

• web-ext: A command line tool to help build, run, and test web extensions.

Additional

This project was created using bun init in bun v1.1.12. Bun is a fast all-in-one JavaScript runtime.

FAQ

You can find other RQs (Reliverse Questions) in the relivator-nextjs-template repo.

• RQ21: How do I switch the package manager from bun to pnpm, yarn, or npm? RA21: Here's a variant of scripts for pnpm. Scripts presets for other package managers are coming soon. Just replace it in package.json (and make sure nothing is missing).

  "scripts": {
    "appts": "run-s knip lint build format typecheck",
    "build": "pnpm build ./src/index.ts --outdir ./extension/",
    "debug:eslint": "pnpm cross-env TIMING=12 eslint --fix .",
    "dev": "pnpm run src/index.ts",
    "dev:ext": "pnpm web-ext run --source-dir ./extension/",
    "dev:firefox": "pnpm run dev:ext -- --firefox=nightly",
    "format": "pnpm biome format --write .",
    "knip": "dotenv knip",
    "latest": "pnpm update --latest && pnpm add -D typescript@rc typescript-eslint@rc-v8",
    "lint": "pnpm eslint --cache --fix . && pnpm biome lint --write .",
    "lint:al": "pnpm addons-linter ./extension/",
    "lint:we": "pnpm web-ext lint",
    "reli:help": "pnpm tsx reliverse.ts --help",
    "reli:pm": "tsx reliverse.ts --pm",
    "reli:vscode": "pnpm tsx .vscode/presets/switcher.ts",
    "system": "envinfo --system --binaries --utilities",
    "typecheck": "tsc --noEmit",
    "typestat": "typestat --config typestat.json"
  }

Project Structure

Only a few of the files are listed here. This section will be updated in the future versions.

• .vscode
  • presets
  • extensions.json
  • settings.json
• extension
  • assets
  • index.js
  • manifest.json
• src
  • env.ts
  • index.ts
• biome.json
• bun.lockb
• cspell.json
• eslint.config.js
• knip.json
• package.json
• README.md
• reliverse.ts
• reset.d.ts
• tsconfig.json
• typestat.json