create-vextro 0.0.2 โ†’ 0.0.3

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 +34 -42
  2. package/package.json +41 -41
package/README.md CHANGED
@@ -1,74 +1,66 @@
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 project using the command:
18
+
19
+ ```bash
20
+ npm create vextro@latest
21
+ ````
22
+
23
+ Then follow the prompts to set your project name.
14
24
 
15
25
  ```bash
16
- npm create vextro@latest my-extension
17
26
  cd my-extension
18
27
  npm install
19
28
  npm run dev
20
- ````
29
+ ```
21
30
 
22
- Then load `dist/` as an **unpacked extension** in `chrome://extensions`.
31
+ Finally, open Chrome and load your extension from the `dist/` folder via `chrome://extensions`.
23
32
 
24
33
  ---
25
34
 
26
- ## ๐Ÿ“ Folder Structure
35
+ ## Example Folder Structure
27
36
 
28
37
  ```
29
38
  my-extension/
30
- โ”œโ”€โ”€ public/ # Static files (if needed)
39
+ โ”œโ”€โ”€ public/ # Static assets (optional)
31
40
  โ”œโ”€โ”€ src/
32
- โ”‚ โ”œโ”€โ”€ background/ # Background script logic
41
+ โ”‚ โ”œโ”€โ”€ background/ # Background service worker
33
42
  โ”‚ โ”œโ”€โ”€ content/ # Content scripts
34
- โ”‚ โ”œโ”€โ”€ options/ # Options UI
43
+ โ”‚ โ”œโ”€โ”€ options/ # Options page (React + Tailwind)
35
44
  โ”‚ โ”œโ”€โ”€ popup/ # Popup UI (React + Tailwind)
36
- โ”‚ โ”œโ”€โ”€ styles.css # Tailwind CSS entry
37
- โ”‚ โ”œโ”€โ”€ manifest.ts # Manifest V3 (TS export)
38
- โ”‚ โ””โ”€โ”€ utils/ # Shared logic/utilities
45
+ โ”‚ โ”œโ”€โ”€ manifest.ts # Typed manifest config
46
+ โ”‚ โ”œโ”€โ”€ styles.css # Tailwind CSS entrypoint
47
+ โ”‚ โ””โ”€โ”€ utils/ # Utility scripts
39
48
  โ”œโ”€โ”€ vite.config.ts # Vite + CRX plugin config
40
- โ””โ”€โ”€ tsconfig.json
49
+ โ”œโ”€โ”€ tsconfig.json
50
+ โ””โ”€โ”€ package.json
41
51
  ```
42
52
 
43
53
  ---
44
54
 
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
55
+ ## Features
65
56
 
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`
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
69
61
 
70
62
  ---
71
63
 
72
- ## ๐Ÿ“„ License
64
+ ## License
73
65
 
74
- MIT ยฉ \[Lasantha]
66
+ 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.3",
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
+ }