Memex

A modern bookmark manager that stays in real-time sync with your browser.

Built with React, TypeScript, and Tailwind CSS · Chrome Extension (Manifest V3)

---

Why Memex?

Named after Vannevar Bush's 1945 concept of a "memory extender" — Memex keeps your bookmarks organized, enriched, and always in sync with your browser.

Unlike traditional bookmark managers that store data in their own database, Memex reads and writes directly to your browser's native bookmark tree. No data lock-in, no sync issues — what you see is what your browser has.

---

Features

Core Real-time sync — changes reflect instantly via chrome.bookmarks API Full-page tab — opens as a dedicated browser tab, not a popup Folder tree — recursive sidebar with expand/collapse Custom icons — 150+ icons across 14 categories for folders	Organization Favorites — heart toggle on bookmarks and folders Tags — freeform tags on every bookmark Descriptions — add context to any bookmark Custom titles — rename without changing the URL
Power Features Export / Import — full JSON backup with metadata Filter by favourite — one-click view of starred items Filter by tag — type-ahead tag search Smart sort — folders first, then newest/oldest/A-Z	Design Indigo accent — clean, modern color system Favicon thumbnails — visual bookmark recognition Hover states — edit/delete reveal on hover Empty states — contextual messages per view

---

Screenshots

Folder tree — recursive navigation with search, breadcrumbs, and item counts

Card grid — search, favourite and tag filters, sorting, and the responsive grid

---

Tech Stack

Layer	Technology
UI	React 19, Tailwind CSS 4, shadcn/ui
Language	TypeScript 6
Build	Vite 8
Extension	Chrome Manifest V3, chrome.bookmarks API
Icons	Lucide React + custom icon picker
Lint	oxlint

---

Project Structure

bookmark-manager-v2/
├── public/
│   ├── logo.svg              # Extension logo
│   ├── icons/                # Extension icons (16/48/128)
│   └── favicon.svg
├── src/
│   ├── App.tsx               # Main UI (sidebar, header, grid)
│   ├── background/
│   │   └── service-worker.ts # Chrome bookmark event listeners
│   ├── components/
│   │   ├── bookmark-card.tsx  # Bookmark card with actions
│   │   ├── bookmark-form.tsx  # Add/edit form
│   │   ├── icon-picker.tsx    # 150+ icon selector
│   │   └── ui/               # shadcn components
│   ├── hooks/
│   │   └── use-browser-bookmarks.ts  # Core sync hook
│   ├── manager/
│   │   └── index.html        # Tab page entry
│   └── types/
│       └── bookmark.ts       # Type definitions
├── manifest.json             # Chrome Extension manifest
├── background.ts             # Service worker entry
└── package.json

---

Getting Started

Prerequisites

• Node.js 18+
• npm or pnpm
• Chrome, Edge, or Firefox

Development

# Clone
git clone https://github.com/yourusername/bookmark-manager-v2.git
cd bookmark-manager-v2

# Install
npm install

# Dev server (opens Vite dev server for hot reload)
npm run dev

Load Extension in Browser

See How to Use for per-browser instructions.

Production Build

npm run build

This outputs to dist/ — zip the contents for store upload.

---

Installation

From Source

1. Download or clone this repository
2. Run npm install && npm run build
3. Load the extension in your browser — see How to Use
4. Click the Memex icon to open in a new tab

From Web Store

Firefox — Memex on Firefox Add-ons

Chrome Web Store and Edge Add-ons listings are coming soon.

---

How to Use

Build the extension first with npm run build — this outputs everything needed to dist/.

Firefox

Easiest — install from the store:

1. Open the Memex add-on page
2. Click Add to Firefox and confirm

Or load a local build:

1. Run npm run build
2. Go to about:debugging#/runtime/this-firefox
3. Click Load Temporary Add-on…
4. Select dist/manifest.json

The extension is now loaded — click the Memex icon in the toolbar to open it.

Note: Firefox clears temporary add-ons when it closes. After a restart, load it again from the same page, or sign the build to install it permanently.

Other Browsers

Nothing yet.

---

How It Works

┌─────────────────────────────────────────────┐
│  Memex UI (React)                           │
│  ┌─────────┐  ┌──────────┐  ┌───────────┐  │
│  │ Sidebar │  │ Card Grid│  │ Form/Modal│  │
│  └────┬────┘  └────┬─────┘  └─────┬─────┘  │
│       │            │              │          │
│  ┌────▼────────────▼──────────────▼─────┐   │
│  │       useBrowserBookmarks Hook       │   │
│  │  • chrome.bookmarks CRUD             │   │
│  │  • chrome.storage for metadata       │   │
│  │  • Real-time event listeners         │   │
│  └──────────────────┬───────────────────┘   │
│                     │                       │
└─────────────────────┼───────────────────────┘
                      │
            ┌─────────▼─────────┐
            │  Chrome Bookmarks │
            │  (Native Storage) │
            └───────────────────┘

Two-layer storage:

• Chrome Bookmarks API — stores the actual bookmark tree (URL, title, folders)
• chrome.storage.local — stores enriched metadata (icons, favourites, tags, descriptions)

---

Development Commands

Command	Description
npm run dev	Start Vite dev server
npm run build	Production build to dist/
npm run lint	Run oxlint
npm run preview	Preview production build

---

Contributing

Contributions are welcome! Here's how:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

License

MIT © 2026

---

Built with care for the modern web.