ChatGPT AI Sidebar

Adds a sidebar panel where you can chat with ChatGPT 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-chatgpt --template ai-chatgpt
cd my-ai-chatgpt
npm install
npm run dev

Files in this template

  • extension.config.js
  • src/background.ts
  • src/components/ApiKeyForm.tsx
  • src/components/ChatInput.tsx
  • src/components/ChatMessage.tsx
  • src/components/ui/button.tsx
  • src/components/ui/card.tsx
  • src/components/ui/scroll-area.tsx
  • src/content/ContentApp.ts
  • src/content/scripts.ts
  • src/content/styles.css
  • src/images/icon.png
  • src/lib/client.ts
  • src/lib/page-context.ts
  • src/lib/utils.ts
  • src/manifest.json
  • src/sidebar/SidebarApp.tsx
  • src/sidebar/index.html
  • src/sidebar/scripts.tsx
  • src/sidebar/styles.css

Source on GitHubDocumentation

extension.devDocumentation for extension.dev