feat(extension): Companion browser extension for Twitter web annotation

[ainergiz]

Summary

Create a browser extension using WXT that injects xfeed annotations into the Twitter/X web interface, enabling seamless annotation viewing and editing across terminal and web.

Context

xfeed allows users to annotate bookmarks with personal notes stored locally. A browser extension would:

• Display existing annotations inline on x.com/twitter.com
• Allow creating/editing annotations from the web UI
• Sync annotations between terminal app and browser

Depends on: #233 (Cloud sync for annotations)

Expected Behavior

Annotation Display

• Show annotation badge/icon on bookmarked tweets that have notes
• Hover or click to view full annotation text
• Visual indicator integrated naturally with Twitter's UI

Annotation Editing

• Click to add/edit annotation from web
• Syncs to cloud storage (same backend as xfeed)
• Changes reflect in terminal app on next load

Authentication

• Leverage existing x.com session (user already logged in)
• Or use simple API key for cloud sync backend

Potential Implementation

Tech Stack

• WXT (Web Extension Tools) - Modern extension framework
• React/Preact - UI components
• Shared types - Reuse annotation types from xfeed

Architecture

xfeed (terminal)  ←→  Cloud Storage  ←→  Browser Extension
     ↓                    ↑                    ↓
annotations.json    API/Sync Layer      Twitter Web UI

Key Components

1. Content Script - Injects into x.com, finds tweets, adds annotation UI
2. Background Script - Handles sync with cloud storage
3. Popup - Settings, sync status, quick annotation view
4. Shared Types - Import from xfeed for type consistency

File Structure (new repo or monorepo package)

packages/extension/
├── src/
│   ├── entrypoints/
│   │   ├── content.ts      # Inject into x.com
│   │   ├── background.ts   # Sync logic
│   │   └── popup/          # Extension popup
│   ├── components/
│   │   └── AnnotationBadge.tsx
│   └── lib/
│       └── sync.ts         # Cloud sync client
├── wxt.config.ts
└── package.json

Additional Context

WXT Benefits

• TypeScript-first
• Hot reload during development
• Manifest v3 support
• Built-in browser compatibility

Considerations

• Rate limiting for sync
• Offline support (cache annotations locally in extension)
• Privacy - annotations never sent to Twitter, only to user's cloud
• Conflict resolution when edited in both places

Related

• feat(annotations): Sync annotations with cloud storage #233 - Cloud sync (prerequisite)
• feat(bookmarks): Add filter/view for annotated bookmarks #234 - Filter annotated bookmarks
• feat: Add annotation support for bookmarks #136 - Original annotation feature