lasalasa · Mar 27, 2026 · Mar 27, 2026 · Mar 27, 2026 · Mar 27, 2026 · Mar 27, 2026
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,18 @@
+## Description
+
+<!-- What does this PR do? -->
+
+## Type of Change
+
+- [ ] Bug fix
+- [ ] New feature
+- [ ] Breaking change
+- [ ] Documentation update
+
+## Checklist
+
+- [ ] Code follows existing style conventions
+- [ ] Tests added/updated
+- [ ] `npm run lint` passes
+- [ ] `npm run build` passes
+- [ ] `npm test` passes
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,41 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20, 22]
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Typecheck
+        run: npm run typecheck
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Format check
+        run: npm run format:check
+
+      - name: Build
+        run: npm run build
+
+      - name: Test
+        run: npm test
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,25 @@
+name: Publish Package
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+permissions:
+  id-token: write # Required for OIDC
+  contents: read
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm test
+      - run: npm publish
diff --git a/.npmignore b/.npmignore
@@ -1,30 +1,39 @@
 # Exclude local dev and build files
 node_modules/
-dist/
 .vscode/
 .env
 *.log
 *.tsbuildinfo
 .DS_Store
 
-# Exclude test files (if any)
-__tests__/
+# Exclude test files
+tests/
 coverage/
 *.test.ts
 *.spec.ts
+vitest.config.ts
+
+# Exclude source (compiled to dist/)
+src/
+
+# Exclude config files
+tsconfig.json
+tsup.config.ts
+eslint.config.js
+.prettierrc
+.prettierignore
+
+# Exclude CI/CD and docs
+.github/
+.changeset/
+docs/
 
 # Exclude backup and editor-specific files
 *.swp
 *.swo
 .idea/
 *.bak
 
-# Exclude CLI source if compiled version is used
-src/
-tsconfig.json
-vite.config.ts
-README-draft.md
-
 # Include only the compiled CLI and templates
-!cli.js
-!extension-structure/
+!dist/
+!src/templates/
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,4 @@
+dist
+node_modules
+coverage
+extension-structure
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,44 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/), and this project adheres to [Semantic Versioning](https://semver.org/).
+
+## [0.1.0] - 2026-03-27
+
+### Added
+
+- TypeScript source with tsup build pipeline
+- Commander CLI with `--help`, `--version`, and `--verbose` flags
+- Project name validation (npm-name compliant)
+- `--force` flag to overwrite existing directories
+- Graceful Ctrl+C handling with cleanup
+- `ora` loading spinners for all long-running operations
+- Error handling with user-friendly messages
+- Generic Chrome extension starter templates:
+  - Popup with `chrome.storage` counter demo
+  - Options page with settings save/load
+  - Background service worker with `onInstalled` and `onMessage`
+  - Content script with background messaging example
+  - Typed `chrome.storage.sync` utility wrapper
+- ESLint + Prettier configuration
+- Vitest unit tests
+- GitHub Actions CI/CD (build + test + publish)
+- Changesets for version management
+- Contributing guide
+
+### Changed
+
+- Migrated from raw JavaScript (`bin/cli.js`) to modular TypeScript (`src/`)
+- CLI binary now points to compiled `dist/index.js`
+- Minimum Node.js version bumped from 16 to 20
+- Version bumped from 0.0.4 to 0.1.0
+
+### Fixed
+
+- Branding: replaced all "Extensify" references with "Vextro"
+
+### Removed
+
+- `bin/cli.js` (replaced by `src/` + `dist/`)
+- `apiClient.ts` placeholder (replaced by `storage.ts`)
diff --git a/README.md b/README.md
@@ -1,92 +1,136 @@
 # create-vextro
 
+[![CI](https://github.com/lasalasa/vextro/actions/workflows/ci.yml/badge.svg)](https://github.com/lasalasa/vextro/actions/workflows/ci.yml)
 [![npm version](https://img.shields.io/npm/v/create-vextro?color=blue&style=flat-square)](https://www.npmjs.com/package/create-vextro)
 [![npm downloads](https://img.shields.io/npm/dt/create-vextro?style=flat-square)](https://www.npmjs.com/package/create-vextro)
 [![License: MIT](https://img.shields.io/badge/license-MIT-green.svg?style=flat-square)](https://github.com/lasalasa/vextro/blob/main/LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/lasalasa/vextro?style=flat-square)](https://github.com/lasalasa/vextro/stargazers)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen?style=flat-square)](https://github.com/lasalasa/vextro/pulls)
 
-> Scaffold a modern Chrome extension powered by Vite + React + Tailwind in seconds.
+> Scaffold modern browser extensions for Chrome, Edge, and Firefox — powered by Vite + React + Tailwind.
 
-**Vextro** is a starter toolkit designed for building fast, modern Chrome extensions using:
+**Vextro** is a CLI tool for building fast, modern browser extensions using:
 
 - ⚡ [Vite](https://vitejs.dev/)
 - ⚛️ [React + TypeScript](https://reactjs.org/)
 - 🎨 [Tailwind CSS](https://tailwindcss.com/)
 - 🧩 [Manifest V3](https://developer.chrome.com/docs/extensions/mv3/intro/)
-- 🔌 [CRXJS Vite Plugin](https://crxjs.dev/)
+- 🔌 [CRXJS](https://crxjs.dev/) (Chrome/Edge) or [vite-plugin-web-extension](https://github.com/nicedoc/vite-plugin-web-extension) (Firefox)
 
 ---
 
-## 🚀 Getting Started
+## 🌐 Browser Support
 
-You can scaffold a new extension using one of the following commands:
+| Browser     | Status             | Flag        | Notes                                                             |
+| ----------- | ------------------ | ----------- | ----------------------------------------------------------------- |
+| **Chrome**  | ✅ Fully supported | `--chrome`  | Uses CRXJS Vite Plugin                                            |
+| **Edge**    | ✅ Fully supported | `--chrome`  | Chromium-based — same as Chrome, load from `edge://extensions`    |
+| **Firefox** | ✅ Fully supported | `--firefox` | Uses vite-plugin-web-extension + `chrome.*` namespace             |
+| **Safari**  | 📄 Documented      | —           | Convert Chrome output with `xcrun safari-web-extension-converter` |
 
-### With **npm**
-```bash
-npm create vextro@latest
-````
+---
 
-### With **Yarn**
+## 🚀 Quick Start
 
 ```bash
-yarn create vextro
-```
+# Interactive (prompts for browser)
+npx create-vextro create my-extension
 
-### With **pnpm**
+# Chrome / Edge (skip prompt)
+npx create-vextro create my-extension --chrome
 
-```bash
-pnpm create vextro
+# Firefox (skip prompt)
+npx create-vextro create my-extension --firefox
 ```
 
-### With **Bun**
+Then:
 
 ```bash
-bun create vextro
+cd my-extension
+npm run dev
 ```
 
-Then follow the prompt to choose your project name:
+### Loading your extension
+
+**Chrome / Edge:**
+
+1. Open `chrome://extensions` (or `edge://extensions`)
+2. Enable **Developer mode**
+3. Click **"Load unpacked"** → select the `dist/` folder
+
+**Firefox:**
+
+1. Open `about:debugging#/runtime/this-firefox`
+2. Click **"Load Temporary Add-on"**
+3. Select any file in the `dist/` folder
+
+**Safari (macOS only):**
+
+1. Build a Chrome extension first using `--chrome`
+2. Run `xcrun safari-web-extension-converter dist/` to create an Xcode project
+3. Build and run from Xcode
+
+---
+
+## 📋 Commands
 
 ```bash
-cd my-extension
-npm install
-npm run dev
+create-vextro create <name>              # Interactive (prompts for browser)
+create-vextro create <name> --chrome     # Chrome / Edge
+create-vextro create <name> --firefox    # Firefox
+create-vextro create <name> --force      # Overwrite existing directory
+create-vextro --version                  # Show version
+create-vextro --help                     # Show help
+create-vextro --verbose                  # Enable verbose output
 ```
 
-Finally, open Chrome and load your extension from the `dist/` folder via `chrome://extensions`.
+---
+
+## ✨ What You Get
+
+Every generated project includes:
+
+| Feature            | Description                                            |
+| ------------------ | ------------------------------------------------------ |
+| **Popup**          | React popup with `chrome.storage` demo                 |
+| **Options page**   | Settings page with save/load via storage sync          |
+| **Background**     | Service worker with `onInstalled` and message listener |
+| **Content script** | Injected script with background messaging example      |
+| **Storage utils**  | Typed wrapper around browser storage API               |
+| **Hot Reload**     | Vite HMR for popup and options pages                   |
+| **TypeScript**     | Full type safety                                       |
+| **Tailwind CSS**   | Utility-first styling pre-configured                   |
 
 ---
 
-## 📁 Example Folder Structure
+## 📁 Generated Project Structure
 
 ```
 my-extension/
-├── public/                 # Static assets (optional)
+├── public/
+│   ├── icon.png
+│   └── icons/              # Extension icons (16, 48, 128)
 ├── src/
-│   ├── background/         # Background service worker
+│   ├── background/         # Background service worker / script
 │   ├── content/            # Content scripts
 │   ├── options/            # Options page (React + Tailwind)
 │   ├── popup/              # Popup UI (React + Tailwind)
-│   ├── manifest.ts         # Typed manifest config
-│   ├── styles.css          # Tailwind CSS entrypoint
-│   └── utils/              # Utility scripts
-├── vite.config.ts          # Vite + CRX plugin config
+│   ├── utils/              # Storage utilities
+│   ├── manifest.ts/.json   # Manifest config (format depends on browser)
+│   └── styles.css          # Tailwind CSS entrypoint
+├── vite.config.ts          # Vite + browser plugin config
 ├── tsconfig.json
 └── package.json
 ```
 
 ---
 
-## 🌟 Features
+## 🤝 Contributing
 
-* ⚡ Instant startup with Vite
-* 🔥 Hot Module Reload (HMR) for popup and options
-* 🧩 Multi-entry support with `@crxjs/vite-plugin`
-* 🛠️ Preconfigured React + TypeScript + Tailwind
-* 🧱 Opinionated folder structure
+See [docs/CONTRIBUTING.md](docs/CONTRIBUTING.md) for development setup and contribution guidelines.
 
 ---
 
 ## 📄 License
 
-MIT © [Lasantha Lakmal](https://github.com/lasalasa)
+MIT © [Lasantha Lakmal](https://github.com/lasalasa)