A Chrome Extension that brings AI capabilities directly to your browsing experience with a sleek side panel interface.

• 🤖 Chrome Built-in AI Integration - Uses Chrome's native Summarizer API
• 📄 Smart Page Summarization - Instantly summarize any webpage
• 💬 Contextual Chat - Ask questions about the current page
• 🔗 Google Workspace Integration (Coming Soon) - Connect Gmail, Drive, and Calendar
• 💾 Local History - Your conversations are stored locally and privately
• ⌨️ Keyboard Shortcut - Toggle the panel with Ctrl+Shift+Y (or Cmd+Shift+Y on Mac)

• Chrome 129+ with AI features enabled
• Node.js & npm installed

1. Clone this repository

git clone <YOUR_GIT_URL>
cd Contextua

2. Install dependencies

npm install

3. Build the extension

npm run build

4. Load in Chrome

   • Open Chrome and go to chrome://extensions/
   • Enable "Developer mode" (top right)
   • Click "Load unpacked"
   • Select the dist folder from this project

5. Use Contextua

   • Click the Contextua icon in your toolbar
   • Or press Ctrl+Shift+Y (Mac: Cmd+Shift+Y)

Manifest V3 Structure:

• manifest.json - Extension configuration with permissions
• background.js - Service worker for message brokering
• content.js - Content script for page text extraction
• index.html - Side panel UI (React app)

AI Integration:

• Currently uses Chrome Built-in AI Summarizer API (on-device)
• All processing happens locally in your browser
• No data is sent to external servers

Message Flow:

1. User clicks "Summarize This Page"
2. Side panel requests context via background worker
3. Content script extracts page URL and text
4. Background worker calls Chrome AI Summarizer
5. Summary is displayed in chat interface

• ChatMessage - Individual message bubble component
• ChatInput - Message composer with context indicator
• ActionChip - Quick action buttons (Summarize, Connect, etc.)
• useChromeStorage - Hook for local storage (with fallback)
• useChromeMessaging - Hook for Chrome extension messaging

Contextua/
├── public/
│   ├── manifest.json      # Extension manifest
│   ├── background.js      # Service worker
│   ├── content.js         # Content script
│   └── icon-*.png         # Extension icons
├── src/
│   ├── components/        # React components
│   │   ├── ChatMessage.tsx
│   │   ├── ChatInput.tsx
│   │   └── ActionChip.tsx
│   ├── hooks/            # Custom hooks
│   │   ├── useChromeStorage.ts
│   │   └── useChromeMessaging.ts
│   ├── pages/
│   │   └── Index.tsx     # Main side panel UI
│   └── index.css         # Design system
└── README.md

• React - UI framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• shadcn/ui - UI components
• Chrome APIs - Extension functionality
• Chrome Built-in AI - Summarization

To use Chrome's Built-in AI features:

1. Use Chrome 129 or later
2. Enable AI features in chrome://flags:
   • Search for "Summarization API"
   • Enable the flag
   • Restart Chrome

• ✅ Side panel chat interface
• ✅ Page summarization with Chrome AI
• ✅ Local message history
• ✅ Basic page context extraction
• 🚧 Google Workspace OAuth

• Full Gmail/Drive/Calendar integration
• Multi-tab context reasoning
• Advanced AI routing (Writer, Translator, etc.)
• Cloud sync for history
• Custom AI model selection

Contextua is privacy-first:

• All AI processing happens on-device (Chrome Built-in AI)
• Message history stored locally in your browser
• No data sent to external servers
• Google Workspace connection (when enabled) requires explicit OAuth consent

# Install dependencies
npm install

# Start dev server (for UI development)
npm run dev

# Build extension
npm run build

# Type checking
npm run type-check

Contributions are welcome! Please feel free to submit a Pull Request.

MIT License - See LICENSE file for details

Built with ❤️ for privacy-first browsing.