create-vextro 0.0.4 → 0.1.0

package/bin/cli.js

@@ -1,124 +0,0 @@
-#!/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

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

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

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

package/extension-structure/src/manifest.ts

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

@@ -1,49 +0,0 @@
-// 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/options.html

@@ -1,12 +0,0 @@
-<!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

@@ -1,72 +0,0 @@
-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/popup.html

@@ -1,12 +0,0 @@
-<!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

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

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

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