create-addfox-app 0.1.1-beta.10 → 0.1.1-beta.12

package/README.md

@@ -15,4 +15,4 @@ Interactive scaffolder: generates a addfox-based extension project from options
 
 ## Templates
 
-Scaffold templates live at **repo root** in **`templates/`** (e.g. `template-vanilla-ts`, `template-react-ts`). The CLI downloads the chosen template from the GitHub repo tarball, so the repo must have `templates/` at root and committed. The npm package does not bundle templates; it fetches from GitHub at scaffold time.
+Scaffold templates ship inside this package under **`templates/`** (e.g. `template-vanilla-ts`, `template-react-ts`). They are included in the published npm tarball; the CLI copies the chosen folder into your new project (no remote download). The template’s **`addfox.config`** (including `manifest`) is **preserved**; the CLI only **merges** Rsbuild Less/Sass plugins when those style engines are selected. If no config file exists, a full fallback config is generated.

package/dist/cli.js

@@ -8,91 +8,40 @@ import prompts from "prompts";
 import { blue, cyan, dim, gray, green, lightBlue, magenta, red, trueColor, yellow } from "kolorist";
 import minimist from "minimist";
 import { cp, mkdir } from "node:fs/promises";
-import { gunzipSync } from "node:zlib";
 import { detectPackageManager, getExecCommand, getInstallCommand, getRunCommand } from "@addfox/pkg-manager";
-const GITHUB_REPO = "addfox/addfox";
 const TEMPLATE_BASE = "templates";
-function getRepoRoot() {
-    const fromDist = external_node_path_resolve(dirname(fileURLToPath(import.meta.url)), "..", "..", "..");
-    return fromDist;
+function getPackageRoot() {
+    return external_node_path_resolve(dirname(fileURLToPath(import.meta.url)), "..");
+}
+function getBundledTemplatesDir() {
+    return join(getPackageRoot(), TEMPLATE_BASE);
 }
 function hasLocalTemplate(templateName) {
-    const repoRoot = getRepoRoot();
-    return existsSync(join(repoRoot, TEMPLATE_BASE, templateName));
+    return existsSync(join(getBundledTemplatesDir(), templateName));
 }
-const SKIP_TEMPLATE_PATH_PARTS = new Set([
+const SKIP_RELATIVE_SEGMENTS = new Set([
     "node_modules",
     ".git",
     ".pnpm"
 ]);
-function shouldCopyLocalTemplatePath(src) {
-    const normalized = src.split(/[/\\]/);
-    for (const part of normalized)if (SKIP_TEMPLATE_PATH_PARTS.has(part)) return false;
+function shouldCopyLocalTemplatePath(src, templateRoot) {
+    const root = external_node_path_resolve(templateRoot);
+    const rel = relative(root, external_node_path_resolve(src));
+    if (rel.startsWith("..")) return true;
+    for (const part of rel.split(/[/\\]/))if (SKIP_RELATIVE_SEGMENTS.has(part)) return false;
     return true;
 }
-async function tryLocalTemplates(templateName, destDir) {
-    const repoRoot = getRepoRoot();
-    const templatePath = join(repoRoot, TEMPLATE_BASE, templateName);
-    if (!existsSync(templatePath)) return false;
+async function copyBundledTemplate(templateName, destDir) {
+    const templatePath = join(getBundledTemplatesDir(), templateName);
+    if (!existsSync(templatePath)) throw new Error(`Bundled template "${templateName}" not found under create-addfox-app. Reinstall the package.`);
     await mkdir(destDir, {
         recursive: true
     });
-    await cp(templatePath, destDir, {
+    const resolvedTemplate = external_node_path_resolve(templatePath);
+    await cp(resolvedTemplate, destDir, {
         recursive: true,
-        filter: (src)=>shouldCopyLocalTemplatePath(src)
+        filter: (src)=>shouldCopyLocalTemplatePath(src, resolvedTemplate)
     });
-    return true;
-}
-function parseTarHeader(buf) {
-    if (buf.every((b)=>0 === b)) return null;
-    const rawName = buf.subarray(0, 100).toString("utf8").replace(/\0+$/, "");
-    const sizeStr = buf.subarray(124, 136).toString("utf8").replace(/\0+$/, "").trim();
-    const type = String.fromCharCode(buf[156]);
-    const prefix = buf.subarray(345, 500).toString("utf8").replace(/\0+$/, "");
-    return {
-        name: prefix ? `${prefix}/${rawName}` : rawName,
-        size: parseInt(sizeStr, 8) || 0,
-        type
-    };
-}
-function extractMatchingFiles(tarBuffer, templatePrefix, destDir) {
-    let offset = 0;
-    while(offset + 512 <= tarBuffer.length){
-        const header = parseTarHeader(tarBuffer.subarray(offset, offset + 512));
-        offset += 512;
-        if (!header) break;
-        const dataBlocks = 512 * Math.ceil(header.size / 512);
-        const idx = header.name.indexOf(templatePrefix);
-        if (-1 !== idx) {
-            const relativePath = header.name.substring(idx + templatePrefix.length).replace(/^\//, "");
-            if (relativePath) {
-                const destPath = join(destDir, relativePath);
-                const isDir = "5" === header.type || relativePath.endsWith("/");
-                if (isDir) mkdirSync(destPath, {
-                    recursive: true
-                });
-                else if ("0" === header.type || "\0" === header.type) {
-                    mkdirSync(dirname(destPath), {
-                        recursive: true
-                    });
-                    writeFileSync(destPath, tarBuffer.subarray(offset, offset + header.size));
-                }
-            }
-        }
-        offset += dataBlocks;
-    }
-}
-async function downloadTemplate(templateName, destDir, branch = "main") {
-    const url = `https://codeload.github.com/${GITHUB_REPO}/tar.gz/${branch}`;
-    const templatePrefix = `${TEMPLATE_BASE}/${templateName}/`;
-    const response = await fetch(url);
-    if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-    const compressed = Buffer.from(await response.arrayBuffer());
-    const tarBuffer = gunzipSync(compressed);
-    mkdirSync(destDir, {
-        recursive: true
-    });
-    extractMatchingFiles(tarBuffer, templatePrefix, destDir);
 }
 const FRAMES = [
     "⠋",
@@ -295,7 +244,7 @@ function getStylePlugin(engine) {
     };
     return null;
 }
-const MINIMAL_MANIFEST = '  name: "My Extension",\n  version: "1.0.0",\n  manifest_version: 3,\n  description: "Browser extension built with addfox",\n  permissions: ["storage", "activeTab"],';
+const MINIMAL_MANIFEST = '  name: "My Extension",\n  version: "1.0.0",\n  manifest_version: 3,\n  description: "Browser extension built with addfox",\n  permissions: ["activeTab"],\n  icons: {\n    "16": "icons/icon_128.png",\n    "48": "icons/icon_128.png",\n    "128": "icons/icon_128.png",\n  },\n  action: {\n    default_icon: {\n      "16": "icons/icon_128.png",\n      "48": "icons/icon_128.png",\n      "128": "icons/icon_128.png",\n    },\n  },';
 function generateAddfoxConfig(framework, _language, styleEngine) {
     const importLines = [];
     const fwImport = getFrameworkPluginImport(framework);
@@ -323,6 +272,67 @@ function generateAddfoxConfig(framework, _language, styleEngine) {
     ];
     return parts.filter(Boolean).join("\n");
 }
+const MANIFEST_LINE = "  manifest: { chromium: manifest, firefox: { ...manifest } },";
+function findMatchingArrayClose(source, openBracketIdx) {
+    if ("[" !== source[openBracketIdx]) return -1;
+    let depth = 0;
+    for(let i = openBracketIdx; i < source.length; i++){
+        const c = source[i];
+        if ("[" === c) depth++;
+        else if ("]" === c) {
+            depth--;
+            if (0 === depth) return i;
+        }
+    }
+    return -1;
+}
+function hasImportFromModule(source, modulePath) {
+    return source.includes(`from "${modulePath}"`) || source.includes(`from '${modulePath}'`) || source.includes(`from \`${modulePath}\``);
+}
+function insertImportAfterLastImport(source, importLine) {
+    const trimmed = importLine.trim();
+    const moduleMatch = /from\s+["']([^"']+)["']/.exec(trimmed);
+    if (moduleMatch && hasImportFromModule(source, moduleMatch[1])) return source;
+    const lines = source.split("\n");
+    let lastImportIdx = -1;
+    for(let i = 0; i < lines.length; i++)if (lines[i].trim().startsWith("import ")) lastImportIdx = i;
+    if (-1 === lastImportIdx) return `${importLine}\n${source}`;
+    const next = [
+        ...lines
+    ];
+    next.splice(lastImportIdx + 1, 0, importLine);
+    return next.join("\n");
+}
+function pluginCallPresent(inner, call) {
+    const fn = call.replace(/\(\)$/, "");
+    return inner.includes(`${fn}(`);
+}
+function mergeCallsIntoPluginsArray(source, calls) {
+    const pluginsIdx = source.indexOf("plugins:");
+    if (-1 === pluginsIdx) return addPluginsBlockAfterManifest(source, calls);
+    const bracketStart = source.indexOf("[", pluginsIdx);
+    if (-1 === bracketStart) return source;
+    const bracketEnd = findMatchingArrayClose(source, bracketStart);
+    if (-1 === bracketEnd) return source;
+    let inner = source.slice(bracketStart + 1, bracketEnd).trim();
+    for (const c of calls)if (!pluginCallPresent(inner, c)) inner = inner ? `${inner}, ${c}` : c;
+    return source.slice(0, bracketStart + 1) + inner + source.slice(bracketEnd);
+}
+function addPluginsBlockAfterManifest(source, calls) {
+    const idx = source.indexOf(MANIFEST_LINE);
+    if (-1 === idx) return source;
+    const insertPos = idx + MANIFEST_LINE.length;
+    return `${source.slice(0, insertPos)}\n  plugins: [${calls.join(", ")}],${source.slice(insertPos)}`;
+}
+function mergeScaffoldIntoAddfoxConfig(source, styleEngine) {
+    const st = getStylePlugin(styleEngine);
+    if (!st) return source;
+    let out = insertImportAfterLastImport(source, st.importLine);
+    out = mergeCallsIntoPluginsArray(out, [
+        st.call
+    ]);
+    return out;
+}
 const UTF8_BOM = "\uFEFF";
 function stripUtf8Bom(text) {
     return text.startsWith(UTF8_BOM) ? text.slice(UTF8_BOM.length) : text;
@@ -941,21 +951,20 @@ async function main() {
     if (!testSelection) process.exit(0);
     const pm = options.packageManager;
     const templateName = getTemplateName(options.framework, options.language);
-    const useLocalTemplate = hasLocalTemplate(templateName);
-    const templateLabel = useLocalTemplate ? "Copying local template..." : "Downloading template...";
-    const LOCAL_TEMPLATE_SPINNER_MIN_MS = 800;
+    const templateReady = hasLocalTemplate(templateName);
+    const templateLabel = "Copying template...";
+    const TEMPLATE_SPINNER_MIN_MS = 800;
     try {
         await runWithTemplateSpinner(templateLabel, async ()=>{
-            await new Promise((resolve)=>{
-                setImmediate(resolve);
+            await new Promise((resolveSpinner)=>{
+                setImmediate(resolveSpinner);
             });
-            if (await tryLocalTemplates(templateName, root)) return;
-            await downloadTemplate(templateName, root);
-        }, useLocalTemplate ? {
-            minVisibleMs: LOCAL_TEMPLATE_SPINNER_MIN_MS
+            await copyBundledTemplate(templateName, root);
+        }, templateReady ? {
+            minVisibleMs: TEMPLATE_SPINNER_MIN_MS
         } : void 0);
     } catch (err) {
-        console.error(red(`\n  Failed to download template: ${err.message}\n`));
+        console.error(red(`\n  Failed to copy template: ${err.message}\n`));
         process.exit(1);
     }
     const useAllEntries = options.entries.includes("__all__");
@@ -966,7 +975,11 @@ async function main() {
     if (!useAllEntries && effectiveEntries.length > 0) filterAppEntries(root, effectiveEntries);
     const configExt = "ts" === options.language ? "ts" : "js";
     const configPath = external_node_path_resolve(root, `addfox.config.${configExt}`);
-    const configContent = generateAddfoxConfig(options.framework, options.language, options.styleEngine);
+    let configContent;
+    if (existsSync(configPath)) {
+        const existing = readFileSync(configPath, "utf-8");
+        configContent = existing.trim().length > 0 && existing.includes("defineConfig") ? mergeScaffoldIntoAddfoxConfig(existing, options.styleEngine) : generateAddfoxConfig(options.framework, options.language, options.styleEngine);
+    } else configContent = generateAddfoxConfig(options.framework, options.language, options.styleEngine);
     writeFileSync(configPath, configContent, "utf-8");
     updatePackageName(root, targetDir);
     applyStyleEngine(root, options.framework, options.language, options.styleEngine);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-addfox-app",
-  "version": "0.1.1-beta.10",
+  "version": "0.1.1-beta.12",
   "description": "Interactive scaffolder for addfox extension projects",
   "license": "MIT",
   "type": "module",
@@ -9,6 +9,7 @@
   },
   "files": [
     "dist",
+    "templates",
     "LICENSE"
   ],
   "dependencies": {

package/templates/README.md

@@ -0,0 +1,3 @@
+# Scaffold templates
+
+Templates used by **create-addfox-app**. Each subdirectory (e.g. `template-vanilla-ts`, `template-react-ts`) is a full project skeleton. They live under this package and ship with the published npm tarball; the CLI copies the chosen folder into the new project directory.

package/templates/template-preact-js/addfox.config.js

@@ -0,0 +1,27 @@
+import { defineConfig } from "addfox";
+import { pluginPreact } from "@rsbuild/plugin-preact";
+
+const manifest = {
+  name: "My Extension",
+  version: "1.0.0",
+  manifest_version: 3,
+  description: "Browser extension built with addfox",
+  permissions: ["activeTab"],
+  icons: {
+    "16": "icons/icon_128.png",
+    "48": "icons/icon_128.png",
+    "128": "icons/icon_128.png",
+  },
+  action: {
+    default_icon: {
+      "16": "icons/icon_128.png",
+      "48": "icons/icon_128.png",
+      "128": "icons/icon_128.png",
+    },
+  },
+};
+
+export default defineConfig({
+  manifest: { chromium: manifest, firefox: { ...manifest } },
+  plugins: [pluginPreact()],
+});

package/templates/template-preact-js/app/background/index.js

@@ -0,0 +1,8 @@
+function openWelcomePage() {
+  chrome.tabs.create({ url: chrome.runtime.getURL("welcome.html") });
+}
+
+chrome.runtime.onInstalled.addListener((details) => {
+  if (details.reason === "install" || details.reason === "update") openWelcomePage();
+  console.log("Extension installed");
+});

package/templates/template-preact-js/app/content/index.js

@@ -0,0 +1 @@
+console.log("Content script loaded");

package/templates/template-preact-js/app/options/App.jsx

@@ -0,0 +1,5 @@
+import { h } from "preact";
+
+export default function App() {
+  return <div>Hello from Preact</div>;
+}

package/templates/template-preact-js/app/options/index.jsx

@@ -0,0 +1,5 @@
+import { render, h } from "preact";
+import App from "./App";
+
+const root = document.getElementById("root");
+if (root) render(h(App, null), root);

package/templates/template-preact-js/app/popup/App.jsx

@@ -0,0 +1,23 @@
+import { h } from "preact";
+
+export default function App() {
+  const popupStyle = {
+    width: 320,
+    minHeight: 200,
+    padding: 16,
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+    fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+  };
+
+  return (
+    <div style={popupStyle}>
+      <img src="/icons/icon_128.png" alt="" width={64} height={64} />
+      <div style={{ fontSize: 18, fontWeight: 600 }}>AddFox Preact</div>
+    </div>
+  );
+}

package/templates/template-preact-js/app/popup/index.jsx

@@ -0,0 +1,5 @@
+import { render, h } from "preact";
+import App from "./App";
+
+const root = document.getElementById("root");
+if (root) render(h(App, null), root);

package/templates/template-preact-js/app/sidepanel/App.jsx

@@ -0,0 +1,5 @@
+import { h } from "preact";
+
+export default function App() {
+  return <div>Hello from Preact</div>;
+}

package/templates/template-preact-js/app/sidepanel/index.jsx

@@ -0,0 +1,5 @@
+import { render, h } from "preact";
+import App from "./App";
+
+const root = document.getElementById("root");
+if (root) render(h(App, null), root);

package/templates/template-preact-js/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "my-extension",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "addfox dev",
+    "build": "addfox build"
+  },
+  "dependencies": {
+    "addfox": "^0.1.1-beta.7",
+    "@rsbuild/core": "^1.7.3",
+    "@addfox/utils": "^0.1.1-beta.5",
+    "preact": "^10.29.0"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-preact": "^1.7.2"
+  }
+}

package/templates/template-preact-js/public/welcome.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Welcome - Addfox + Preact</title>
+  <style>
+    body { font-family: system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background: #fafafa; color: #1a1a1a; }
+    h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; }
+    p { font-size: 1rem; color: #666; margin: 0; }
+    .welcome-icon { width: 96px; height: 96px; margin-bottom: 1rem; object-fit: contain; border-radius: 12px; }
+  </style>
+</head>
+<body>
+  <img class="welcome-icon" src="/icons/icon_128.png" alt="" width="96" height="96" />
+  <h1>Addfox + Preact</h1>
+  <p>Your extension is ready. Happy building!</p>
+</body>
+</html>

package/templates/template-preact-ts/addfox.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from "addfox";
+import { pluginPreact } from "@rsbuild/plugin-preact";
+
+const manifest = {
+  name: "My Extension",
+  version: "1.0.0",
+  manifest_version: 3,
+  description: "Browser extension built with addfox",
+  permissions: ["activeTab"],
+  icons: {
+    "16": "icons/icon_128.png",
+    "48": "icons/icon_128.png",
+    "128": "icons/icon_128.png",
+  },
+  action: {
+    default_icon: {
+      "16": "icons/icon_128.png",
+      "48": "icons/icon_128.png",
+      "128": "icons/icon_128.png",
+    },
+  },
+};
+
+export default defineConfig({
+  manifest: { chromium: manifest, firefox: { ...manifest } },
+  plugins: [pluginPreact()],
+});

package/templates/template-preact-ts/app/background/index.ts

@@ -0,0 +1,8 @@
+function openWelcomePage() {
+  chrome.tabs.create({ url: chrome.runtime.getURL("welcome.html") });
+}
+
+chrome.runtime.onInstalled.addListener((details) => {
+  if (details.reason === "install" || details.reason === "update") openWelcomePage();
+  console.log("Extension installed");
+});

package/templates/template-preact-ts/app/content/index.ts

@@ -0,0 +1 @@
+console.log("Content script loaded");

package/templates/template-preact-ts/app/options/App.tsx

@@ -0,0 +1,5 @@
+import { h } from "preact";
+
+export default function App() {
+  return <div>Hello from Preact</div>;
+}

package/templates/template-preact-ts/app/options/index.tsx

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = document.getElementById("root");
+if (root) createRoot(root).render(<App />);

package/templates/template-preact-ts/app/popup/App.tsx

@@ -0,0 +1,23 @@
+import { h } from "preact";
+
+export default function App() {
+  const popupStyle = {
+    width: 320,
+    minHeight: 200,
+    padding: 16,
+    boxSizing: "border-box" as const,
+    display: "flex",
+    flexDirection: "column" as const,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+    fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+  };
+
+  return (
+    <div style={popupStyle}>
+      <img src="/icons/icon_128.png" alt="" width={64} height={64} />
+      <div style={{ fontSize: 18, fontWeight: 600 }}>AddFox Preact</div>
+    </div>
+  );
+}

package/templates/template-preact-ts/app/popup/index.tsx

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = document.getElementById("root");
+if (root) createRoot(root).render(<App />);

package/templates/template-preact-ts/app/sidepanel/App.tsx

@@ -0,0 +1,5 @@
+import { h } from "preact";
+
+export default function App() {
+  return <div>Hello from Preact</div>;
+}

package/templates/template-preact-ts/app/sidepanel/index.tsx

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = document.getElementById("root");
+if (root) createRoot(root).render(<App />);

package/templates/template-preact-ts/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "my-extension",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "addfox dev",
+    "build": "addfox build"
+  },
+  "dependencies": {
+    "addfox": "^0.1.1-beta.7",
+    "@rsbuild/core": "^1.7.3",
+    "@addfox/utils": "^0.1.1-beta.5",
+    "preact": "^10.29.0"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-preact": "^1.7.2",
+    "typescript": "^5.9.3",
+    "@types/chrome": "^0.1.38"
+  }
+}

package/templates/template-preact-ts/public/welcome.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Welcome - Addfox + Preact</title>
+  <style>
+    body { font-family: system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background: #fafafa; color: #1a1a1a; }
+    h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; }
+    p { font-size: 1rem; color: #666; margin: 0; }
+    .welcome-icon { width: 96px; height: 96px; margin-bottom: 1rem; object-fit: contain; border-radius: 12px; }
+  </style>
+</head>
+<body>
+  <img class="welcome-icon" src="/icons/icon_128.png" alt="" width="96" height="96" />
+  <h1>Addfox + Preact</h1>
+  <p>Your extension is ready. Happy building!</p>
+</body>
+</html>

package/templates/template-preact-ts/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "react-jsx",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": [
+      "chrome"
+    ]
+  },
+  "include": [
+    "app"
+  ]
+}

package/templates/template-react-js/addfox.config.js

@@ -0,0 +1,27 @@
+import { defineConfig } from "addfox";
+import { pluginReact } from "@rsbuild/plugin-react";
+
+const manifest = {
+  name: "My Extension",
+  version: "1.0.0",
+  manifest_version: 3,
+  description: "Browser extension built with addfox",
+  permissions: ["activeTab"],
+  icons: {
+    "16": "icons/icon_128.png",
+    "48": "icons/icon_128.png",
+    "128": "icons/icon_128.png",
+  },
+  action: {
+    default_icon: {
+      "16": "icons/icon_128.png",
+      "48": "icons/icon_128.png",
+      "128": "icons/icon_128.png",
+    },
+  },
+};
+
+export default defineConfig({
+  manifest: { chromium: manifest, firefox: { ...manifest } },
+  plugins: [pluginReact()],
+});

package/templates/template-react-js/app/background/index.js

@@ -0,0 +1,8 @@
+function openWelcomePage() {
+  chrome.tabs.create({ url: chrome.runtime.getURL("welcome.html") });
+}
+
+chrome.runtime.onInstalled.addListener((details) => {
+  if (details.reason === "install" || details.reason === "update") openWelcomePage();
+  console.log("Extension installed");
+});

package/templates/template-react-js/app/content/index.js

@@ -0,0 +1 @@
+console.log("Content script loaded");

package/templates/template-react-js/app/options/App.jsx

@@ -0,0 +1,3 @@
+export default function App() {
+  return <div>Hello from React</div>;
+}

package/templates/template-react-js/app/options/index.jsx

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = document.getElementById("root");
+if (root) createRoot(root).render(<App />);

package/templates/template-react-js/app/popup/App.jsx

@@ -0,0 +1,21 @@
+export default function App() {
+  const popupStyle = {
+    width: 320,
+    minHeight: 200,
+    padding: 16,
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+    fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+  };
+
+  return (
+    <div style={popupStyle}>
+      <img src="/icons/icon_128.png" alt="" width={64} height={64} />
+      <div style={{ fontSize: 18, fontWeight: 600 }}>AddFox React</div>
+    </div>
+  );
+}