create-vextro 0.0.3 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +94 -24
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.js +514 -0
  5. package/dist/index.js.map +1 -0
  6. package/package.json +71 -41
  7. package/src/templates/chrome/src/background/background.ts +30 -0
  8. package/src/templates/chrome/src/content/content.ts +13 -0
  9. package/src/templates/chrome/src/manifest.ts +28 -0
  10. package/{extension-structure → src/templates/chrome}/vite.config.ts +27 -28
  11. package/src/templates/firefox/src/background/background.ts +29 -0
  12. package/src/templates/firefox/src/content/content.ts +13 -0
  13. package/src/templates/firefox/src/manifest.json +35 -0
  14. package/src/templates/firefox/vite.config.ts +22 -0
  15. package/src/templates/shared/src/options/App.tsx +70 -0
  16. package/{extension-structure → src/templates/shared}/src/options/index.tsx +9 -9
  17. package/src/templates/shared/src/options/options.html +12 -0
  18. package/src/templates/shared/src/popup/App.tsx +61 -0
  19. package/{extension-structure → src/templates/shared}/src/popup/index.tsx +9 -9
  20. package/src/templates/shared/src/popup/popup.html +12 -0
  21. package/src/templates/shared/src/styles.css +1 -0
  22. package/src/templates/shared/src/utils/storage.ts +34 -0
  23. package/bin/cli.js +0 -124
  24. package/extension-structure/src/background/background.ts +0 -2
  25. package/extension-structure/src/content/content.ts +0 -2
  26. package/extension-structure/src/manifest.ts +0 -28
  27. package/extension-structure/src/options/App.tsx +0 -49
  28. package/extension-structure/src/options/options.html +0 -12
  29. package/extension-structure/src/popup/App.tsx +0 -72
  30. package/extension-structure/src/popup/popup.html +0 -12
  31. package/extension-structure/src/styles.css +0 -1
  32. package/extension-structure/src/utils/apiClient.ts +0 -5
  33. /package/{extension-structure → src/templates/shared}/public/icon.png +0 -0
  34. /package/{extension-structure → src/templates/shared}/public/icons/icon128.png +0 -0
  35. /package/{extension-structure → src/templates/shared}/public/icons/icon16.png +0 -0
  36. /package/{extension-structure → src/templates/shared}/public/icons/icon48.png +0 -0
package/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2025 Lasantha Lakmal
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Lasantha Lakmal
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,66 +1,136 @@
1
1
  # create-vextro
2
2
 
3
- > Scaffold a modern Chrome extension powered by Vite + React + Tailwind in seconds.
3
+ [![CI](https://github.com/lasalasa/vextro/actions/workflows/ci.yml/badge.svg)](https://github.com/lasalasa/vextro/actions/workflows/ci.yml)
4
+ [![npm version](https://img.shields.io/npm/v/create-vextro?color=blue&style=flat-square)](https://www.npmjs.com/package/create-vextro)
5
+ [![npm downloads](https://img.shields.io/npm/dt/create-vextro?style=flat-square)](https://www.npmjs.com/package/create-vextro)
6
+ [![License: MIT](https://img.shields.io/badge/license-MIT-green.svg?style=flat-square)](https://github.com/lasalasa/vextro/blob/main/LICENSE)
7
+ [![GitHub stars](https://img.shields.io/github/stars/lasalasa/vextro?style=flat-square)](https://github.com/lasalasa/vextro/stargazers)
8
+ [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen?style=flat-square)](https://github.com/lasalasa/vextro/pulls)
4
9
 
5
- **Vextro** is a starter toolkit designed for building fast, modern Chrome extensions using:
10
+ > Scaffold modern browser extensions for Chrome, Edge, and Firefox powered by Vite + React + Tailwind.
11
+
12
+ **Vextro** is a CLI tool for building fast, modern browser extensions using:
6
13
 
7
14
  - ⚡ [Vite](https://vitejs.dev/)
8
15
  - ⚛️ [React + TypeScript](https://reactjs.org/)
9
16
  - 🎨 [Tailwind CSS](https://tailwindcss.com/)
10
17
  - 🧩 [Manifest V3](https://developer.chrome.com/docs/extensions/mv3/intro/)
11
- - 🔌 [CRXJS Vite Plugin](https://crxjs.dev/)
18
+ - 🔌 [CRXJS](https://crxjs.dev/) (Chrome/Edge) or [vite-plugin-web-extension](https://github.com/nicedoc/vite-plugin-web-extension) (Firefox)
12
19
 
13
20
  ---
14
21
 
15
- ## Getting Started
22
+ ## 🌐 Browser Support
23
+
24
+ | Browser | Status | Flag | Notes |
25
+ | ----------- | ------------------ | ----------- | ----------------------------------------------------------------- |
26
+ | **Chrome** | ✅ Fully supported | `--chrome` | Uses CRXJS Vite Plugin |
27
+ | **Edge** | ✅ Fully supported | `--chrome` | Chromium-based — same as Chrome, load from `edge://extensions` |
28
+ | **Firefox** | ✅ Fully supported | `--firefox` | Uses vite-plugin-web-extension + `chrome.*` namespace |
29
+ | **Safari** | 📄 Documented | — | Convert Chrome output with `xcrun safari-web-extension-converter` |
30
+
31
+ ---
16
32
 
17
- You can scaffold a new project using the command:
33
+ ## 🚀 Quick Start
18
34
 
19
35
  ```bash
20
- npm create vextro@latest
21
- ````
36
+ # Interactive (prompts for browser)
37
+ npx create-vextro create my-extension
38
+
39
+ # Chrome / Edge (skip prompt)
40
+ npx create-vextro create my-extension --chrome
41
+
42
+ # Firefox (skip prompt)
43
+ npx create-vextro create my-extension --firefox
44
+ ```
22
45
 
23
- Then follow the prompts to set your project name.
46
+ Then:
24
47
 
25
48
  ```bash
26
49
  cd my-extension
27
- npm install
28
50
  npm run dev
29
51
  ```
30
52
 
31
- Finally, open Chrome and load your extension from the `dist/` folder via `chrome://extensions`.
53
+ ### Loading your extension
54
+
55
+ **Chrome / Edge:**
56
+
57
+ 1. Open `chrome://extensions` (or `edge://extensions`)
58
+ 2. Enable **Developer mode**
59
+ 3. Click **"Load unpacked"** → select the `dist/` folder
60
+
61
+ **Firefox:**
62
+
63
+ 1. Open `about:debugging#/runtime/this-firefox`
64
+ 2. Click **"Load Temporary Add-on"**
65
+ 3. Select any file in the `dist/` folder
66
+
67
+ **Safari (macOS only):**
68
+
69
+ 1. Build a Chrome extension first using `--chrome`
70
+ 2. Run `xcrun safari-web-extension-converter dist/` to create an Xcode project
71
+ 3. Build and run from Xcode
72
+
73
+ ---
74
+
75
+ ## 📋 Commands
76
+
77
+ ```bash
78
+ create-vextro create <name> # Interactive (prompts for browser)
79
+ create-vextro create <name> --chrome # Chrome / Edge
80
+ create-vextro create <name> --firefox # Firefox
81
+ create-vextro create <name> --force # Overwrite existing directory
82
+ create-vextro --version # Show version
83
+ create-vextro --help # Show help
84
+ create-vextro --verbose # Enable verbose output
85
+ ```
86
+
87
+ ---
88
+
89
+ ## ✨ What You Get
90
+
91
+ Every generated project includes:
92
+
93
+ | Feature | Description |
94
+ | ------------------ | ------------------------------------------------------ |
95
+ | **Popup** | React popup with `chrome.storage` demo |
96
+ | **Options page** | Settings page with save/load via storage sync |
97
+ | **Background** | Service worker with `onInstalled` and message listener |
98
+ | **Content script** | Injected script with background messaging example |
99
+ | **Storage utils** | Typed wrapper around browser storage API |
100
+ | **Hot Reload** | Vite HMR for popup and options pages |
101
+ | **TypeScript** | Full type safety |
102
+ | **Tailwind CSS** | Utility-first styling pre-configured |
32
103
 
33
104
  ---
34
105
 
35
- ## Example Folder Structure
106
+ ## 📁 Generated Project Structure
36
107
 
37
108
  ```
38
109
  my-extension/
39
- ├── public/ # Static assets (optional)
110
+ ├── public/
111
+ │ ├── icon.png
112
+ │ └── icons/ # Extension icons (16, 48, 128)
40
113
  ├── src/
41
- │ ├── background/ # Background service worker
114
+ │ ├── background/ # Background service worker / script
42
115
  │ ├── content/ # Content scripts
43
116
  │ ├── options/ # Options page (React + Tailwind)
44
117
  │ ├── popup/ # Popup UI (React + Tailwind)
45
- │ ├── manifest.ts # Typed manifest config
46
- │ ├── styles.css # Tailwind CSS entrypoint
47
- │ └── utils/ # Utility scripts
48
- ├── vite.config.ts # Vite + CRX plugin config
118
+ │ ├── utils/ # Storage utilities
119
+ │ ├── manifest.ts/.json # Manifest config (format depends on browser)
120
+ │ └── styles.css # Tailwind CSS entrypoint
121
+ ├── vite.config.ts # Vite + browser plugin config
49
122
  ├── tsconfig.json
50
123
  └── package.json
51
124
  ```
52
125
 
53
126
  ---
54
127
 
55
- ## Features
128
+ ## 🤝 Contributing
56
129
 
57
- * Instant startup with Vite
58
- * 🔥 Hot Module Reload (HMR) for popup and options pages
59
- * 🧩 Multi-entry manifest build handled by `@crxjs/vite-plugin`
60
- * 🛠️ React + TypeScript + Tailwind preconfigured
130
+ See [docs/CONTRIBUTING.md](docs/CONTRIBUTING.md) for development setup and contribution guidelines.
61
131
 
62
132
  ---
63
133
 
64
- ## License
134
+ ## 📄 License
65
135
 
66
- MIT © [Lasantha Lakmal](https://github.com/lasalasa)
136
+ MIT © [Lasantha Lakmal](https://github.com/lasalasa)
@@ -0,0 +1,2 @@
1
+
2
+ export { }