create-addfox-app 0.1.1-beta.7 → 0.2.0

package/templates/template-vanilla-ts/AGENTS.md

@@ -0,0 +1,59 @@
+# AI Agent Guide - Vanilla Addfox Extension
+
+> **Priority**: Follow `.agents/skills/` first, then this guide, then [official docs](https://addfox.dev)
+
+## Project Overview
+
+Vanilla TypeScript browser extension using Addfox build tool. No framework plugins needed.
+
+## Key Configuration Fields (addfox.config.ts)
+
+### Required Fields
+
+- **`manifest`** - Extension manifest.json content
+  - Supports `chromium` and `firefox` variants
+  - Addfox auto-injects entry paths
+
+### Optional Fields (use when needed)
+
+- **`appDir`** - Source directory (default: "app")
+- **`outDir`** - Build output directory
+- **`entry`** - Manual entry mapping
+- **`hotReload`** - Dev server settings
+- **`debug`** - Enable debug logging
+- **`zip`** - Output zip configuration
+- **`rsbuild`** - Override Rsbuild configuration
+- **`plugins`** - Add Rsbuild plugins if needed (no framework plugin required)
+
+## Entry Structure
+
+Entries auto-discovered from `appDir` subdirectories:
+
+- `app/background/` → Service Worker (index.ts)
+- `app/content/` → Content Script (index.ts)
+- `app/popup/` → Popup page (index.ts + HTML)
+- `app/options/` → Options page
+- `app/sidepanel/` → Side panel
+
+## Notes
+
+### TypeScript
+
+- Pure TypeScript without framework
+- DOM APIs available directly
+- No JSX transform needed
+
+### Browser Extension APIs
+
+- Install `webextension-polyfill` for cross-browser compatibility
+- Or use `chrome.*` APIs directly
+
+### Styling
+
+- Plain CSS or CSS Modules
+- Content scripts: use `@addfox/utils` with Shadow DOM
+
+## Resources
+
+- Addfox docs: https://addfox.dev
+- WebExtension API: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API

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

@@ -0,0 +1,25 @@
+import { defineConfig } from "addfox";
+
+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 } },
+});

package/templates/template-vanilla-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-vanilla-ts/app/content/index.ts

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

package/templates/template-vanilla-ts/app/options/index.ts

@@ -0,0 +1,2 @@
+const root = document.getElementById("root");
+if (root) root.textContent = "Options";

package/templates/template-vanilla-ts/app/popup/index.ts

@@ -0,0 +1,48 @@
+function applyPopupLayout(el: HTMLElement): void {
+  el.style.width = "320px";
+  el.style.minHeight = "200px";
+  el.style.padding = "16px";
+  el.style.boxSizing = "border-box";
+  el.style.display = "flex";
+  el.style.flexDirection = "column";
+  el.style.alignItems = "center";
+  el.style.justifyContent = "center";
+  el.style.gap = "12px";
+  el.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", sans-serif';
+}
+
+function createIcon(): HTMLImageElement {
+  const img = document.createElement("img");
+  img.src = "/icons/icon_128.png";
+  img.alt = "";
+  img.width = 64;
+  img.height = 64;
+  return img;
+}
+
+function createTitle(): HTMLDivElement {
+  const title = document.createElement("div");
+  title.textContent = "AddFox Vanilla";
+  title.style.fontSize = "18px";
+  title.style.fontWeight = "600";
+  return title;
+}
+
+function createSiteLink(): HTMLAnchorElement {
+  const a = document.createElement("a");
+  a.href = "https://addfox.dev/";
+  a.target = "_blank";
+  a.rel = "noopener noreferrer";
+  a.textContent = "addfox.dev";
+  a.style.fontSize = "13px";
+  a.style.color = "#2563eb";
+  return a;
+}
+
+function mountPopup(root: HTMLElement): void {
+  applyPopupLayout(root);
+  root.append(createIcon(), createTitle(), createSiteLink());
+}
+
+const root = document.getElementById("root");
+if (root) mountPopup(root);

package/templates/template-vanilla-ts/app/sidepanel/index.ts

@@ -0,0 +1,2 @@
+const root = document.getElementById("root");
+if (root) root.textContent = "Side panel";

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

@@ -0,0 +1,14 @@
+{
+  "name": "my-extension",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "addfox dev",
+    "build": "addfox build"
+  },
+  "devDependencies": {
+    "addfox": "0.1.1",
+    "typescript": "^5.9.3"
+  }
+}

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

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Welcome - Addfox + Vanilla</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 + Vanilla</h1>
+  <p>Your extension is ready. Happy building!</p>
+  <p style="margin-top: 1rem;"><a href="https://addfox.dev/" target="_blank" rel="noopener noreferrer">addfox.dev</a></p>
+</body>
+</html>

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

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

package/templates/template-vue-js/AGENTS.md

@@ -0,0 +1,60 @@
+# AI Agent Guide - Vue Addfox Extension
+
+> **Priority**: Follow `.agents/skills/` first, then this guide, then [official docs](https://addfox.dev)
+
+## Project Overview
+
+Vue 3 browser extension using Addfox build tool. Uses `@rsbuild/plugin-vue` for SFC support.
+
+## Key Configuration Fields (addfox.config.js)
+
+### Required Fields
+
+- **`manifest`** - Extension manifest.json content
+  - Supports `chromium` and `firefox` variants
+  - Addfox auto-injects entry paths
+
+- **`plugins`** - Rsbuild plugins array
+  - Must include `pluginVue()` for Vue SFC support
+
+### Optional Fields (use when needed)
+
+- **`appDir`** - Source directory (default: "app")
+- **`outDir`** - Build output directory
+- **`entry`** - Manual entry mapping
+- **`hotReload`** - Dev server settings
+- **`debug`** - Enable debug logging
+- **`zip`** - Output zip configuration
+- **`rsbuild`** - Override Rsbuild configuration
+
+## Entry Structure
+
+Entries auto-discovered from `appDir` subdirectories:
+
+- `app/background/` → Service Worker (index.js)
+- `app/content/` → Content Script (index.js)
+- `app/popup/` → Popup page (index.js + App.vue)
+- `app/options/` → Options page
+- `app/sidepanel/` → Side panel
+
+## Framework-Specific Notes
+
+### Vue 3
+
+- Uses Vue 3 Composition API
+- Single File Components (`.vue` files)
+
+### Browser Extension APIs
+
+- Install `webextension-polyfill` for cross-browser compatibility
+
+### Styling
+
+- Vue scoped styles supported
+- Content scripts: use `@addfox/utils` with Shadow DOM
+
+## Resources
+
+- Addfox docs: https://addfox.dev
+- Rsbuild Vue plugin: https://rsbuild.dev/plugins/list/plugin-vue
+- Vue 3 docs: https://vuejs.org

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

@@ -0,0 +1,27 @@
+import { defineConfig } from "addfox";
+import { pluginVue } from "@rsbuild/plugin-vue";
+
+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: [pluginVue()],
+});

package/templates/template-vue-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-vue-js/app/content/index.js

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

package/templates/template-vue-js/app/options/App.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>Hello from Vue</div>
+</template>
+
+<script setup>
+</script>

package/templates/template-vue-js/app/options/index.js

@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+const root = document.getElementById("root");
+if (root) createApp(App).mount(root);

package/templates/template-vue-js/app/popup/App.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="popup">
+    <img src="/icons/icon_128.png" alt="" width="64" height="64" />
+    <div class="title">AddFox Vue</div>
+    <a class="site-link" href="https://addfox.dev/" target="_blank" rel="noopener noreferrer">addfox.dev</a>
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped>
+.popup {
+  width: 320px;
+  min-height: 200px;
+  padding: 16px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.site-link {
+  font-size: 13px;
+  color: #2563eb;
+}
+</style>

package/templates/template-vue-js/app/popup/index.js

@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+const root = document.getElementById("root");
+if (root) createApp(App).mount(root);

package/templates/template-vue-js/app/sidepanel/App.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>Hello from Vue</div>
+</template>
+
+<script setup>
+</script>

package/templates/template-vue-js/app/sidepanel/index.js

@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+const root = document.getElementById("root");
+if (root) createApp(App).mount(root);

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

@@ -0,0 +1,18 @@
+{
+  "name": "my-extension",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "addfox dev",
+    "build": "addfox build"
+  },
+  "dependencies": {
+    "@addfox/utils": "0.1.1",
+    "vue": "^3.5.30"
+  },
+  "devDependencies": {
+    "addfox": "0.1.1",
+    "@rsbuild/plugin-vue": "^1.2.8"
+  }
+}

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

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Welcome - Addfox + Vue</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 + Vue</h1>
+  <p>Your extension is ready. Happy building!</p>
+  <p style="margin-top: 1rem;"><a href="https://addfox.dev/" target="_blank" rel="noopener noreferrer">addfox.dev</a></p>
+</body>
+</html>

package/templates/template-vue-ts/AGENTS.md

@@ -0,0 +1,65 @@
+# AI Agent Guide - Vue Addfox Extension
+
+> **Priority**: Follow `.agents/skills/` first, then this guide, then [official docs](https://addfox.dev)
+
+## Project Overview
+
+Vue 3 browser extension using Addfox build tool. Uses `@rsbuild/plugin-vue` for SFC support.
+
+## Key Configuration Fields (addfox.config.ts)
+
+### Required Fields
+
+- **`manifest`** - Extension manifest.json content
+  - Supports `chromium` and `firefox` variants
+  - Addfox auto-injects entry paths
+
+- **`plugins`** - Rsbuild plugins array
+  - Must include `pluginVue()` for Vue SFC support
+
+### Optional Fields (use when needed)
+
+- **`appDir`** - Source directory (default: "app")
+- **`outDir`** - Build output directory (default: ".addfox/extension")
+- **`entry`** - Manual entry mapping (when auto-discovery fails)
+- **`hotReload`** - Dev server settings
+- **`debug`** - Enable debug logging
+- **`zip`** - Output zip configuration
+- **`rsbuild`** - Override Rsbuild configuration
+
+## Entry Structure
+
+Entries auto-discovered from `appDir` subdirectories:
+
+- `app/background/` → Service Worker (index.ts)
+- `app/content/` → Content Script (index.ts)
+- `app/popup/` → Popup page (index.ts + App.vue)
+- `app/options/` → Options page
+- `app/sidepanel/` → Side panel
+- `app/devtools/` → DevTools page
+
+## Framework-Specific Notes
+
+### Vue 3
+
+- Uses Vue 3 Composition API
+- Single File Components (`.vue` files)
+- TypeScript support enabled
+
+### Browser Extension APIs
+
+- Install `webextension-polyfill` for cross-browser compatibility
+- Use in setup scripts or component methods
+
+### Styling
+
+- Vue scoped styles supported
+- CSS Modules available
+- Content scripts: use `@addfox/utils` with Shadow DOM
+
+## Resources
+
+- Addfox docs: https://addfox.dev
+- Rsbuild Vue plugin: https://rsbuild.dev/plugins/list/plugin-vue
+- Vue 3 docs: https://vuejs.org
+- WebExtension API: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API

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

@@ -0,0 +1,27 @@
+import { defineConfig } from "addfox";
+import { pluginVue } from "@rsbuild/plugin-vue";
+
+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: [pluginVue()],
+});

package/templates/template-vue-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-vue-ts/app/content/index.ts

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

package/templates/template-vue-ts/app/options/App.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>Hello from Vue</div>
+</template>
+
+<script setup>
+</script>

package/templates/template-vue-ts/app/options/index.ts

@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+const root = document.getElementById("root");
+if (root) createApp(App).mount(root);

package/templates/template-vue-ts/app/popup/App.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="popup">
+    <img src="/icons/icon_128.png" alt="" width="64" height="64" />
+    <div class="title">AddFox Vue</div>
+    <a class="site-link" href="https://addfox.dev/" target="_blank" rel="noopener noreferrer">addfox.dev</a>
+  </div>
+</template>
+
+<style scoped>
+.popup {
+  width: 320px;
+  min-height: 200px;
+  padding: 16px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.site-link {
+  font-size: 13px;
+  color: #2563eb;
+}
+</style>

package/templates/template-vue-ts/app/popup/index.ts

@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+const root = document.getElementById("root");
+if (root) createApp(App).mount(root);

package/templates/template-vue-ts/app/sidepanel/App.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>Hello from Vue</div>
+</template>
+
+<script setup>
+</script>

package/templates/template-vue-ts/app/sidepanel/index.ts

@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+const root = document.getElementById("root");
+if (root) createApp(App).mount(root);

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

@@ -0,0 +1,20 @@
+{
+  "name": "my-extension",
+  "version": "1.0.1-beta.2",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "addfox dev",
+    "build": "addfox build"
+  },
+  "dependencies": {
+    "@addfox/utils": "0.1.1",
+    "vue": "^3.5.30"
+  },
+  "devDependencies": {
+    "addfox": "0.1.1",
+    "@rsbuild/plugin-vue": "^1.2.8",
+    "typescript": "^5.9.3",
+    "@types/chrome": "^0.1.38"
+  }
+}

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

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Welcome - Addfox + Vue</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 + Vue</h1>
+  <p>Your extension is ready. Happy building!</p>
+  <p style="margin-top: 1rem;"><a href="https://addfox.dev/" target="_blank" rel="noopener noreferrer">addfox.dev</a></p>
+</body>
+</html>