base44 · kfirstri · Feb 1, 2026
diff --git a/templates/chrome-extension/.nvmrc b/templates/chrome-extension/.nvmrc
@@ -0,0 +1 @@
+20
diff --git a/templates/chrome-extension/README.md b/templates/chrome-extension/README.md
@@ -0,0 +1,90 @@
+# Chrome Bookmarks Extension
+
+A Chrome extension for bookmarking websites with AI-powered search, built with WXT framework and Base44 backend.
+
+## Features
+
+- **Save Bookmarks**: Save any website with a single click
+- **View Bookmarks**: Browse your saved bookmarks in the popup
+- **AI Search**: Search through your bookmarks using natural language
+- **Base44 Backend**: Powered by Base44 for data storage and AI capabilities
+
+## Structure
+
+```
+base44/               # Backend configuration
+├── config.jsonc      # Project settings
+├── entities/         # Data schemas
+│   └── bookmark.jsonc # Bookmark entity
+└── agents/           # AI agents
+    └── search_agent.jsonc # Bookmark search agent
+
+wxt-src/              # Extension source code
+├── entrypoints/
+│   ├── background/   # Background service worker
+│   ├── content/      # Content scripts
+│   └── popup/        # Extension popup UI
+└── components/       # Shared React components
+
+public/               # Static assets
+└── icon/             # Extension icons
+```
+
+## Development
+
+```bash
+npm install
+npm run dev
+```
+
+This will start WXT in development mode with hot-reload enabled.
+
+## Commands
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Start development mode (Chrome) |
+| `npm run dev:firefox` | Start development mode (Firefox) |
+| `npm run build` | Build for production (Chrome) |
+| `npm run build:firefox` | Build for production (Firefox) |
+| `npm run zip` | Create distribution zip (Chrome) |
+| `npm run zip:firefox` | Create distribution zip (Firefox) |
+
+## Base44 Setup
+
+```bash
+base44 login          # Authenticate
+base44 entities push  # Push entity schemas
+base44 agents push    # Push AI agents
+base44 deploy         # Deploy backend
+```
+
+## Loading the Extension
+
+### Chrome
+1. Run `npm run build` to create the production build
+2. Open Chrome and navigate to `chrome://extensions/`
+3. Enable "Developer mode"
+4. Click "Load unpacked"
+5. Select the `.output/chrome-mv3` directory
+
+### Firefox
+1. Run `npm run build:firefox`
+2. Open Firefox and navigate to `about:debugging#/runtime/this-firefox`
+3. Click "Load Temporary Add-on"
+4. Select any file in the `.output/firefox-mv3` directory
+
+## Usage
+
+1. **Save a Bookmark**: Click the extension icon and press "Save Current Page"
+2. **View Bookmarks**: Open the popup to see your saved bookmarks
+3. **Search**: Use the search bar with natural language queries like "show me articles about React"
+4. **Delete**: Click the trash icon to remove a bookmark
+
+## Architecture
+
+- **WXT Framework**: Modern web extension development framework with Vite
+- **React**: UI components with hooks
+- **Base44 SDK**: Backend integration for data storage
+- **AI Agents**: Natural language search powered by Base44 agents
+- **Tailwind CSS**: Utility-first styling
diff --git a/templates/chrome-extension/base44/agents/search_agent.jsonc b/templates/chrome-extension/base44/agents/search_agent.jsonc
@@ -0,0 +1,13 @@
+{
+  "name": "Bookmark Search Agent",
+  "description": "AI agent that helps users search through their bookmarks using natural language queries",
+  "instructions": "You are a helpful assistant that searches through a user's bookmarks. When a user asks a question or describes what they're looking for, search through their bookmarks and return the most relevant results. You can understand natural language queries like 'articles about React', 'bookmarks from last week', or 'tutorials I saved'.",
+  "tools": [
+    {
+      "type": "query",
+      "entity": "Bookmark",
+      "description": "Search and filter bookmarks"
+    }
+  ],
+  "model": "gpt-4-turbo-preview"
+}
diff --git a/templates/chrome-extension/base44/app.jsonc.ejs b/templates/chrome-extension/base44/app.jsonc.ejs
@@ -0,0 +1,9 @@
+---
+outputFileName: .app.jsonc
+---
+// Base44 App Configuration
+// This file links your local project to your Base44 app.
+// Do not commit this file to version control.
+{
+  "id": "<%= projectId %>"
+}
diff --git a/templates/chrome-extension/base44/config.jsonc.ejs b/templates/chrome-extension/base44/config.jsonc.ejs
@@ -0,0 +1,8 @@
+// Base44 Project Configuration
+// JSONC enables inline documentation and discoverability directly in config files.
+// Chrome extension template with WXT framework and Base44 backend.
+
+{
+  "name": "<%= name %>"<% if (description) { %>,
+  "description": "<%= description %>"<% } %>
+}
diff --git a/templates/chrome-extension/base44/entities/bookmark.jsonc b/templates/chrome-extension/base44/entities/bookmark.jsonc
@@ -0,0 +1,41 @@
+{
+  "name": "Bookmark",
+  "fields": {
+    "url": {
+      "type": "string",
+      "required": true,
+      "description": "The URL of the bookmarked page"
+    },
+    "title": {
+      "type": "string",
+      "required": true,
+      "description": "The title of the bookmarked page"
+    },
+    "description": {
+      "type": "string",
+      "description": "Optional description or notes about the bookmark"
+    },
+    "favicon": {
+      "type": "string",
+      "description": "URL to the site's favicon"
+    },
+    "tags": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "description": "Tags for categorizing bookmarks"
+    },
+    "createdAt": {
+      "type": "timestamp",
+      "autoCreate": true,
+      "description": "Timestamp when the bookmark was created"
+    }
+  },
+  "indexes": [
+    {
+      "fields": ["createdAt"],
+      "direction": "desc"
+    }
+  ]
+}
diff --git a/templates/chrome-extension/gitignore.ejs b/templates/chrome-extension/gitignore.ejs
@@ -0,0 +1,25 @@
+---
+outputFileName: .gitignore
+---
+# Dependencies
+node_modules/
+
+# Build outputs
+.output/
+.wxt/
+dist/
+
+# Environment
+.env
+.env.local
+.app.jsonc
+
+# OS
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
diff --git a/templates/chrome-extension/package.json b/templates/chrome-extension/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "chrome-bookmarks-extension",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "wxt",
+    "dev:firefox": "wxt -b firefox",
+    "build": "wxt build",
+    "build:firefox": "wxt build -b firefox",
+    "zip": "wxt zip",
+    "zip:firefox": "wxt zip -b firefox",
+    "postinstall": "wxt prepare"
+  },
+  "dependencies": {
+    "@base44/sdk": "^0.8.3",
+    "lucide-react": "^0.475.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17",
+    "wxt": "^0.19.0"
+  }
+}
diff --git a/templates/chrome-extension/postcss.config.js b/templates/chrome-extension/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/templates/chrome-extension/public/icon/README.md b/templates/chrome-extension/public/icon/README.md
@@ -0,0 +1,12 @@
+# Extension Icons
+
+Place your extension icons here:
+
+- `16.png` - 16x16 pixels (browser toolbar)
+- `32.png` - 32x32 pixels (Windows)
+- `48.png` - 48x48 pixels (extensions page)
+- `128.png` - 128x128 pixels (Chrome Web Store)
+
+You can use tools like [Figma](https://figma.com), [Canva](https://canva.com), or any image editor to create these icons.
+
+For now, WXT will generate default icons if these are missing.
diff --git a/templates/chrome-extension/public/manifest.json b/templates/chrome-extension/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "manifest_version": 3,
+  "name": "Bookmark Manager",
+  "version": "1.0.0",
+  "description": "Save and search bookmarks with AI assistance",
+  "permissions": ["tabs", "storage"],
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icon/16.png",
+      "32": "icon/32.png",
+      "48": "icon/48.png",
+      "128": "icon/128.png"
+    }
+  },
+  "icons": {
+    "16": "icon/16.png",
+    "32": "icon/32.png",
+    "48": "icon/48.png",
+    "128": "icon/128.png"
+  },
+  "background": {
+    "service_worker": "background.js"
+  }
+}
diff --git a/templates/chrome-extension/tailwind.config.js b/templates/chrome-extension/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./wxt-src/**/*.{js,jsx,ts,tsx,html}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/templates/chrome-extension/tsconfig.json b/templates/chrome-extension/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./wxt-src/*"]
+    }
+  },
+  "include": ["wxt-src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/templates/chrome-extension/tsconfig.node.json b/templates/chrome-extension/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["wxt.config.ts"]
+}