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

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

@@ -0,0 +1,54 @@
+# AI Agent Guide - Svelte Addfox Extension
+
+> **Priority**: Follow `.agents/skills/` first, then this guide, then [official docs](https://addfox.dev)
+
+## Project Overview
+
+Svelte browser extension using Addfox build tool. Uses `@rsbuild/plugin-svelte` for Svelte 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 `pluginSvelte()` for Svelte 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. Each needs `index.js` as entry.
+
+## Framework-Specific Notes
+
+### Svelte
+
+- Single File Components (`.svelte` files)
+- Reactive statements with `$:`
+
+### Browser Extension APIs
+
+- Install `webextension-polyfill` for cross-browser compatibility
+
+### Styling
+
+- Svelte scoped styles by default
+- Content scripts: use `@addfox/utils` with Shadow DOM
+
+## Resources
+
+- Addfox docs: https://addfox.dev
+- Rsbuild Svelte plugin: https://rsbuild.dev/plugins/list/plugin-svelte
+- Svelte docs: https://svelte.dev

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

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

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

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

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

@@ -0,0 +1,4 @@
+<script>
+</script>
+
+<div>Hello from Svelte</div>

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

@@ -0,0 +1,4 @@
+import App from "./App.svelte";
+
+const target = document.getElementById("root");
+if (target) new App({ target });

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

@@ -0,0 +1,30 @@
+<div class="popup">
+  <img src="/icons/icon_128.png" alt="" width="64" height="64" />
+  <div class="title">AddFox Svelte</div>
+  <a class="site-link" href="https://addfox.dev/" target="_blank" rel="noopener noreferrer">addfox.dev</a>
+</div>
+
+<style>
+  .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-svelte-js/app/popup/index.js

@@ -0,0 +1,4 @@
+import App from "./App.svelte";
+
+const target = document.getElementById("root");
+if (target) new App({ target });

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

@@ -0,0 +1,4 @@
+<script>
+</script>
+
+<div>Hello from Svelte</div>

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

@@ -0,0 +1,4 @@
+import App from "./App.svelte";
+
+const target = document.getElementById("root");
+if (target) new App({ target });

package/templates/template-svelte-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",
+    "svelte": "^5.54.1"
+  },
+  "devDependencies": {
+    "addfox": "0.1.1",
+    "@rsbuild/plugin-svelte": "1.1.1"
+  }
+}

package/templates/template-svelte-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 + Svelte</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 + Svelte</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-svelte-ts/AGENTS.md

@@ -0,0 +1,61 @@
+# AI Agent Guide - Svelte Addfox Extension
+
+> **Priority**: Follow `.agents/skills/` first, then this guide, then [official docs](https://addfox.dev)
+
+## Project Overview
+
+Svelte browser extension using Addfox build tool. Uses `@rsbuild/plugin-svelte` for Svelte 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 `pluginSvelte()` for Svelte 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.ts)
+- `app/content/` → Content Script (index.ts)
+- `app/popup/` → Popup page (index.ts + App.svelte)
+- `app/options/` → Options page
+- `app/sidepanel/` → Side panel
+
+## Framework-Specific Notes
+
+### Svelte
+
+- Single File Components (`.svelte` files)
+- TypeScript support in `<script lang="ts">`
+- Reactive statements with `$:`
+
+### Browser Extension APIs
+
+- Install `webextension-polyfill` for cross-browser compatibility
+
+### Styling
+
+- Svelte scoped styles by default
+- Content scripts: use `@addfox/utils` with Shadow DOM
+
+## Resources
+
+- Addfox docs: https://addfox.dev
+- Rsbuild Svelte plugin: https://rsbuild.dev/plugins/list/plugin-svelte
+- Svelte docs: https://svelte.dev

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

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

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

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

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

@@ -0,0 +1,4 @@
+<script>
+</script>
+
+<div>Hello from Svelte</div>

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

@@ -0,0 +1,4 @@
+import App from "./App.svelte";
+
+const target = document.getElementById("root");
+if (target) new App({ target });

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

@@ -0,0 +1,30 @@
+<div class="popup">
+  <img src="/icons/icon_128.png" alt="" width="64" height="64" />
+  <div class="title">AddFox Svelte</div>
+  <a class="site-link" href="https://addfox.dev/" target="_blank" rel="noopener noreferrer">addfox.dev</a>
+</div>
+
+<style>
+  .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-svelte-ts/app/popup/index.ts

@@ -0,0 +1,4 @@
+import App from "./App.svelte";
+
+const target = document.getElementById("root");
+if (target) new App({ target });

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

@@ -0,0 +1,4 @@
+<script>
+</script>
+
+<div>Hello from Svelte</div>

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

@@ -0,0 +1,4 @@
+import App from "./App.svelte";
+
+const target = document.getElementById("root");
+if (target) new App({ target });

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

@@ -0,0 +1,20 @@
+{
+  "name": "my-extension",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "addfox dev",
+    "build": "addfox build"
+  },
+  "dependencies": {
+    "@addfox/utils": "0.1.1",
+    "svelte": "^5.54.1"
+  },
+  "devDependencies": {
+    "addfox": "0.1.1",
+    "@rsbuild/plugin-svelte": "1.1.1",
+    "typescript": "^5.9.3",
+    "@types/chrome": "^0.1.38"
+  }
+}

package/templates/template-svelte-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 + Svelte</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 + Svelte</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-svelte-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-vanilla-js/AGENTS.md

@@ -0,0 +1,52 @@
+# AI Agent Guide - Vanilla Addfox Extension
+
+> **Priority**: Follow `.agents/skills/` first, then this guide, then [official docs](https://addfox.dev)
+
+## Project Overview
+
+Vanilla JavaScript browser extension using Addfox build tool. No framework plugins needed.
+
+## Key Configuration Fields (addfox.config.js)
+
+### 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
+
+## Entry Structure
+
+Entries auto-discovered from `appDir` subdirectories. Each needs `index.js` as entry.
+
+## Notes
+
+### JavaScript
+
+- Pure JavaScript without framework
+- DOM APIs available directly
+
+### Browser Extension APIs
+
+- Install `webextension-polyfill` for cross-browser compatibility
+- Or use `chrome.*` APIs directly
+
+### Styling
+
+- Plain CSS
+- 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-js/addfox.config.js

@@ -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-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-vanilla-js/app/content/index.js

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

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

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

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

@@ -0,0 +1,48 @@
+function applyPopupLayout(el) {
+  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() {
+  const img = document.createElement("img");
+  img.src = "/icons/icon_128.png";
+  img.alt = "";
+  img.width = 64;
+  img.height = 64;
+  return img;
+}
+
+function createTitle() {
+  const title = document.createElement("div");
+  title.textContent = "AddFox Vanilla";
+  title.style.fontSize = "18px";
+  title.style.fontWeight = "600";
+  return title;
+}
+
+function createSiteLink() {
+  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) {
+  applyPopupLayout(root);
+  root.append(createIcon(), createTitle(), createSiteLink());
+}
+
+const root = document.getElementById("root");
+if (root) mountPopup(root);

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

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

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

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

package/templates/template-vanilla-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 + 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>