create-vextro 0.0.2

package/LICENSE

@@ -0,0 +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.

package/README.md

@@ -0,0 +1,74 @@
+# 🔌 Vextro – Vite-Powered Chrome Extension Starter
+
+**Vextro** is a modern boilerplate for building Chrome 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 Plugin for Vite](https://crxjs.dev/)
+
+---
+
+## 🚀 Quick Start
+
+```bash
+npm create vextro@latest my-extension
+cd my-extension
+npm install
+npm run dev
+````
+
+Then load `dist/` as an **unpacked extension** in `chrome://extensions`.
+
+---
+
+## 📁 Folder Structure
+
+```
+my-extension/
+├── public/                 # Static files (if needed)
+├── src/
+│   ├── background/         # Background script logic
+│   ├── content/            # Content scripts
+│   ├── options/            # Options UI
+│   ├── popup/              # Popup UI (React + Tailwind)
+│   ├── styles.css          # Tailwind CSS entry
+│   ├── manifest.ts         # Manifest V3 (TS export)
+│   └── utils/              # Shared logic/utilities
+├── vite.config.ts          # Vite + CRX plugin config
+└── tsconfig.json
+```
+
+---
+
+## 📦 Features
+
+* 🌐 **Vite dev server** with HMR for `popup` and `options`
+* 🧠 **React + TypeScript** scaffolding
+* 🎨 **TailwindCSS** preconfigured
+* ⚡ **CRXJS plugin** handles manifest, HMR, and multi-page output
+
+---
+
+## 🛠️ Development Commands
+
+| Command         | Description                        |
+| --------------- | ---------------------------------- |
+| `npm run dev`   | Launch Vite in watch mode          |
+| `npm run build` | Create production build in `dist/` |
+| `npm run lint`  | Run ESLint (if configured)         |
+
+---
+
+## 📖 Usage Notes
+
+* `popup/index.tsx` mounts to `#root` in `popup.html`
+* CRX plugin watches `manifest.ts` and builds all declared entries
+* You can add additional HTML entry points if needed via `vite.config.ts`
+
+---
+
+## 📄 License
+
+MIT © \[Lasantha]

package/bin/cli.js

@@ -0,0 +1,124 @@
+#!/usr/bin/env node
+
+import { execSync } from "child_process";
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+import inquirer from "inquirer";
+import chalk from "chalk";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const templateDir = path.resolve(__dirname, "../extension-structure");
+
+const run = async () => {
+  console.log(chalk.cyanBright("\n🚀 Create Extensify Chrome Extension"));
+
+  // Prompt for project name
+  const { projectName } = await inquirer.prompt([
+    {
+      name: "projectName",
+      message: "Enter your extension project name:",
+      default: "my-extension",
+    },
+  ]);
+
+  const projectDir = path.resolve(process.cwd(), projectName);
+
+  if (fs.existsSync(projectDir)) {
+    console.log(chalk.red(`❌ Folder "${projectName}" already exists.`));
+    process.exit(1);
+  }
+
+  // 1. Scaffold base Vite + React + TS project
+  console.log(chalk.yellow("⚙️  Creating base Vite + React + TS project..."));
+  execSync(`npm create vite@latest ${projectName} -- --template react-ts`, {
+    stdio: "inherit",
+  });
+
+  // 2. Install dependencies
+  process.chdir(projectDir);
+  console.log(chalk.yellow("📦 Installing dependencies..."));
+  execSync("npm install", { stdio: "inherit" });
+
+  // 2.5 Remove default Vite template files
+  console.log(chalk.yellow("🧹 Removing default Vite template files..."));
+
+  const filesToRemove = [
+    "src/App.tsx",
+    "src/main.tsx",
+    "src/index.css",
+    "src/App.css",
+    "src/assets",
+    'index.html'
+  ];
+
+  for (const file of filesToRemove) {
+    const fullPath = path.join(projectDir, file);
+    if (await fs.pathExists(fullPath)) {
+      await fs.remove(fullPath);
+    }
+  }
+
+  // 2.6 Clean up default public folder
+  console.log(chalk.yellow('🧹 Cleaning default public folder...'));
+
+  const publicPath = path.join(projectDir, 'public');
+  if (await fs.pathExists(publicPath)) {
+    await fs.emptyDir(publicPath);
+  }
+
+  // 3. Copy src and public folders
+  console.log(chalk.yellow("📁 Copying extension structure into project..."));
+
+  await fs.copy(path.join(templateDir, "src"), path.join(projectDir, "src"));
+  await fs.copy(
+    path.join(templateDir, "public"),
+    path.join(projectDir, "public")
+  );
+
+  // 4. Copy root files (vite.config.ts, tsconfig.json, package.json)
+  console.log(chalk.yellow("📝 Overriding config files..."));
+
+  const rootFiles = ["vite.config.ts"];
+  for (const file of rootFiles) {
+    const from = path.join(templateDir, file);
+    const to = path.join(projectDir, file);
+    if (await fs.pathExists(from)) {
+      await fs.copy(from, to, { overwrite: true });
+    }
+  }
+
+  // 5. Replace project name in manifest.ts and package.json
+  await injectProjectName(projectDir, projectName);
+
+  // 6. Install additional dev dependencies
+  console.log(chalk.yellow("📦 Installing dev dependencies..."));
+  execSync(
+    "npm install --save-dev @types/chrome @types/node @crxjs/vite-plugin tailwindcss @tailwindcss/vite",
+    { stdio: "inherit" }
+  );
+
+  // ✅ Done
+  console.log(chalk.green("\n✅ Vextro project created successfully!"));
+  console.log(chalk.cyan(`\n👉 cd ${projectName} && npm run dev\n`));
+};
+
+const injectProjectName = async (targetDir, projectName) => {
+  const manifestPath = path.join(targetDir, "src", "manifest.ts");
+  const pkgPath = path.join(targetDir, "package.json");
+
+  if (await fs.pathExists(manifestPath)) {
+    let manifest = await fs.readFile(manifestPath, "utf-8");
+    manifest = manifest.replace(/__EXT_NAME__/g, projectName);
+    await fs.writeFile(manifestPath, manifest, "utf-8");
+  }
+
+  if (await fs.pathExists(pkgPath)) {
+    let pkg = await fs.readFile(pkgPath, "utf-8");
+    pkg = pkg.replace(/"__EXT_NAME__"/g, `"${projectName}"`);
+    await fs.writeFile(pkgPath, pkg, "utf-8");
+  }
+};
+
+run();

package/extension-structure/src/background/background.ts

@@ -0,0 +1,2 @@
+// background script
+console.log('Background script loaded.');

package/extension-structure/src/content/content.ts

@@ -0,0 +1,2 @@
+// content script
+console.log('Content script injected.');

package/extension-structure/src/manifest.ts

@@ -0,0 +1,28 @@
+import { defineManifest } from '@crxjs/vite-plugin';
+
+export default defineManifest({
+  manifest_version: 3,
+  name: "__EXT_NAME__",
+  description: "A modern Chrome extension powered by Extensify.",
+  version: "1.0.0",
+  icons: {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  permissions: ["storage", "tabs", "scripting"],
+  action: {
+    default_popup: "src/popup/popup.html"
+  },
+  background: {
+    service_worker: "src/background/background.ts",
+    type: "module"
+  },
+  content_scripts: [
+    {
+      matches: ["<all_urls>"],
+      js: ["src/content/content.ts"]
+    }
+  ],
+  options_page: "src/options/options.html"
+});

package/extension-structure/src/options/App.tsx

@@ -0,0 +1,49 @@
+// src/options/App.tsx
+import { useState } from 'react';
+
+export default function App() {
+  const [configName, setConfigName] = useState('');
+  const [configs, setConfigs] = useState<string[]>(['Default']);
+
+  const addConfig = () => {
+    if (configName.trim()) {
+      setConfigs([...configs, configName.trim()]);
+      setConfigName('');
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 p-6 text-gray-900">
+      <h1 className="text-2xl font-bold mb-4">Vextro Extension Options</h1>
+
+      <div className="mb-6">
+        <label className="block mb-1 font-medium">New Config Name:</label>
+        <input
+          type="text"
+          value={configName}
+          onChange={(e) => setConfigName(e.target.value)}
+          className="w-full p-2 border border-gray-300 rounded"
+          placeholder="e.g., MyCustomConfig"
+        />
+        <button
+          onClick={addConfig}
+          className="mt-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded"
+        >
+          Add Config
+        </button>
+      </div>
+
+      <div>
+        <h2 className="text-lg font-semibold mb-2">Available Configs:</h2>
+        <ul className="bg-white rounded shadow p-4 space-y-2">
+          {configs.map((cfg, idx) => (
+            <li key={idx} className="flex justify-between items-center">
+              <span>{cfg}</span>
+              <button className="text-sm text-red-600 hover:underline">Delete</button>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/extension-structure/src/options/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/extension-structure/src/options/options.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link href="/src/styles.css" rel="stylesheet">
+  <title>Extensify Options</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./index.tsx"></script>
+</body>
+</html>

package/extension-structure/src/popup/App.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState<'load' | 'generate'>('load');
+
+  const openOptionsPage = () => {
+    chrome.runtime.openOptionsPage();
+  };
+
+  return (
+    <div className="w-[320px] min-h-[280px] p-4 bg-gray-900 text-white font-sans">
+      {/* Brand Header */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <img src="/icon.png" alt="Vextro Logo" className="w-6 h-6" />
+          <h1 className="text-lg font-semibold">Vextro</h1>
+        </div>
+        <button
+          onClick={openOptionsPage}
+          className="text-sm text-blue-400 hover:underline"
+        >
+          Options
+        </button>
+      </div>
+
+      {/* Tab Buttons */}
+      <div className="flex justify-around mb-4">
+        <button
+          className={`px-4 py-1 rounded-md ${
+            activeTab === 'load' ? 'bg-blue-500' : 'bg-gray-700'
+          }`}
+          onClick={() => setActiveTab('load')}
+        >
+          Load Config
+        </button>
+        <button
+          className={`px-4 py-1 rounded-md ${
+            activeTab === 'generate' ? 'bg-blue-500' : 'bg-gray-700'
+          }`}
+          onClick={() => setActiveTab('generate')}
+        >
+          Generate
+        </button>
+      </div>
+
+      {/* Tab Content */}
+      <div className="bg-gray-800 p-3 rounded-md">
+        {activeTab === 'load' ? (
+          <div>
+            <label className="block text-sm mb-2">Select Config</label>
+            <select className="w-full p-2 bg-gray-700 rounded text-white">
+              <option>Default</option>
+              <option>Custom 1</option>
+            </select>
+          </div>
+        ) : (
+          <div>
+            <label className="block text-sm mb-2">Generate New Config</label>
+            <input
+              type="text"
+              placeholder="Enter key name"
+              className="w-full p-2 bg-gray-700 rounded text-white"
+            />
+            <button className="mt-3 w-full bg-green-600 hover:bg-green-700 py-2 rounded">
+              Generate
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/extension-structure/src/popup/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/extension-structure/src/popup/popup.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link href="/src/styles.css" rel="stylesheet">
+  <title>Extensify Popup</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./index.tsx"></script>
+</body>
+</html>

package/extension-structure/src/styles.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/extension-structure/src/utils/apiClient.ts

@@ -0,0 +1,5 @@
+// API client (optional demo)
+export const fetchAPI = async (prompt: string): Promise<string> => {
+  // Placeholder logic
+  return `Echo: ${prompt}`;
+};

package/extension-structure/vite.config.ts

@@ -0,0 +1,28 @@
+import path from 'path';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { crx } from '@crxjs/vite-plugin';
+import manifest from './src/manifest';
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [
+    react(), 
+    crx({ manifest }),
+    tailwindcss()
+  ],
+  build: {
+    outDir: 'dist',
+    rollupOptions: {
+      input: {
+        popup: path.resolve(__dirname, 'src/popup/popup.html'),
+        options: path.resolve(__dirname, 'src/options/options.html')
+      },
+      output: {
+        assetFileNames: 'assets/[name].[ext]',
+        chunkFileNames: 'assets/[name].js',
+        entryFileNames: 'assets/[name].js'
+      }
+    }
+  }
+});

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "create-vextro",
+  "version": "0.0.2",
+  "description": "Scaffold modern Chrome extensions with Vite + React + Tailwind",
+  "bin": {
+    "create-vextro": "bin/cli.js"
+  },
+  "type": "module",
+  "files": [
+    "bin",
+    "extension-structure/"
+  ],
+  "keywords": [
+    "vite",
+    "chrome-extension",
+    "vite-plugin",
+    "react",
+    "tailwind",
+    "crxjs",
+    "manifest-v3",
+    "scaffold"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lasalasa/vextro"
+  },
+  "author": "Lasantha <lasanthaslakmal@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/lasalasa/vextro/issues"
+  },
+  "homepage": "https://github.com/lasalasa/vextro#readme",
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "fs-extra": "^11.2.0",
+    "inquirer": "^9.2.8"
+  },
+  "engines": {
+    "node": ">=16"
+  }
+}