Build a Chrome Side Panel Extension with AI (MV3, 2026)

A side panel stays open next to the page while you browse, unlike a popup that closes on the first click outside. That makes it a good fit for an AI helper: summarize the page, explain a selection, ask a question. This guide sets up a Manifest V3 side panel, opens it from the toolbar icon and the right-click menu, and sends page text to an AI endpoint you choose.

Side panel or popup?

Step 1: The manifest

The side panel needs the sidePanel permission and a default page (chrome.sidePanel API; available from Chrome 114, MV3 only):

{
  "manifest_version": 3,
  "name": "My AI side panel",
  "version": "0.1.0",
  "action": { "default_title": "Open side panel" },
  "side_panel": { "default_path": "sidepanel.html" },
  "background": { "service_worker": "background.js" },
  "permissions": ["sidePanel", "activeTab", "scripting", "contextMenus", "storage"]
}

Ask only for what you use. activeTab gives access to the current tab after the user clicks, not to every site.

Step 2: Open the panel on icon click

// background.js
chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));

Step 3: Open it from the right-click menu

chrome.sidePanel.open() exists since Chrome 116 and may only run in response to a user action, such as a context-menu click:

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({ id: "explain", title: "Explain selection", contexts: ["selection"] });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "explain" && tab?.windowId !== undefined) {
    chrome.sidePanel.open({ windowId: tab.windowId });
    chrome.storage.session.set({ pendingSelection: info.selectionText ?? "" });
  }
});

The panel reads pendingSelection from chrome.storage.session when it loads.

Step 4: Read the page and ask the AI, only after the user confirms

// sidepanel.js
async function askAboutPage(question) {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const [{ result: pageText }] = await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: () => document.body.innerText.slice(0, 20000),
  });

  // Show your own confirmation in the panel UI (a dialog or button) before anything leaves the browser.
  if (!(await userConfirms({ title: tab.title, url: tab.url, chars: pageText.length }))) return;

  const { endpoint, model, apiKey } = await chrome.storage.local.get(["endpoint", "model", "apiKey"]);
  const res = await fetch(`${endpoint}/chat/completions`, {
    method: "POST",
    headers: { "Content-Type": "application/json", ...(apiKey ? { Authorization: `Bearer ${apiKey}` } : {}) },
    body: JSON.stringify({
      model,
      messages: [
        { role: "system", content: "Answer briefly based on the page text." },
        { role: "user", content: `${question}\n\nURL: ${tab.url}\n\n${pageText}` },
      ],
    }),
  });
  return (await res.json()).choices?.[0]?.message?.content;
}

This uses the OpenAI-style /chat/completions format, which many local and hosted model servers also offer. Check your provider's docs. Your extension also needs permission to reach that address: add it to host_permissions or request it at runtime with chrome.permissions.request.

Step 5: Load it unpacked

Open chrome://extensions, turn on Developer mode, click Load unpacked and pick your folder. With a framework like WXT, a sidepanel/index.html entrypoint becomes the side panel and WXT writes the manifest entry for you.

Good habits for an AI side panel

• Confirm before every send. Show what leaves the browser: title, URL, text, selection.
• Mark AI answers. A short note under each answer: AI can be wrong.
• Keep keys local. Store the endpoint and key in chrome.storage.local, never in the code.
• API costs are on the user. Say so in the options page.

AI Side Panel Extension Starter for Chrome

The AI Side Panel Extension Starter for Chrome is a template with automated tests for your own side panel extension. Per the product page: Manifest V3 with WXT, React and TypeScript; a side panel with a confirmation before every send and an AI notice under every answer; right-click entries "Summarize page" and "Explain selection"; an options page for endpoint, model and API key; DE/EN texts, a privacy policy template, README and install guide. You enter the AI address yourself (local Ollama or an OpenAI-compatible API); no AI model is included, API costs are yours, and no data goes to Aramac. Compatibility: Chrome and Chromium-based browsers, version 116 or later; build with Node.js 22.13 or newer. Price: €29 incl. VAT. Licence: personal, non-commercial use; a free, non-commercial Chrome Web Store listing of your own extension is allowed (no ads, no paid features, no data sale), publishing the starter itself is not (licence). Not affiliated with Google LLC. Chrome is a trademark of Google LLC.

Common problems

• Side panel doesn't open on icon click: setPanelBehavior({ openPanelOnActionClick: true }) isn't called, or the manifest has no action key.
• sidePanel.open() throws: it ran outside a user gesture. Call it directly in the click handler.
• Side panel disappears on some tabs: a tab-specific setOptions({ enabled: false }) is active for that tab.
• Fetch to the AI fails: the extension lacks host permission for the endpoint, or the local model server blocks the extension's origin.

FAQ

Which Chrome version supports the side panel API?
The chrome.sidePanel API needs Chrome 114 and Manifest V3. sidePanel.open() needs Chrome 116.

Can I use a local model instead of a cloud API?
Yes, if your local server offers an HTTP API your code can call, for example an OpenAI-compatible endpoint. The AI Side Panel Starter supports local Ollama or an OpenAI-compatible API.

Does the side panel work in other browsers?
The AI Side Panel Starter lists Chrome and Chromium-based browsers from version 116. Check each browser's own docs for its side panel support.

Is the AI Side Panel Starter a subscription?
No. €29 incl. VAT, paid once, delivered as a ZIP. API costs for your model are separate.

Can I publish my extension in the Chrome Web Store?
Under the licence, yes: free and non-commercial, without ads, paid features or data sales. Publishing the starter itself as a template, or building extensions for clients or employers, is not allowed.

Related guides

• Vibe coding templates
• Connect an MCP server to ChatGPT
• German version: Chrome-Extension mit Side Panel erstellen

→ Get the AI Side Panel Starter for €29

_Not affiliated with or endorsed by Google LLC. Chrome is a trademark of Google LLC._