Traffic Blocker uses a Vite build pipeline configured for Chrome extension output. Two entry points are compiled in a single pass — the Vue 3 popup SPA and the background service worker — with TypeScript validation run byDocumentation 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.
vue-tsc before the production bundle is generated. A small Node.js packaging script then zips the dist/ folder into an archive ready for the Chrome Web Store developer dashboard.
Build Entry Points
vite.config.ts defines two Rollup input entries under build.rollupOptions.input:
index.html — the Vue 3 popup SPA. Vite processes the HTML file, bundles all imported scripts (including main.ts and its Vue component tree), and writes the result to dist/index.html + dist/assets/popup.js.src/background/background.ts — the MV3 background service worker. Compiled to a plain ES module and written to dist/assets/background.js, matching the path declared in manifest.json under background.service_worker.assets/[name].js via the output.entryFileNames option, ensuring the background script lands at the exact path the manifest expects.
The resolve.alias configuration maps ~bootstrap to the node_modules/bootstrap directory, allowing SCSS imports to reference Bootstrap source files directly.
Build Output
Afternpm run build completes, the dist/ folder contains everything Chrome needs to load the extension:
| File | Description |
|---|---|
index.html | Popup HTML shell with a <div id="app"> mount point |
assets/popup.js | Full Vue 3 app bundle (components, router, third-party deps) |
assets/background.js | Compiled background service worker |
manifest.json | Extension manifest — copied verbatim from public/manifest.json by Vite’s static asset pipeline |
blocker.png | Extension toolbar icon copied from public/ |
TypeScript Configuration
The project uses TypeScript in strict mode. The path alias@/* maps to src/*, allowing imports like import type { Rule } from '@/types' from anywhere in the source tree without relative path traversal.
TypeScript checking is performed by vue-tsc (the Vue-aware TypeScript compiler) as a separate step before vite build. If type errors are present the build exits early.
npm Scripts
| Command | Description |
|---|---|
npm run dev | Start Vite dev server |
npm run build | Clean output dirs, TypeScript check (vue-tsc), then production build to dist/ |
npm run preview | Preview production build locally |
npm run package | Build + create zip for Chrome Web Store (build/traffic-blocker-{version}.zip) |
npm run clean | Remove dist/ and build/ folders |
The
build script in package.json calls pnpm run clean before vue-tsc && vite build, so running npm run build directly already cleans the output directory first.Creating a Chrome Web Store Package
npm run package first runs the full build, then executes scripts/package.cjs. The script:
Reads the version from package.json
The version string (e.g.
0.1.9) is used to name the output archive traffic-blocker-0.1.9.zip.Creates the build/ directory if absent
The output directory is created with
fs.mkdirSync(outputDir, { recursive: true }) so the script is safe to run on a clean checkout.Recursively adds dist/ to a JSZip archive
addDirToZip() walks the dist/ directory tree and adds every file to the zip at its relative path, preserving the folder structure Chrome expects when loading an unpacked extension.