A Chromium extension for browsing and managing your Karakeep bookmarks directly in the browser — not just saving them. Inspired by Raindrop.io.
Karakeep is an excellent self-hosted bookmark manager! Its server is solid, its API is clean, well documented, easy to work with, and its Docker setup is painless. But the official browser extension is too minimalist for a longtime Raindrop.io paid subscriber like me. This extension acts as a mini Karakeep app directly in its own panel or browser-sidebar, keeping Karakeep as the backend and replacing only the frontend layer.
An 800×600 panel (opens from the toolbar icon) or as a persistent sidebar (right-click the toolbar icon → Open sidebar, or use the sidebar toggle in the extensions panel). Both modes display the same interface — the sidebar adapts to the available height. The divider between the two columns is draggable to adjust their widths.
- Left panel — navigation sidebar with Lucide icons
- Upper section contains shortcuts to: All bookmarks, Favourites, Archived, Unsorted (bookmarks not in any collection)
- Full collection tree with list drag & drop (move to child or back to root)
- Create root-level and nested collections, rename, change icon, delete
- Right panel — bookmark list with thumbnails, domain, description, tags
- Search bar (full Karakeep query language:
is:fav,title:,url:,is:broken, etc. supported) - Hover action bar: edit / favourite / archive / delete (with confirmation popup)
- Drag & drop bookmarks onto a collection in the left panel (move or copy)
- Click a bookmark → opens URL in new tab
- Edit button → opens detail panel (editable title, URL, note)
- Top "Add bookmark" button → opens empty save popup centered on screen
- Paginated with "Load more"
- Search bar (full Karakeep query language:
Opens on toolbar click, right-click menu, or "+ Add" button:
- Pre-fills title and URL from the active tab or blank for manual input from the extension
- Collection picker with full tree navigation (supports deselect → save to root)
- Tag autocomplete for existing tags and create new tags on the fly
- Detects if the page is already bookmarked and displays a warning banner before saving
- Server connection using the server URL and either (like the official extension):
- login and password
- API key previously generated on the server
- Badge tracker toggle (shows already saved tab indicator per tab with a green dot on the extension icon like the official extension)
- API key automatically revoked server side when the extension is logged out (like the official extension)
Right-click any page → opens the save popup to select the destination list (like the official extension)
| Layer | Choice |
|---|---|
| UI | React 19 + TypeScript |
| Styling | Tailwind CSS v4 |
| Components | Base UI (Shadcn variant, no Radix dependency) + Lucide icons |
| Build | Vite + vite-plugin-web-extension |
| Extension API | Manifest V3 (Chrome / Edge / Brave) |
| Backend | Karakeep REST API + tRPC |
No UI framework heavier than Base UI. No Redux. State lives in React (useState / useCallback / useEffect).
├── manifest.json # MV3 manifest
├── src/
│ ├── background.ts # Service worker — context menu, badge, tab check
│ ├── lib/
│ │ ├── karakeep.ts # All API calls (REST + tRPC)
│ │ └── settings.ts # chrome.storage.sync wrapper
│ └── components/
│ ├── ListSelector.tsx # Recursive collection tree with drag & drop
│ └── CollectionPicker.tsx # Dropdown tree for save popup
├── browser/ # Browser panel & sidebar (shared codebase)
│ ├── App.tsx
│ ├── popup.html # Entry point for toolbar popup (fixed 800×600)
│ ├── index.html # Entry point for sidebar (fills available height)
│ ├── BookmarkDetail.tsx
│ └── AuthImage.tsx # fetch+blob for Bearer-protected assets
├── save/ # Save popup (context menu & Add button)
│ └── App.tsx
└── options/ # Settings page
└── SettingsPage.tsx
The browser panel, sidebar, save popup and options page are independent Vite entry points, all built into dist/.
- A running Karakeep instance (self-hosted via Docker or regular Karakeep server)
- Node.js ≥ 18
- Chromium based browser
- Karakeep running in Docker (localhost)
- Karakeep self-hosted on a remote server
- Karakeep Cloud (free hosted instance)
Pre-built releases are available on the Releases page.
Download the latest karakeep-compact-vX.X.X.zip, unzip it, then follow the Load in Chrome steps below.
npm install
npm run build- Go to
chrome://extensions - Enable Developer mode
- Click Load unpacked → select the
distfolder - Open Settings (Karakeep Compact → Settings)
- Enter your Karakeep server URL and API key or login and password
The search bar passes queries directly to Karakeep's bookmarks.searchBookmarks tRPC endpoint. The full query language is supported:
is:fav → favourited bookmarks
is:archived → archived bookmarks
is:broken → bookmarks with dead links
title:"docker" → exact title match
url:github.com → filter by domain
tag:devops → filter by tag
after:2025-01-01 → added after date
docker is:fav → combine freely
Note: the REST
?query=parameter is silently ignored by Karakeep — only the tRPC endpoint returns filtered results.
No known missing features at this point. The extension covers all my daily use cases.
Potential future additions:
- Tag editing in the detail panel
- Sort order toggle (by date, title…)
- Grid view vs list view
- Karakeep server reachable from the browser (local or remote via HTTPS)
- Karakeep server credentials (login and password or valid API key generated on the server)
Select the destination list before saving the bookmark in a treeview
Warning (light or dark) before saving a duplicate (in case you did not see the green dot on the extension’s icon)
Actions on bookmarks lists in the extension
Full browser sidebar option
Configuration and options
Server address
Authentication via login and password, or using an API key generated on the server
Theme selection and badge toggle
Drag and drop to copy or move bookmarks from a list to another, with confirmation
Edit, (un)favourite, (un)archive or delete bookmarks
Bookmark edit
