AI Bookmark Organizer Extension

A Chrome browser extension that automatically organizes your bookmarks using AI categorization powered by Claude 3.5 Sonnet.

Features

• 🤖 AI-Powered Categorization: Uses Claude 3.5 Sonnet to intelligently categorize bookmarks
• 📁 Automatic Folder Creation: Creates organized folder structure in your browser bookmarks
• 🔄 Real-time Progress Tracking: Shows detailed progress during the organization process
• 💾 Local Storage: API key stored securely in browser storage
• 🚫 No Server Required: Everything runs client-side in your browser
• 📊 Comprehensive Logging: Detailed console logs for debugging and monitoring

Installation

Option 1: Load Unpacked Extension (Recommended for Development)

1. Build the Extension:

   cd extension
   npm install
   npm run build

2. Load in Chrome:

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

3. Setup API Key:

   • Click the extension icon in your browser toolbar
   • Enter your Anthropic API key (get one from console.anthropic.com)
   • Click "Save API Key"

Option 2: Package for Distribution

1. Create Extension Package:

   cd extension
   npm run build
   # Zip the dist folder contents for upload to Chrome Web Store

Usage

1. Start Organization:

   • Click the extension icon
   • Click "🚀 Start Auto-Categorization"

2. Monitor Progress:

   • Watch the progress bar and step indicators
   • Review console logs for detailed processing information

3. Apply Results:

   • When processing completes, click "📁 Apply to Bookmarks"
   • This creates an "AI Organized" folder with categorized subfolders

Development

Scripts

• npm run dev - Build in development mode with watch
• npm run build - Build for production
• npm run build:dev - Build for development (one-time)

Project Structure

extension/
├── src/
│   ├── popup/          # Extension popup UI (React)
│   ├── background/     # Service worker
│   └── utils/          # Utility functions
├── dist/               # Built extension files
├── scripts/            # Build scripts
└── package.json        # Dependencies

Key Files

• manifest.json: Extension configuration and permissions
• src/popup/App.js: Main React component for the UI
• src/utils/bookmarkProcessor.js: Core bookmark processing logic
• src/utils/storage.js: IndexedDB and Chrome storage utilities
• src/background/background.js: Service worker for extension lifecycle

Technical Details

Processing Pipeline

1. Parsing (5-10%): Collect bookmarks from browser using Chrome API
2. Content Analysis (10-60%): Fetch and analyze webpage content
3. AI Categorization (60-95%): Use Claude 3.5 to categorize bookmarks into folders
4. Export (95-100%): Create organized folder structure

Dependencies

• React 18: UI framework
• Tailwind CSS: Styling
• Webpack 5: Bundling
• Chrome Extensions API: Browser integration
• Anthropic API: AI categorization

CORS Handling

The extension handles CORS issues by:

• Using the anthropic-dangerous-direct-browser-access header
• Leveraging browser extension permissions for cross-origin requests
• Running entirely client-side without a proxy server

Troubleshooting

Common Issues

1. API Errors: Check console logs for detailed error messages
2. CORS Issues: Ensure the extension has proper host permissions
3. Storage Issues: IndexedDB errors will fallback to simplified categorization
4. Rate Limiting: Extension includes automatic rate limiting for API calls

Console Logging

The extension provides comprehensive logging with emoji indicators:

• 🚀 Process start
• 📚 Bookmark collection
• 🔍 Content analysis
• 🤖 AI processing
• 📁 Folder creation
• ✅ Success
• ❌ Errors

Check the browser console (F12) for detailed logs during processing.

License

MIT License - Feel free to modify and distribute.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

API Key Security

• API keys are stored locally in Chrome's secure storage
• Keys are never transmitted to any server except Anthropic's official API
• No telemetry or analytics are collected