(WORK IN PROGRESS)

Web extension to add an alternative player UI to Bandcamp album pages, allowing you to easily save albums to your library, navigate between albums in a single page app, and avoid some of Bandcamp's jank

I got tired of Vite taking 25 seconds to bundle the content script and all of its dependencies every time I changed a file, so I spent multiple days creating this. Dependencies are bundled (supposedly) whenever package.json changes using a complicated Rollup config, sending each module into a separate JS file (/modules/[module name].js, kind of like node_modules) and Babel transpiles the actual content script code whenever that changes, using a custom Babel plugin to transform imports to use the new modules folder.

Also, content scripts don't support ES Modules so Babel and Rollup are outputting SystemJS modules, and I completely rewrote the SystemJS loader to work in a web extension content script

I am sorry

Your source code must include:

• Step-by-step build instructions to create an exact copy of the add-on code, in a README file in your source code or in the reviewer notes on the next page.

  1. yarn
  2. yarn build
  3. yarn pack:xpi

• A build script that executes all necessary technical steps.

  (scripts in the package.json, unfortunately there are some manual steps to build)

• Operating system and build environment requirements.

  Any OS with a properly configured yarn/node should work, I'm on Ubuntu 20.04

• The required version and installation instructions of any programs used in the build process (such as node and npm).

  • Yarn v1: I have 1.22.5, that or any newer version should work
  • Node.js: I have 16.14.0, but any newer should work

Lots of this doesn't apply anymore since I stripped out Vue and have the weird bundling system

A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.

<sub>Popup

Options Page

Inject Vue App into the Content Script</sub>

• ⚡️ Instant HMR - use Vite on dev (no more refresh!)
• 🥝 Vue 3 - Composition API, <script setup> syntax and more!
• 💬 Effortless communications - powered by webext-bridge and VueUse storage
• 🍃 Windi CSS - on-demand CSS utilities
• 🦾 TypeScript - type safe
• 📦 Components auto importing
• 🌟 Icons - Access to icons from any iconset directly
• 🖥 Content Script - Use Vue even in content script
• 🌍 WebExtension - isomorphic extension for Chrome, Firefox, and others
• 📃 Dynamic manifest.json with full type support

• webextension-polyfill - WebExtension browser API Polyfill with types
• webext-bridge - effortlessly communication between contexts

• unplugin-auto-import - Directly use browser and Vue Composition API without importing
• unplugin-vue-components - components auto import
• unplugin-icons - icons as components
  • Iconify - use icons from any icon sets 🔍Icônes
• vite-plugin-windicss - WindiCSS support

• VueUse - collection of useful composition APIs

• Windi CSS - next generation utility-first CSS framework

• Use Composition API with <script setup> SFC syntax
• ESLint with @antfu/eslint-config, single quotes, no semi

• TypeScript
• pnpm - fast, disk space efficient package manager
• esno - TypeScript / ESNext node runtime powered by esbuild
• npm-run-all - Run multiple npm-scripts in parallel or sequential
• web-ext - Streamlined experience for developing web extensions

Create a repo from this template on GitHub.

If you prefer to do it manually with the cleaner git history

If you don't have pnpm installed, run: npm install -g pnpm

npx degit antfu/vitesse-webext my-webext
cd my-webext
pnpm i

• src - main source.
  • contentScript - scripts and components to be injected as content_script
  • background - scripts for background.
  • components - auto-imported Vue components that shared in popup and options page.
  • styles - styles shared in popup and options page
  • manifest.ts - manifest for the extension.
• extension - extension package root.
  • assets - static assets.
  • dist - built files, also serve stub entry for Vite on development.
• scripts - development and bundling helper scripts.

pnpm dev

Then load extension in browser with the extension/ folder.

For Firefox developers, you can run the following command instead:

pnpm start:firefox

web-ext auto reload the extension when extension/ files changed.

While Vite handles HMR automatically in the most of the case, Extensions Reloader is still recommanded for cleaner hard reloading.

To build the extension, run

pnpm build

And then pack files under extension, you can upload extension.crx or extension.xpi to appropriate extension store.

This template is originally made for the volta.net browser extension.

This is a variant of Vitesse, check out the full variations list.