An intelligent Chrome extension powered by Google's Gemini AI that provides real-time conversational assistance directly in your browser.
Chrome Assistant is a browser extension that brings the power of Google's Gemini AI directly into your Chrome browsing experience. It provides an intelligent chat interface through both a popup window and a side panel, allowing you to get instant answers, summaries, code help, and creative assistance without leaving your browser.
Think of it as your personal AI companion that lives in your browser—always ready to help with research, writing, coding, or simply answering questions while you browse.
- 💬 Real-time AI Chat - Stream responses from Gemini AI with markdown support
- 🎨 Dual Interface - Access via popup (Ctrl+Shift+0) or expandable side panel
- 🌓 Dark/Light Theme - Beautiful, customizable themes with persistent preferences
- 📝 Markdown Rendering - Rich text formatting with syntax highlighting for code
- 💾 Conversation Memory - Maintains chat history across sessions
- 🎯 Context-Aware - Uses embeddings for semantic search through conversation history
- ⚡ Streaming Responses - See AI responses as they're generated in real-time
- 🔧 Chrome Integration - Deep integration with Chrome APIs for seamless experience
Chrome-Assistant/
├── public/ # Static assets & extension files
│ ├── manifest.json # Chrome extension manifest (v3)
│ ├── background.js # Service worker for extension lifecycle
│ ├── content.js # Content script for page interaction
│ ├── key.js # API key configuration
│ ├── index.html # Popup entry point
│ └── sidePanel.html # Side panel entry point
├── src/
│ ├── components/ # React components
│ │ ├── Chat.js # Chat message display
│ │ ├── MarkdownRender.js # Markdown & code highlighting
│ │ ├── Popup.js # Main popup interface
│ │ ├── Prompt.js # Input & chat logic
│ │ ├── sidepanel.js # Side panel interface
│ │ ├── ThemeContext.js # Theme management
│ │ └── welcome.js # Welcome screen
│ ├── utilities/ # Helper functions
│ │ ├── chromeApiUtilities.js # Chrome API wrappers
│ │ ├── Embedding.js # HuggingFace embeddings
│ │ ├── getAiModal.js # Gemini AI initialization
│ │ └── promptsResponse.js # AI response streaming
│ ├── index.js # Popup entry point
│ ├── sidePanel.js # Side panel entry point
│ └── index.css # Global styles
├── webpack.config.js # Build configuration
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS configuration
└── package.json # Dependencies & scripts
┌─────────────────────────────────────┐
│ Chrome Extension APIs │
│ (Background, Tabs, Storage, etc.) │
└──────────────┬──────────────────────┘
│
┌──────────────▼──────────────────────┐
│ Background Service Worker │
│ • Message routing │
│ • Conversation memory │
│ • Side panel management │
└──────────────┬──────────────────────┘
│
┌──────┴──────┐
│ │
┌───────▼─────┐ ┌───▼──────────┐
│ Popup UI │ │ Side Panel │
│ (700px) │ │ (Expandable)│
└───────┬─────┘ └───┬──────────┘
│ │
└──────┬─────┘
│
┌──────────────▼──────────────────────┐
│ Shared Components │
│ • Prompt (input handler) │
│ • Chat (message display) │
│ • MarkdownRenderer │
│ • ThemeContext │
└──────────────┬──────────────────────┘
│
┌──────┴──────┐
│ │
┌───────▼─────┐ ┌───▼──────────────┐
│ Gemini AI │ │ HuggingFace │
│ (Gemini │ │ (Embeddings for │
│ 1.5 Pro) │ │ semantic search)│
└─────────────┘ └──────────────────┘
- React 18.3.1 - UI framework
- Tailwind CSS 3.4.6 - Utility-first styling
- React Markdown - Markdown rendering with GFM support
- React Syntax Highlighter - Code syntax highlighting
- Material-UI (Emotion) - Styled components
- Google Generative AI (Gemini 1.5 Pro) - Main AI model
- HuggingFace Inference - Text embeddings (e5-small-v2 model)
- Webpack 5.93.0 - Module bundler
- Babel - JavaScript transpiler
- PostCSS & Autoprefixer - CSS processing
chrome.runtime- Message passing & extension lifecyclechrome.storage- Persistent data storagechrome.sidePanel- Side panel managementchrome.tabs- Tab interactionschrome.scripting- Content script injection
- Node.js (v14 or higher)
- npm or yarn
- Google Chrome browser
- Your own API keys (you'll be prompted to enter them on first run)
- Gemini API Key - Get it here
- HuggingFace API Key - Get it here
-
Clone the repository
git clone https://github.com/NotGyashu/Chrome-Assistant.git cd Chrome-Assistant -
Install dependencies
npm install
-
Build the extension
npm run build
This creates a production build in the
dist/directory. -
Load the extension in Chrome
- Open Chrome and navigate to
chrome://extensions/ - Enable Developer mode (toggle in top-right corner)
- Click Load unpacked
- Select the
dist/folder from your project directory - The extension should now appear in your extensions list
- Open Chrome and navigate to
-
Setup your API keys (First Run Only)
- Click the extension icon or use the keyboard shortcut (Ctrl+Shift+0)
- You'll see a setup screen requesting your API keys
- Enter your Gemini API key (starts with "AI")
- Enter your HuggingFace API key (starts with "hf_")
- Click "Save and Continue"
- Your keys are stored securely in Chrome's encrypted storage
- You only need to do this once - keys sync across your devices
⚠️ Security Note: Your API keys are stored locally in your browser using Chrome's secure storage. They are never sent to our servers or shared with third parties. Only you have access to your keys.
For live development with hot reloading:
npm startThis starts the webpack dev server at http://localhost:8080. Note: You'll still need to load the extension in Chrome manually.
npm run buildGenerates optimized production files in dist/ directory.
-
Popup Interface
- Click the extension icon in Chrome toolbar, or
- Use keyboard shortcut:
Ctrl+Shift+0(Windows/Linux) orCmd+Shift+0(Mac)
-
Side Panel
- Click the "📂 Panel" button in the popup to expand to side panel
- Provides more screen space for longer conversations
-
Starting a Conversation
- Type your question or prompt in the input field
- Press Enter or click the send button (➤)
- Watch as AI responses stream in real-time
-
Managing Your API Keys
- Click the "⚙️ Settings" button in the header
- Update your Gemini or HuggingFace API keys
- Clear keys if needed (will require re-entering on next use)
-
Theme Toggle
- Click "☀️ Light" or "🌙 Dark" button to switch themes
- Theme preference is saved locally
The extension requires two API keys to function:
-
Gemini API Key (for AI responses)
- Get it from: https://makersuite.google.com/app/apikey
- Free tier available with generous quotas
-
HuggingFace API Key (for text embeddings)
- Get it from: https://huggingface.co/settings/tokens
- Free tier available
First-Time Setup:
- On first launch, you'll see a setup screen
- Enter both API keys
- Keys are validated before saving
- Stored securely in Chrome's encrypted storage
- Synced across your Chrome profile
Updating Keys:
- Click the ⚙️ Settings button
- Update either or both keys
- Changes take effect immediately
Security Features:
- ✅ Keys stored using Chrome's secure storage API
- ✅ Keys encrypted by Chrome
- ✅ Keys never sent to third-party servers (except API providers)
- ✅ Keys never in source code or extension bundle
- ✅ You control your own keys
No environment variables needed! All configuration is done through the UI on first run.
Edit src/utilities/getAiModal.js to adjust:
const generationConfig = {
temperature: 1, // Creativity (0.0 - 2.0)
topP: 0.95, // Nucleus sampling
topK: 64, // Top-K sampling
};Edit public/manifest.json to add/remove Chrome permissions:
{
"permissions": [
"activeTab",
"scripting",
"tabs",
"storage",
"sidePanel",
"contextMenus"
]
}Themes are configured in tailwind.config.js:
theme: {
extend: {
colors: {
theme: {
light: {
primary: '#2563EB',
secondary: '#BFDBFE',
background: '#F8FAFC',
text: '#1E293B',
accent: '#1D4ED8',
error: '#DC2626'
},
dark: {
primary: '#1D4ED8',
secondary: '#1E3A8A',
background: '#0F172A',
text: '#F8FAFC',
accent: '#60A5FA',
error: '#EF4444'
}
}
}
}
}- Uses async generators for real-time streaming from Gemini API
- Average response latency: ~500ms for first token
- Full response time depends on complexity and length
- Conversation history stored in chrome.storage.local (up to 10MB)
- Embeddings cached for semantic similarity search
- Background service worker auto-sleeps when inactive
- Responses are streamed chunk-by-chunk to reduce perceived latency
- Markdown rendering is optimized with React memoization
- Tailwind CSS purges unused styles in production build
- Multi-tab Context - Analyze content from multiple tabs
- Voice Input - Speech-to-text for hands-free interaction
- Export Conversations - Save chats as PDF/Markdown
- Custom Prompts - User-defined prompt templates
- Web Search Integration - Enhance responses with real-time web data
- Model Selection - Switch between different AI models
- Collaborative Features - Share conversations with others
- Improve context window management for longer conversations
- Add support for image analysis (Gemini Vision)
- Implement conversation branching/forking
- Add keyboard shortcuts for common actions
- Better error handling and retry mechanisms
- Add usage analytics dashboard
- Migrate to Manifest V3 best practices
- Add comprehensive unit tests (Jest + React Testing Library)
- Implement proper TypeScript support
- Add end-to-end tests (Playwright)
- Optimize bundle size (code splitting)
- Add CI/CD pipeline for automated releases
We welcome contributions! Here's how you can help:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Make your changes
- Commit with clear messages
git commit -m "Add: Amazing new feature" - Push to your fork
git push origin feature/amazing-feature
- Open a Pull Request
- Use ES6+ syntax
- Follow React best practices (hooks, functional components)
- Use Tailwind CSS for styling (avoid inline styles)
- Write descriptive variable names
- Add comments for complex logic
- Keep components small and focused
Type: Brief description
Types:
- Add: New feature
- Fix: Bug fix
- Update: Modify existing feature
- Remove: Delete feature/code
- Refactor: Code restructuring
- Docs: Documentation changes
- Style: Formatting changes
Before submitting:
- Test in both light and dark themes
- Verify popup and side panel work correctly
- Check console for errors
- Test with different prompt types
- Ensure build succeeds:
npm run build
- 📖 Improving documentation
- 🐛 Bug fixes and testing
- 🎨 UI/UX enhancements
- 🌐 Internationalization (i18n)
- ♿ Accessibility improvements
- 🧪 Writing tests
This project is licensed under the ISC License.
ISC License
Copyright (c) 2024 Gyashu Rahman
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
- Google Generative AI - Gemini AI model
- HuggingFace - Text embeddings
- React - UI framework
- Tailwind CSS - Styling
- Marked.js - Markdown parsing
- React Syntax Highlighter - Code highlighting
Gyashu Rahman (@NotGyashu)
- The Chrome Extensions team for excellent documentation
- The open-source community for amazing tools and libraries
- Everyone who tests and provides feedback
Made with ❤️ by Gyashu Rahman
If you find this helpful, please ⭐ star the repo!