A Chrome browser extension that automatically organizes your bookmarks using AI categorization powered by Claude 3.5 Sonnet.
- π€ 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
-
Build the Extension:
cd extension npm install npm run build
-
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
- Open Chrome and go to
-
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"
- Create Extension Package:
cd extension npm run build # Zip the dist folder contents for upload to Chrome Web Store
-
Start Organization:
- Click the extension icon
- Click "π Start Auto-Categorization"
-
Monitor Progress:
- Watch the progress bar and step indicators
- Review console logs for detailed processing information
-
Apply Results:
- When processing completes, click "π Apply to Bookmarks"
- This creates an "AI Organized" folder with categorized subfolders
npm run dev
- Build in development mode with watchnpm run build
- Build for productionnpm run build:dev
- Build for development (one-time)
extension/
βββ src/
β βββ popup/ # Extension popup UI (React)
β βββ background/ # Service worker
β βββ utils/ # Utility functions
βββ dist/ # Built extension files
βββ scripts/ # Build scripts
βββ package.json # Dependencies
- 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
- Parsing (5-10%): Collect bookmarks from browser using Chrome API
- Content Analysis (10-60%): Fetch and analyze webpage content
- AI Categorization (60-95%): Use Claude 3.5 to categorize bookmarks into folders
- Export (95-100%): Create organized folder structure
- React 18: UI framework
- Tailwind CSS: Styling
- Webpack 5: Bundling
- Chrome Extensions API: Browser integration
- Anthropic API: AI categorization
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
- API Errors: Check console logs for detailed error messages
- CORS Issues: Ensure the extension has proper host permissions
- Storage Issues: IndexedDB errors will fallback to simplified categorization
- Rate Limiting: Extension includes automatic rate limiting for API calls
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.
MIT License - Feel free to modify and distribute.
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
- 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