create-vextro 0.0.4 → 0.1.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Lasantha Lakmal
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Lasantha Lakmal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,86 +1,136 @@
 # create-vextro
 
-> Scaffold a modern Chrome extension powered by Vite + React + Tailwind in seconds.
+[![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)
 
-**Vextro** is a starter toolkit designed for building fast, modern Chrome extensions using:
+> Scaffold modern browser extensions for Chrome, Edge, and Firefox — powered by Vite + React + Tailwind.
+
+**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
-* 🔥 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)

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }