Gemini AI Sidebar

Adds a sidebar panel where you can chat with Gemini about the page you are viewing.

Runs on Chrome, Edge, Firefox · Manifest V3 · Surfaces: sidebar, content script, popup, background service worker · Styling: CSS · Level: beginner · Framework: react

Create this project

npx extension@latest create my-ai-gemini --template ai-gemini
cd my-ai-gemini
npm install
npm run dev

What it is for

  • Chat with the active tab's content using Gemini
  • Summarize or question articles, docs, and dashboards in place
  • Starting point for page-aware Gemini extensions

First steps

  • Run npm run dev to launch the extension
  • Open any web page and click the extension icon to open the sidebar
  • Enter your Gemini API key (from aistudio.google.com)
  • Ask Gemini about the active tab, and the content script feeds the page text into the conversation

Permissions it asks for

  • sidePanel
  • storage
  • activeTab
  • scripting
  • tabs
  • <all_urls>

Source on GitHubDocumentation

extension.devDocumentation for extension.dev