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.

This page walks you through every step needed to go from a fresh clone of the Traffic Blocker repository to a running extension in your browser. You will clone the source, install dependencies, run the production build, and load the resulting dist/ folder as an unpacked Chrome extension — no Chrome Web Store account required.

​
Prerequisites

Make sure the following are available on your machine before you begin:
  • Node.js 18+ — tested with 18.x, 20.x, and 22.x
  • npm 8+ — used to install dependencies. Note that the build and package scripts internally call pnpm, so pnpm must also be available globally (npm install -g pnpm) if you run those scripts via npm.
  • A Chromium-based browser — Chrome, Microsoft Edge, or Brave all support unpacked MV3 extensions

​
Build Steps

1

Clone the repository

Clone the project from GitHub and move into the new directory:
git clone https://github.com/alexperezortuno/ce-blocker.git && cd ce-blocker
2

Install dependencies

Install all Node dependencies:
pnpm install
This pulls in Vue 3, Vite, TypeScript, the vite-plugin-web-extension plugin, and all other runtime and dev dependencies listed in package.json.
3

Build the extension

Compile the extension for production. The build scripts internally call pnpm, so pnpm is required to run the build:
pnpm run build
The build script first removes any previous dist/ and build/ output (pnpm run clean), then runs vue-tsc for a full TypeScript type-check, and finally invokes vite build. On success, a dist/ folder is created at the repository root containing:
  • index.html — the popup entry point
  • assets/background.js — the compiled service worker
  • manifest.json — the MV3 manifest (merged from public/manifest.json and package.json by Vite)
  • All bundled JS, CSS, and static assets
4

Load in Chrome

Load the compiled extension as an unpacked extension:
  1. Open chrome://extensions in your browser’s address bar.
  2. Enable the Developer mode toggle in the top-right corner.
  3. Click Load unpacked.
  4. Select the dist/ folder inside the cloned repository.
Traffic Blocker now appears in your extensions list and its icon is available in the Chrome toolbar.

​
After Loading

After loading the extension, Chrome assigns it a unique Extension ID (displayed on the chrome://extensions card). You can use this ID as the extensionId argument in chrome.runtime.sendMessage calls from other extensions or from a content script if you need to integrate Traffic Blocker programmatically into a larger automation workflow.

​
Updating

When upstream changes are available, pull the latest code and rebuild: 
git pull
pnpm run build
Then open chrome://extensions, find the Traffic Blocker card, and click the refresh (↺) button to reload the extension from the updated dist/ folder. No need to remove and re-add it — your saved rules and settings are preserved in chrome.storage.local.

Build docs developers (and LLMs) love

Get started for freeTalk to us