create-vextro 0.0.3 → 0.1.0

package/package.json

@@ -1,41 +1,71 @@
-{
-  "name": "create-vextro",
-  "version": "0.0.3",
-  "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"
-  }
-}
+{
+  "name": "create-vextro",
+  "version": "0.1.0",
+  "description": "Scaffold modern browser extensions (Chrome, Edge, Firefox) with Vite + React + Tailwind",
+  "type": "module",
+  "bin": {
+    "create-vextro": "./dist/index.js"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src/",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepublishOnly": "npm run build && npm test",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "fs-extra": "^11.2.0",
+    "inquirer": "^9.2.8",
+    "ora": "^8.0.0"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.0",
+    "@types/fs-extra": "^11.0.4",
+    "@types/inquirer": "^9.0.7",
+    "@types/node": "^20.0.0",
+    "eslint": "^9.0.0",
+    "prettier": "^3.3.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.5.0",
+    "typescript-eslint": "^8.0.0",
+    "vitest": "^2.0.0"
+  },
+  "files": [
+    "dist",
+    "src/templates"
+  ],
+  "keywords": [
+    "vite",
+    "chrome-extension",
+    "firefox-extension",
+    "browser-extension",
+    "vite-plugin",
+    "react",
+    "tailwind",
+    "crxjs",
+    "manifest-v3",
+    "scaffold",
+    "cli",
+    "generator",
+    "starter-kit"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CodeCanvasCollective/vextro.git"
+  },
+  "author": "Lasantha <lasanthaslakmal@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/CodeCanvasCollective/vextro/issues"
+  },
+  "homepage": "https://github.com/CodeCanvasCollective/vextro#readme"
+}

package/src/templates/chrome/src/background/background.ts

@@ -0,0 +1,30 @@
+// Background service worker
+// This runs in the background and handles events for your extension.
+
+// Runs when the extension is first installed or updated
+chrome.runtime.onInstalled.addListener((details) => {
+  console.log('[Vextro] Extension installed:', details.reason);
+
+  // Set default storage values on install
+  if (details.reason === 'install') {
+    chrome.storage.sync.set({
+      greeting: 'Hello from Vextro!',
+      clickCount: 0,
+    });
+  }
+});
+
+// Listen for messages from popup, options, or content scripts
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  console.log('[Vextro] Message received:', message, 'from:', sender.tab?.url);
+
+  if (message.type === 'GET_TAB_INFO') {
+    // Example: respond with the current active tab info
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+      sendResponse({ tab: tabs[0] ?? null });
+    });
+    return true; // Keep the message channel open for async response
+  }
+
+  sendResponse({ status: 'unknown message type' });
+});

package/src/templates/chrome/src/content/content.ts

@@ -0,0 +1,13 @@
+// Content script
+// This runs in the context of web pages matched by manifest.ts content_scripts.
+
+console.log('[Vextro] Content script loaded on:', window.location.href);
+
+// Example: send a message to the background service worker
+chrome.runtime.sendMessage({ type: 'GET_TAB_INFO' }, (response) => {
+  if (chrome.runtime.lastError) {
+    console.warn('[Vextro] Message error:', chrome.runtime.lastError.message);
+    return;
+  }
+  console.log('[Vextro] Tab info received:', response);
+});

package/src/templates/chrome/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 built with Vextro.',
+  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/templates/chrome}/vite.config.ts

@@ -1,28 +1,27 @@
-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'
-      }
-    }
-  }
-});
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+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';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+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/src/templates/firefox/src/background/background.ts

@@ -0,0 +1,29 @@
+// Background service worker
+// This runs in the background and handles events for your extension.
+
+// Runs when the extension is first installed or updated
+chrome.runtime.onInstalled.addListener((details) => {
+  console.log('[Vextro] Extension installed:', details.reason);
+
+  // Set default storage values on install
+  if (details.reason === 'install') {
+    chrome.storage.sync.set({
+      greeting: 'Hello from Vextro!',
+      clickCount: 0,
+    });
+  }
+});
+
+// Listen for messages from popup, options, or content scripts
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  console.log('[Vextro] Message received:', message, 'from:', sender.tab?.url);
+
+  if (message.type === 'GET_TAB_INFO') {
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+      sendResponse({ tab: tabs[0] ?? null });
+    });
+    return true; // Keep the message channel open for async response
+  }
+
+  sendResponse({ status: 'unknown message type' });
+});

package/src/templates/firefox/src/content/content.ts

@@ -0,0 +1,13 @@
+// Content script
+// This runs in the context of web pages matched by manifest.json content_scripts.
+
+console.log('[Vextro] Content script loaded on:', window.location.href);
+
+// Example: send a message to the background script
+chrome.runtime.sendMessage({ type: 'GET_TAB_INFO' }, (response) => {
+  if (chrome.runtime.lastError) {
+    console.warn('[Vextro] Message error:', chrome.runtime.lastError.message);
+    return;
+  }
+  console.log('[Vextro] Tab info received:', response);
+});

package/src/templates/firefox/src/manifest.json

@@ -0,0 +1,35 @@
+{
+  "manifest_version": 3,
+  "name": "__EXT_NAME__",
+  "description": "A modern browser extension built with Vextro.",
+  "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": {
+    "scripts": ["src/background/background.ts"],
+    "type": "module"
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["src/content/content.ts"]
+    }
+  ],
+  "options_ui": {
+    "page": "src/options/options.html",
+    "open_in_tab": true
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "__EXT_NAME__@vextro.dev",
+      "strict_min_version": "109.0"
+    }
+  }
+}

package/src/templates/firefox/vite.config.ts

@@ -0,0 +1,22 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import webExtension from 'vite-plugin-web-extension';
+import tailwindcss from '@tailwindcss/vite';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+export default defineConfig({
+  plugins: [
+    react(),
+    webExtension({
+      manifest: path.resolve(__dirname, 'src/manifest.json'),
+      additionalInputs: ['src/popup/popup.html', 'src/options/options.html'],
+    }),
+    tailwindcss(),
+  ],
+  build: {
+    outDir: 'dist',
+  },
+});

package/src/templates/shared/src/options/App.tsx

@@ -0,0 +1,70 @@
+import { useState, useEffect } from 'react';
+import { getStorageValue, setStorageValue } from '../utils/storage';
+
+export default function App() {
+  const [greeting, setGreeting] = useState('Hello from Vextro!');
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    getStorageValue<string>('greeting', 'Hello from Vextro!').then(setGreeting);
+  }, []);
+
+  const handleSave = async () => {
+    await setStorageValue('greeting', greeting);
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 p-8 text-gray-900 font-sans">
+      <div className="max-w-xl mx-auto">
+        <h1 className="text-2xl font-bold mb-6">Vextro Extension Settings</h1>
+
+        {/* Greeting Setting */}
+        <div className="bg-white rounded-lg shadow p-6 mb-4">
+          <label className="block text-sm font-medium text-gray-700 mb-2">Greeting Message</label>
+          <input
+            type="text"
+            value={greeting}
+            onChange={(e) => setGreeting(e.target.value)}
+            className="w-full p-2.5 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
+            placeholder="Enter your greeting..."
+          />
+          <p className="text-xs text-gray-500 mt-1">
+            This greeting appears in the popup. It's stored using chrome.storage.sync.
+          </p>
+        </div>
+
+        {/* Save Button */}
+        <button
+          onClick={handleSave}
+          className="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 transition-colors text-white px-6 py-2.5 rounded-md font-medium"
+        >
+          Save Settings
+        </button>
+
+        {saved && (
+          <span className="ml-3 text-green-600 text-sm font-medium">✔ Saved successfully!</span>
+        )}
+
+        {/* Info */}
+        <div className="mt-8 bg-blue-50 border border-blue-200 rounded-lg p-4">
+          <h2 className="text-sm font-semibold text-blue-800 mb-1">About Vextro</h2>
+          <p className="text-sm text-blue-700">
+            This extension was scaffolded with{' '}
+            <a
+              href="https://github.com/lasalasa/vextro"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline"
+            >
+              create-vextro
+            </a>
+            . Edit this page in{' '}
+            <code className="bg-blue-100 px-1 rounded">src/options/App.tsx</code>.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/{extension-structure → src/templates/shared}/src/options/index.tsx

@@ -1,9 +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>
-);
+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/src/templates/shared/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>Vextro Options</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

package/src/templates/shared/src/popup/App.tsx

@@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react';
+import { getStorageValue, setStorageValue } from '../utils/storage';
+
+export default function App() {
+  const [count, setCount] = useState(0);
+  const [greeting, setGreeting] = useState('');
+
+  useEffect(() => {
+    // Load saved count from chrome.storage
+    getStorageValue<number>('clickCount', 0).then(setCount);
+    getStorageValue<string>('greeting', 'Hello from Vextro!').then(setGreeting);
+  }, []);
+
+  const handleClick = async () => {
+    const newCount = count + 1;
+    setCount(newCount);
+    await setStorageValue('clickCount', newCount);
+  };
+
+  const openOptionsPage = () => {
+    chrome.runtime.openOptionsPage();
+  };
+
+  return (
+    <div className="w-[320px] min-h-[280px] p-5 bg-gray-900 text-white font-sans">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-5">
+        <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:text-blue-300 transition-colors"
+        >
+          ⚙️ Settings
+        </button>
+      </div>
+
+      {/* Greeting */}
+      <p className="text-sm text-gray-400 mb-4">{greeting}</p>
+
+      {/* Counter Demo */}
+      <div className="bg-gray-800 p-4 rounded-lg text-center">
+        <p className="text-sm text-gray-400 mb-2">Clicks (synced via chrome.storage)</p>
+        <p className="text-3xl font-bold text-blue-400 mb-3">{count}</p>
+        <button
+          onClick={handleClick}
+          className="w-full bg-blue-600 hover:bg-blue-700 active:bg-blue-800 transition-colors py-2 px-4 rounded-md font-medium"
+        >
+          Click Me
+        </button>
+      </div>
+
+      {/* Footer */}
+      <p className="text-xs text-gray-600 text-center mt-4">
+        Built with Vextro — Vite + React + Tailwind
+      </p>
+    </div>
+  );
+}

package/{extension-structure → src/templates/shared}/src/popup/index.tsx

@@ -1,9 +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>
-);
+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/src/templates/shared/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>Vextro Popup</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

package/src/templates/shared/src/styles.css

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

package/src/templates/shared/src/utils/storage.ts

@@ -0,0 +1,34 @@
+// Typed wrapper around chrome.storage.sync
+
+/**
+ * Get a value from chrome.storage.sync with a default fallback.
+ */
+export async function getStorageValue<T>(key: string, defaultValue: T): Promise<T> {
+  return new Promise((resolve) => {
+    chrome.storage.sync.get({ [key]: defaultValue }, (result) => {
+      resolve(result[key] as T);
+    });
+  });
+}
+
+/**
+ * Set a value in chrome.storage.sync.
+ */
+export async function setStorageValue<T>(key: string, value: T): Promise<void> {
+  return new Promise((resolve) => {
+    chrome.storage.sync.set({ [key]: value }, () => {
+      resolve();
+    });
+  });
+}
+
+/**
+ * Remove a value from chrome.storage.sync.
+ */
+export async function removeStorageValue(key: string): Promise<void> {
+  return new Promise((resolve) => {
+    chrome.storage.sync.remove(key, () => {
+      resolve();
+    });
+  });
+}