AI Sidebar Chrome Extension

Chrome extension yang menyediakan AI assistant di sidebar browser dengan fleksibilitas penuh untuk menggunakan AI provider dan API key sendiri.

🚀 Features

Core Features

• Always-on Sidebar: Persistent AI assistant di browser sidebar
• Multi-Provider Support: OpenAI, Anthropic, OpenRouter
• Smart Context Awareness: Otomatis aware dengan konten halaman
• Chat History: Persistent storage dengan IndexedDB
• Quick Actions: One-click untuk explain, summarize, translate, improve
• Keyboard Shortcuts: Alt+Shift+A (toggle sidebar), Alt+A (quick ask)
• Secure API Key Storage: Enkripsi lokal, tidak ada server

Performance

• Target RAM: 15-25MB (optimized for performance)
• Startup Time: <500ms
• Streaming Responses: Real-time AI responses
• Smart Caching: Efficient memory management

📁 Project Structure

AI Sidebar/
├── manifest.json          # Chrome extension manifest
├── background.js          # Service worker
├── content.js            # Content script for page interaction
├── sidebar.html          # Main sidebar UI
├── sidebar.css           # Sidebar styles
├── sidebar.js            # Sidebar functionality
├── popup.html            # Quick settings popup
├── popup.js              # Popup functionality
├── icons/                # Extension icons
│   ├── icon-16.png
│   ├── icon-32.png
│   ├── icon-48.png
│   └── icon-128.png
└── README.md

🛠️ Installation

Development Installation

1. Clone atau download folder ini
2. Buka Chrome dan navigate ke chrome://extensions/
3. Enable "Developer mode" (toggle di kanan atas)
4. Click "Load unpacked"
5. Select folder "AI Sidebar"
6. Extension akan muncul di toolbar

Generate Icons

1. Buka icons/generate-icons.html di browser
2. Right-click setiap canvas dan save sebagai PNG dengan nama yang sesuai
3. Atau gunakan icon designer tool untuk membuat icon custom

⚙️ Configuration

Setup API Keys

1. Click extension icon di toolbar
2. Click "Settings" atau tekan icon ⚙️ di sidebar
3. Masukkan API key untuk provider yang diinginkan:
   • OpenAI: Get from platform.openai.com
   • Anthropic: Get from console.anthropic.com
   • OpenRouter: Get from openrouter.ai
4. Click "Save Settings"

Available Models

OpenAI:

• GPT-4 Turbo
• GPT-4
• GPT-3.5 Turbo

Anthropic:

• Claude 3 Opus
• Claude 3 Sonnet
• Claude 3 Haiku

OpenRouter:

• Multiple models from various providers
• GPT-4, Claude, Gemini, Llama, etc.

🎯 Usage

Basic Usage

1. Open Sidebar: Click extension icon atau tekan Alt+Shift+A
2. Select Text: Highlight text di webpage
3. Quick Actions: Use buttons untuk explain/summarize/translate
4. Chat: Type pertanyaan di input box

Keyboard Shortcuts

• Alt+Shift+A: Toggle sidebar
• Alt+A: Quick ask tentang selected text
• Enter: Send message
• Shift+Enter: New line in message

Context Menu

1. Select text di webpage
2. Right-click
3. Choose "Explain with AI", "Summarize with AI", atau "Translate with AI"

🔧 API Integration

Extension ini integrate dengan AI providers menggunakan REST APIs:

// OpenAI Example
const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: messages,
        stream: true
    })
});

📊 Memory Optimization

Extension ini dioptimasi untuk RAM usage minimal:

• Lazy loading untuk chat history
• Virtual scrolling untuk long conversations
• Smart caching dengan automatic cleanup
• Efficient DOM manipulation
• Stream responses tanpa accumulate di memory

🔒 Security

• API keys disimpan secara lokal dengan enkripsi sederhana
• Tidak ada data yang dikirim ke server eksternal selain AI providers
• Semua processing terjadi di browser user
• Support untuk self-hosted/local AI models

🐛 Troubleshooting

Extension tidak muncul

• Pastikan Chrome version 114+ (untuk sidePanel API)
• Check apakah extension enabled di chrome://extensions

API tidak responding

• Verify API key sudah benar
• Check koneksi internet
• Pastikan tidak ada rate limiting dari provider

High memory usage

• Clear chat history di settings
• Restart extension
• Limit response length di settings

🚧 Known Limitations

1. Streaming: Full streaming implementation memerlukan backend processing
2. Image Analysis: Requires multimodal models dan additional implementation
3. File Upload: Not yet implemented
4. Cross-device Sync: Currently local only

🔮 Future Enhancements

• Full streaming response implementation
• Image analysis dengan vision models
• File upload support
• Plugin system untuk custom actions
• Team sharing features
• Local AI model support (Ollama)
• Export chat ke various formats
• Advanced prompt templates
• Usage analytics dashboard

📝 Development Notes

Testing Locally

# No build process required
# Just load unpacked extension di Chrome

# Untuk debug:
# 1. Open Chrome DevTools di sidebar (right-click > Inspect)
# 2. Check background script: chrome://extensions > Service Worker "Inspect"
# 3. Check content script: Regular DevTools di webpage

Chrome APIs Used

• chrome.sidePanel - Sidebar functionality
• chrome.storage.local - Settings & chat storage
• chrome.contextMenus - Right-click menu
• chrome.commands - Keyboard shortcuts
• chrome.runtime - Message passing
• chrome.tabs - Tab interaction

📄 License

MIT License - Feel free to modify dan distribute

🤝 Contributing

Contributions welcome! Please feel free to submit pull requests atau open issues.

📧 Support

Jika ada pertanyaan atau butuh bantuan:

1. Check dokumentasi ini
2. Open issue di GitHub
3. Contact developer

---

Note: Extension ini masih dalam development. Some features mungkin belum fully implemented atau memerlukan additional configuration.