Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/alexperezortuno/ce-blocker/llms.txt

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

Traffic Blocker ships five npm scripts covering the full development and release workflow — from spinning up a live preview of the popup UI, through TypeScript type-checking and production bundling, to creating a submission-ready zip archive for the Chrome Web Store.

Commands Overview

CommandDescription
npm run devStart Vite dev server
npm run buildTypeScript check (vue-tsc) + production build to dist/
npm run previewPreview production build locally
npm run packageBuild + create Chrome Web Store zip
npm run cleanRemove dist/ and build/ directories

Detailed Descriptions

npm run dev

Starts the Vite dev server. Useful for previewing the popup UI in a browser tab during development — hot module replacement (HMR) is active, so component changes reflect instantly without a full reload.
Chrome extension APIs (chrome.*) are not available in the browser dev server — use this only for UI layout work. To test actual blocking behaviour, you must load the extension from dist/ as an unpacked extension in Chrome.

npm run build

Runs the following steps in sequence:
  1. pnpm run clean — clears stale output from previous builds
  2. vue-tsc — performs a full TypeScript type check across all .vue and .ts source files (strict mode, no emit)
  3. vite build — bundles the popup and background service worker into dist/
The dist/ directory is the folder you load as an unpacked extension in Chrome via chrome://extensions → Load unpacked.

npm run preview

Runs Vite’s built-in preview server against the dist/ build output. Useful for quick visual checks of the popup UI before packaging, without needing to reload the unpacked extension in Chrome.

npm run package

Runs pnpm run build then executes node scripts/package.cjs. The packaging script uses JSZip to recursively bundle the entire dist/ directory into a compressed zip archive. The output filename is derived from the version field in package.json:
build/traffic-blocker-0.1.9.zip
Upload this file directly to the Chrome Web Store Developer Dashboard when submitting a new release.

npm run clean

Removes the dist/ and build/ directories using rm -rf. This script runs automatically as the first step of npm run build, so you rarely need to call it directly.
rm -rf dist build
Always run npm run build (not npm run dev) before loading or testing the extension in Chrome. The dev server output is not a valid Chrome extension — it does not produce a dist/manifest.json or the compiled service worker that Chrome requires.

Build docs developers (and LLMs) love