Skip to content

biohacker0/BookmarkAgentExtension

Repository files navigation

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)

alt text alt text alt text

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

About

A Chrome browser extension agent that automatically organizes your bookmarks using AI categorization

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages