Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/thePrnvBot/dispel-web-stylist/llms.txt

Use this file to discover all available pages before exploring further.

Before you can work on Dispel, you need Bun (the project’s runtime and package manager) and a browser to load the unpacked extension. Once you complete this guide you will have a live-reloading dev build running in your browser, the Biome linter configured, and TypeScript type-checking available — everything required to make and test changes with confidence.

​
Prerequisites

Bun 1.3+

Dispel uses Bun as both its package manager and script runner. Version 1.3 or later is required. Install from bun.sh or run curl -fsSL https://bun.sh/install | bash.

A Supported Browser

You need a Chromium-based browser (Chrome, Edge, Brave, Arc, etc.) or Firefox to load and test the unpacked extension during development.

​
Clone and Install

1

Clone the repository

git clone https://github.com/thePrnvBot/dispel-web-stylist.git
2

Enter the project directory

cd dispel-web-stylist
3

Install dependencies

bun install
The postinstall hook runs wxt prepare automatically after bun install completes. This generates the .wxt/ directory, which contains auto-generated TypeScript types and the extension manifest. If you ever see missing-type errors referencing .wxt/, run bun run postinstall manually to regenerate it.

​
Running the Dev Build

Start the development server with hot reload for whichever browser you are targeting. WXT watches your source files and pushes changes live without requiring a full extension reload for most edits. 
bun run dev
WXT compiles the extension and writes the output to:
  • Chrome → .output/chrome-mv3-dev/
  • Firefox → .output/firefox-mv3-dev/
Both targets use Manifest V3. The dev build includes source maps and HMR support via @wxt-dev/module-react.

​
Loading the Extension in Your Browser

After the dev build starts, load the unpacked extension so you can interact with it in a real browser tab.
  1. Open a new tab and navigate to chrome://extensions.
  2. Enable Developer mode using the toggle in the top-right corner.
  3. Click Load unpacked.
  4. Select the .output/chrome-mv3-dev/ directory inside your cloned repo.
  5. The Dispel icon appears in your toolbar. Click it (or press Ctrl+Shift+Y) to open the side panel.
  1. Open a new tab and navigate to about:debugging.
  2. Click This Firefox in the left sidebar.
  3. Click Load Temporary Add-on….
  4. Navigate to .output/firefox-mv3-dev/ and select the manifest.json file.
  5. The extension is now active. Firefox temporary add-ons are removed when the browser restarts; reload from about:debugging after each restart.

​
Linting and Type Checking

Dispel uses Biome (via the ultracite preset) for linting and formatting, and TypeScript’s tsc for type checking. Run these before committing: 
bun run check    # Biome / ultracite lint + format check
bun run fix      # Auto-fix all fixable lint and format issues
bun run compile  # tsc --noEmit — strict TypeScript type check
Before opening a pull request, make sure both bun run check and bun run compile exit cleanly with no errors or warnings. The project enforces strict TypeScript options (noUnusedLocals, noUnusedParameters, noUncheckedIndexedAccess, and strict: true), so even small type lapses will fail the compile step.

Build docs developers (and LLMs) love

Get started for freeTalk to us