Complete guide to creating, customizing, and publishing browser extensions with Extension Forge.
Extension Forge is an AI-powered platform that generates fully functional browser extensions from natural language descriptions. Whether you need a productivity tool, developer utility, or custom browser enhancement, our AI handles the boilerplate code so you can focus on functionality.
The quality of your extension depends heavily on how you describe it to the AI. Think of the AI as a junior developer: it knows how to write code, but it needs clear instructions on what to build.
A great prompt typically includes four components:
"Make a bitcoin tracker."
Too vague. The AI will guess the design and features, often leading to a generic result.
"Create a popup extension that fetches the current Bitcoin price from the CoinGecko API. Display the price in large bold text. Include a settings page to switch between USD and EUR. Use a dark, modern theme."
Specific and actionable. Defines the API, features, and design style.
Extension Forge supports three main UI types that define how users interact with your extension. You can select multiple UI types for a single extension, allowing powerful combinations like a popup with a sidepanel.
New in v5.0: Even without framework build tools, our Standard Generator intelligently routes boilerplate HTML/CSS and manages multi-subdirectories for Popups, Options, and Panels natively!
Opens when clicking the extension icon. Best for quick actions, toggles, and compact tools.
A persistent sidebar alongside web pages. Great for reference tools, AI assistants, and dashboards.
Replaces the new tab page. Perfect for dashboards, start pages, or productivity hubs.
Additional capabilities that enhance your extension:
Inject code into web pages to modify content, add features, or extract information. Runs in the context of the page.
Add custom panels to Chrome DevTools. Ideal for debugging tools, performance analyzers, and developer utilities.
After generation, you enter the Forge Core interface with multiple tabs:
Extension Forge projects are built on the WXT Framework, a next-generation toolchain that makes extension development feel like building a modern web app.
entrypoints/
├── popup/
│ ├── App.tsx # The React UI for your popup
│ └── index.html # Entry HTML
├── background.ts # Service worker (background logic)
├── content.ts # Content script logic
├── sidepanel/ # Side panel UI (if selected)
└── style.css # Global styles (Tailwind directives)
wxt.config.ts # WXT configuration fileimport { browser } from 'wxt/browser', just use browser.runtime.sendMessage(...) anywhere in your code. It's globally available.Chrome extensions require explicit permissions to access browser features. Common permissions include:
| Permission | Use Case |
|---|---|
| storage | Save user preferences and data locally |
| tabs | Access current tab URL, open/close tabs |
| activeTab | Run scripts on the current page when clicked |
| notifications | Show browser notifications |
| alarms | Schedule recurring tasks and timers |
| contextMenus | Add items to the right-click menu |
Extension Forge integrates with state-of-the-art AI models to power intelligent features within your extensions. You can choose between Cloud Providers (via OpenRouter or Direct API) and Native AI (for total privacy and offline capability).
We use a Bring Your Own Key approach. The AI functionality behaves differently depending on whether it's used for Generation (making the extension) or Runtime (inside the extension).
Configure your keys in the Settings menu of Extension Forge. These keys are stored locally in your browser and used only to write the code.
If you want your extension to call AI models (e.g. valid "Summarize this page"), follow these steps:
.env file in the code editor.OPENAI_API_KEY).# .env file example (inside generated project)
VITE_OPENAI_API_KEY=sk-...
VITE_GEMINI_API_KEY=AIza...
VITE_ANTHROPIC_API_KEY=sk-ant-...After generating your extension, use the Refinement Console to make iterative improvements. Simply describe what you want to change and the AI will update your code.
Click Export to download your extension as a ZIP file.
chrome://extensions in your browsernpm install and npm run build first, then load the dist/ or .output/chrome-mv3 folder.Projects generated by Extension Forge use modern web technologies:
my-extension/
├── manifest.json # Extension configuration
├── popup.html # Main popup interface
├── popup.js # Popup logic
├── popup.css # Popup styles
├── background.js # Service worker (background tasks)
├── content.js # Content script (page injection)
└── icons/ # Extension iconsCheck chrome://extensions for error messages. Common issues: missing manifest.json, syntax errors in JSON, or incorrect file paths.
Verify the matches pattern in manifest.json. Try "*://*/*" for all sites, or specific patterns like "*://example.com/*".
Ensure storage permission is enabled. Use chrome.storage.sync or chrome.storage.local to save data.
This is normal behavior—popups close when focus is lost. For persistent UI, consider using a side panel instead.
Manifest V3 strictly forbids inline JavaScript (e.g., `<button onclick="...">`). All logic must be in separate `.js` or `.tsx` files. Extension Forge automatically handles this by bundling your code.
Background scripts in Manifest V3 (Service Workers) go to sleep after ~30 seconds of inactivity.Do not use global variables to store state; use `chrome.storage` instead. Events (like alarms or listeners) will wake up the worker.
Still have questions?
Check our FAQ