EveryPost Chrome Extension

Built with Vue 3, Vite, TypeScript, and Tailwind CSS. Targets Chrome Manifest V3.

Project Layout

./dist               - compiled extension output (load this in Chrome)
./src                - all source files
./src/chrome         - Chrome extension scripts (background, content scripts)
./src/entry          - Vue entry points (HTML + TS pairs)
./src/view           - Vue components
./src/assets         - static assets used by components
./manifest.json      - Chrome extension manifest (single source of truth)
./tests              - unit tests

Prerequisites

• Node.js 18+
• npm 9+

Setup

npm install

Development

Watch mode (recommended for Chrome extension development)

Builds the extension and rebuilds automatically on file changes:

npm run dev

Then load ./dist as an unpacked extension in Chrome (see Loading in Chrome). Chrome will pick up most changes automatically when files rebuild — for background script changes you may need to click the reload icon on chrome://extensions.

Loading in Chrome

1. Go to chrome://extensions
2. Enable Developer mode (top right toggle)
3. Click Load unpacked and select the ./dist folder
4. The extension icon appears in the toolbar

Build for Production

npm run build

Output is written to ./dist. The manifest's host_permissions will not include http://localhost:3000/* (that is injected only in development mode).

Testing

Run unit tests (watch mode)

npm test

Run unit tests once (CI)

npm run test:unit

Tests use Vitest with jsdom and are configured inline in vite.config.ts.

Linting

npm run lint

Uses ESLint v9 with flat config (eslint.config.mjs). Automatically fixes fixable issues.

Toolchain

Tool	Purpose
Vite	Build tool
vite-plugin-web-extension	Chrome extension build support
Vue 3	UI framework
Vitest	Unit testing
ESLint v9	Linting (flat config)
Tailwind CSS	Styling
TypeScript	Type safety