Overlay is a powerful Chrome extension that transforms your browsing experience through advanced AI capabilities. It leverages large language models (LLMs) to provide context-aware assistance, content analysis, task management, and note-taking as you browse the web. The extension integrates multiple AI models including OpenAI, Anthropic Claude, Google Gemini, and local Ollama models, giving users flexibility in their AI interactions and privacy preferences.
- ✅ Chrome Manifest V3 compatible
- ✅ Firefox compatible build pipeline
- ✅ Dark/Light theme support
- ✅ Sidepanel integration for AI chat and tools
- ✅ Responsive and modern UI design with Tailwind CSS
- ✅ Multiple language support (English, German, Spanish, French, Japanese, Korean, Russian, Chinese)
- ✅ Multi-model support
- OpenAI integration (GPT models)
- Anthropic Claude integration
- Google Gemini Pro integration
- Local model execution via Ollama
- Automatic model switching and persistence
- ✅ Custom model configuration
- Default model selection in options
- Dynamic model discovery
- Automatic retry mechanism for API rate limits
- ✅ Context-aware browsing assistance
- Interactive and conversational chat modes
- Image analysis via drag-and-drop
- Context menu integration for quick actions
- Webpage content analysis and summarization
- ✅ Advanced LLM capabilities
- Intelligent response generation based on web context
- Custom prompting system for targeted assistance
- Structured data extraction from webpages
- Semantic understanding of page content
- ✅ Chat interface with comprehensive conversation management
- ✅ Note-taking system
- Create notes from web content
- Save and organize information from any webpage
- View and manage notes through the side panel
- ✅ Task management
- Create tasks from web content
- Google Tasks integration on new tab page
- Step-by-step task breakdown for complex activities
- Progress tracking for identified tasks
- ✅ Calendar integration on new tab page
- ✅ Inspirational quotes on new tab page
- ✅ Customizable appearance settings
- ✅ Local model execution via Ollama for privacy-conscious users
- ✅ Secure API key storage
- ✅ Proxy mode for API requests
- ✅ No unnecessary data collection or tracking
- Install dependencies:
pnpm install-
Configure AI Models:
a. For Ollama (Local Models):
# Install recommended models ollama pull mistral # Great for general tasks ollama pull codellama # Specialized for code ollama pull phi # Fast and lightweight
b. For Cloud Models:
- OpenAI API key from OpenAI Platform
- Anthropic API key from Anthropic Console
- Gemini API key from Google AI Studio
- Add keys in the extension options
-
Start Ollama service with Chrome extension permissions:
OLLAMA_ORIGINS=chrome-extension://* ollama serveNote: The extension will automatically discover available models from all providers.
- Start development:
pnpm dev- Build for production:
pnpm build # For Chrome
pnpm build:firefox # For Firefoxoverlay/
├── chrome-extension/ # Chrome extension core
│ ├── src/ # Core extension code
│ │ └── background/ # Background service worker
├── packages/ # Shared packages
│ ├── dev-utils/ # Development utilities
│ ├── hmr/ # Hot module replacement
│ ├── shared/ # Shared components and utilities
│ ├── storage/ # Storage management
│ ├── ui/ # UI components
│ └── ...
└── pages/ # Extension pages
├── content/ # Content scripts for webpage interaction
├── content-runtime/ # Runtime script for content features
├── content-ui/ # UI components injected into webpages
├── popup/ # Popup UI with login functionality
├── side-panel/ # Sidepanel with AI chat and tools
├── options/ # Configuration page with multiple tabs
├── new-tab/ # Enhanced new tab with tasks and calendar
├── devtools/ # DevTools integration
└── devtools-panel/ # Custom panel for DevTools
pnpm dev- Start development serverpnpm dev:firefox- Start development server for Firefoxpnpm build- Build for Chrome productionpnpm build:firefox- Build for Firefox productionpnpm zip- Build and package Chrome extensionpnpm zip:firefox- Build and package Firefox extensionpnpm lint- Run lintingpnpm type-check- Type check all TypeScript filespnpm e2e- Run end-to-end tests
- Open Chrome and navigate to
chrome://extensions/ - Enable "Developer mode" in the top right
- Click "Load unpacked" and select the
distdirectory from this project - Pin the extension to your toolbar for easy access
- Open Firefox and navigate to
about:debugging#/runtime/this-firefox - Click "Load Temporary Add-on..."
- Select the
web-ext-artifactsdirectory and choose the ZIP file
- Click the extension icon in the toolbar to access the popup interface
- Use the side panel for AI chat and tools by clicking the side panel icon or using keyboard shortcuts
- Configure your preferred AI providers and settings in the options page
- Enjoy enhanced productivity with the custom new tab page
- Node.js >= 22.12.0
- pnpm 9.15.1+
- Chrome browser or Firefox
Overlay aims to fundamentally transform how users interact with web content by leveraging the power of large language models. Our vision is to create an intelligent companion that understands user intent, provides contextual assistance, and enhances productivity across the browsing experience.
- AI Chat Interface: Chat with multiple AI models right from your browser
- Image Analysis: Drag images directly to the side panel for AI analysis
- Task Management: Create, track, and complete tasks with Google Tasks integration
- Note-Taking: Save important information from webpages
- Calendar View: See upcoming events at a glance
- Custom New Tab: Enhanced productivity with tasks, calendar, and inspiration
- 🔮 Advanced webpage analysis with semantic understanding
- 🔮 Personalized assistance based on browsing patterns and preferences
- 🔮 Proactive information discovery and curation
- 🔮 Cross-page content correlation and knowledge synthesis
- 🔮 Fine-tuned domain-specific assistance for specialized workflows
- 🔮 Enhanced privacy-preserving local model integration
- 🔮 Additional productivity integrations with third-party services
- 🔮 Collaborative features for team productivity
We believe LLMs have the potential to create a more intuitive, efficient, and personalized web browsing experience that adapts to each user's unique needs and interests.
Commercial - See the LICENSE file for details.