Jenny Wilson 
Browser extensions and AI are one of the most natural combinations in modern software. Extensions already live where users work — inside their browser, on the pages they are reading and writing. Adding AI to that context means helping users do things with information they are already looking at, rather than asking them to copy-paste content into a separate tool.
Here is how to architect an AI-powered extension correctly, including where to make the AI calls, how to handle streaming, and how to build a billing model that covers your API costs.
Where to Run AI Calls
The critical architecture decision for AI extensions is where the API call happens. You have three options:
Option 1: From the popup or sidebar directly
The popup or side panel can make fetch requests to OpenAI, Anthropic, or any other AI provider. This works technically, but exposes your API key in the extension source code. Anyone who installs your extension and unpacks it can find your key. At any meaningful user scale, this will result in key theft and unexpected API bills.
Only use this approach during development on your own machine, never for a shipped product.
Option 2: From the background service worker
The service worker can make fetch requests without CORS restrictions, and your API key can be bundled as an environment variable (it is still technically accessible to users who unpack the extension, but it requires more effort to find than a key in popup code).
This is a reasonable middle ground for early-stage products or low-risk use cases. The key is not server-side, but it is not trivially exposed.
Option 3: Through your backend
The most secure and scalable approach: the extension sends a request to your Supabase Edge Function or Firebase Cloud Function, which holds the API key server-side and makes the AI call. This also lets you implement per-user rate limiting, usage tracking for billing, and provider switching without re-deploying the extension.
For a SaaS product — where you are charging users partly to cover AI API costs — this is the correct approach. Your backend tracks usage, charges users appropriately, and your API key is never in the extension package.
Extracting Context from the Page
AI extensions are most useful when they can act on the content of the page the user is currently viewing. Content scripts are how you get that content.
A content script can:
- Read the page’s DOM and extract text, links, or structured data
- Observe mutations to respond to dynamic page changes
- Select and extract the user’s highlighted text via the
SelectionAPI - Read structured metadata (Open Graph, JSON-LD, article schema)
The content script sends the extracted content to the background service worker via a typed runtime message. The service worker forwards it to your backend or AI provider. This keeps the AI call out of the content script context, which has stricter security constraints.
Streaming Responses
For longer AI responses, streaming makes a significant UX difference. Instead of waiting 10–30 seconds for a complete response, the user sees text appearing as it is generated.
Streaming from your backend to the extension requires careful handling because service workers have a limited lifetime. The recommended pattern:
- The service worker opens a fetch stream to your backend
- As chunks arrive, the service worker forwards them via
chrome.runtime.sendMessageto the popup or side panel - The popup/side panel renders each chunk as it arrives
Side panels are particularly well-suited for streaming AI responses — they stay open while the user continues working in the browser, unlike popups which close when focus moves.
The Side Panel vs. Popup Decision
Chrome 114+ introduced the Side Panel API, which allows extensions to open a persistent panel on the right side of the browser window. For AI use cases, this is often better than a popup because:
- It stays open while the user reads or interacts with the page
- It has more vertical space for displaying long AI responses
- It does not require the user to re-open the extension for follow-up actions
Side panels are available in Chrome and Chromium-based browsers (Brave, Edge, Opera). Firefox does not currently support the Side Panel API — a consideration if you are targeting both browsers.
Billing for AI Usage
AI API costs mean you need to charge users, which makes the billing architecture critical. The pattern that works:
- Track AI usage per user in your database (Supabase or Firebase) on every API call
- Gate AI requests on the server: if the user has exceeded their monthly limit, return an error instead of making the AI call
- Offer tiered plans: free tier with X AI requests per month, paid tiers with higher or unlimited usage
- Use Stripe metered billing if you want to charge based on actual usage rather than a fixed plan
The billing part is where LightningAddon’s pre-wired Stripe integration is valuable — the checkout and portal flows are already working, so adding usage-based billing is a configuration change rather than a from-scratch implementation.
What Makes a Good AI Extension
The extensions that succeed in this space share a common pattern: they reduce friction for a specific, high-frequency action. Not “an AI assistant for everything,” but “AI-powered summarization for research papers” or “AI-powered reply drafting inside Gmail.”
The narrower your initial use case, the better your initial experience will be, and the easier it will be to explain to users why they should install your extension over a general-purpose AI tool.
Build the specific thing first. Expand once you have users who can tell you what they actually want next.
