create-vextro 0.0.2 โ†’ 0.0.4

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 (2) hide show
  1. package/README.md +53 -41
  2. package/package.json +41 -41
package/README.md CHANGED
@@ -1,74 +1,86 @@
1
- # ๐Ÿ”Œ Vextro โ€“ Vite-Powered Chrome Extension Starter
1
+ # create-vextro
2
2
 
3
- **Vextro** is a modern boilerplate for building Chrome extensions using:
3
+ > Scaffold a modern Chrome extension powered by Vite + React + Tailwind in seconds.
4
4
 
5
- - ๐Ÿ› ๏ธ [Vite](https://vitejs.dev/)
5
+ **Vextro** is a starter toolkit designed for building fast, modern Chrome extensions using:
6
+
7
+ - โšก [Vite](https://vitejs.dev/)
6
8
  - โš›๏ธ [React + TypeScript](https://reactjs.org/)
7
- - ๐Ÿ’… [Tailwind CSS](https://tailwindcss.com/)
9
+ - ๐ŸŽจ [Tailwind CSS](https://tailwindcss.com/)
8
10
  - ๐Ÿงฉ [Manifest V3](https://developer.chrome.com/docs/extensions/mv3/intro/)
9
- - ๐Ÿงช [CRXJS Plugin for Vite](https://crxjs.dev/)
11
+ - ๐Ÿ”Œ [CRXJS Vite Plugin](https://crxjs.dev/)
10
12
 
11
13
  ---
12
14
 
13
- ## ๐Ÿš€ Quick Start
15
+ ## ๐Ÿš€ Getting Started
16
+
17
+ You can scaffold a new extension using one of the following commands:
18
+
19
+ ### With **npm**
20
+ ```bash
21
+ npm create vextro@latest
22
+ ````
23
+
24
+ ### With **Yarn**
25
+
26
+ ```bash
27
+ yarn create vextro
28
+ ```
29
+
30
+ ### With **pnpm**
31
+
32
+ ```bash
33
+ pnpm create vextro
34
+ ```
35
+
36
+ ### With **Bun**
37
+
38
+ ```bash
39
+ bun create vextro
40
+ ```
41
+
42
+ Then follow the prompt to choose your project name:
14
43
 
15
44
  ```bash
16
- npm create vextro@latest my-extension
17
45
  cd my-extension
18
46
  npm install
19
47
  npm run dev
20
- ````
48
+ ```
21
49
 
22
- Then load `dist/` as an **unpacked extension** in `chrome://extensions`.
50
+ Finally, open Chrome and load your extension from the `dist/` folder via `chrome://extensions`.
23
51
 
24
52
  ---
25
53
 
26
- ## ๐Ÿ“ Folder Structure
54
+ ## ๐Ÿ“ Example Folder Structure
27
55
 
28
56
  ```
29
57
  my-extension/
30
- โ”œโ”€โ”€ public/ # Static files (if needed)
58
+ โ”œโ”€โ”€ public/ # Static assets (optional)
31
59
  โ”œโ”€โ”€ src/
32
- โ”‚ โ”œโ”€โ”€ background/ # Background script logic
60
+ โ”‚ โ”œโ”€โ”€ background/ # Background service worker
33
61
  โ”‚ โ”œโ”€โ”€ content/ # Content scripts
34
- โ”‚ โ”œโ”€โ”€ options/ # Options UI
62
+ โ”‚ โ”œโ”€โ”€ options/ # Options page (React + Tailwind)
35
63
  โ”‚ โ”œโ”€โ”€ popup/ # Popup UI (React + Tailwind)
36
- โ”‚ โ”œโ”€โ”€ styles.css # Tailwind CSS entry
37
- โ”‚ โ”œโ”€โ”€ manifest.ts # Manifest V3 (TS export)
38
- โ”‚ โ””โ”€โ”€ utils/ # Shared logic/utilities
64
+ โ”‚ โ”œโ”€โ”€ manifest.ts # Typed manifest config
65
+ โ”‚ โ”œโ”€โ”€ styles.css # Tailwind CSS entrypoint
66
+ โ”‚ โ””โ”€โ”€ utils/ # Utility scripts
39
67
  โ”œโ”€โ”€ vite.config.ts # Vite + CRX plugin config
40
- โ””โ”€โ”€ tsconfig.json
68
+ โ”œโ”€โ”€ tsconfig.json
69
+ โ””โ”€โ”€ package.json
41
70
  ```
42
71
 
43
72
  ---
44
73
 
45
- ## ๐Ÿ“ฆ Features
46
-
47
- * ๐ŸŒ **Vite dev server** with HMR for `popup` and `options`
48
- * ๐Ÿง  **React + TypeScript** scaffolding
49
- * ๐ŸŽจ **TailwindCSS** preconfigured
50
- * โšก **CRXJS plugin** handles manifest, HMR, and multi-page output
51
-
52
- ---
53
-
54
- ## ๐Ÿ› ๏ธ Development Commands
55
-
56
- | Command | Description |
57
- | --------------- | ---------------------------------- |
58
- | `npm run dev` | Launch Vite in watch mode |
59
- | `npm run build` | Create production build in `dist/` |
60
- | `npm run lint` | Run ESLint (if configured) |
61
-
62
- ---
63
-
64
- ## ๐Ÿ“– Usage Notes
74
+ ## ๐ŸŒŸ Features
65
75
 
66
- * `popup/index.tsx` mounts to `#root` in `popup.html`
67
- * CRX plugin watches `manifest.ts` and builds all declared entries
68
- * You can add additional HTML entry points if needed via `vite.config.ts`
76
+ * โšก Instant startup with Vite
77
+ * ๐Ÿ”ฅ HMR for popup and options
78
+ * ๐Ÿงฉ Multi-entry support with `@crxjs/vite-plugin`
79
+ * ๐Ÿ› ๏ธ Preconfigured React + TypeScript + Tailwind
80
+ * ๐Ÿงฑ Opinionated folder structure
69
81
 
70
82
  ---
71
83
 
72
84
  ## ๐Ÿ“„ License
73
85
 
74
- MIT ยฉ \[Lasantha]
86
+ MIT ยฉ [Lasantha Lakmal](https://github.com/lasalasa)
package/package.json CHANGED
@@ -1,41 +1,41 @@
1
- {
2
- "name": "create-vextro",
3
- "version": "0.0.2",
4
- "description": "Scaffold modern Chrome extensions with Vite + React + Tailwind",
5
- "bin": {
6
- "create-vextro": "bin/cli.js"
7
- },
8
- "type": "module",
9
- "files": [
10
- "bin",
11
- "extension-structure/"
12
- ],
13
- "keywords": [
14
- "vite",
15
- "chrome-extension",
16
- "vite-plugin",
17
- "react",
18
- "tailwind",
19
- "crxjs",
20
- "manifest-v3",
21
- "scaffold"
22
- ],
23
- "repository": {
24
- "type": "git",
25
- "url": "https://github.com/lasalasa/vextro"
26
- },
27
- "author": "Lasantha <lasanthaslakmal@gmail.com>",
28
- "license": "MIT",
29
- "bugs": {
30
- "url": "https://github.com/lasalasa/vextro/issues"
31
- },
32
- "homepage": "https://github.com/lasalasa/vextro#readme",
33
- "dependencies": {
34
- "chalk": "^5.3.0",
35
- "fs-extra": "^11.2.0",
36
- "inquirer": "^9.2.8"
37
- },
38
- "engines": {
39
- "node": ">=16"
40
- }
41
- }
1
+ {
2
+ "name": "create-vextro",
3
+ "version": "0.0.4",
4
+ "description": "Scaffold modern Chrome extensions with Vite + React + Tailwind",
5
+ "bin": {
6
+ "create-vextro": "bin/cli.js"
7
+ },
8
+ "type": "module",
9
+ "files": [
10
+ "bin",
11
+ "extension-structure/"
12
+ ],
13
+ "keywords": [
14
+ "vite",
15
+ "chrome-extension",
16
+ "vite-plugin",
17
+ "react",
18
+ "tailwind",
19
+ "crxjs",
20
+ "manifest-v3",
21
+ "scaffold"
22
+ ],
23
+ "repository": {
24
+ "type": "git",
25
+ "url": "https://github.com/lasalasa/vextro"
26
+ },
27
+ "author": "Lasantha <lasanthaslakmal@gmail.com>",
28
+ "license": "MIT",
29
+ "bugs": {
30
+ "url": "https://github.com/lasalasa/vextro/issues"
31
+ },
32
+ "homepage": "https://github.com/lasalasa/vextro#readme",
33
+ "dependencies": {
34
+ "chalk": "^5.3.0",
35
+ "fs-extra": "^11.2.0",
36
+ "inquirer": "^9.2.8"
37
+ },
38
+ "engines": {
39
+ "node": ">=16"
40
+ }
41
+ }