What is Bookmarks Grid?

Bookmarks Grid is a Chrome extension that takes over the new tab page and turns it into a keyboard-first bookmark manager. Instead of hunting through Chrome's bookmark bar or the default new tab, every bookmark you have is laid out in a responsive grid — one keystroke away from search, one click away from your destination.

It's the tool you reach for when Chrome's built-in bookmark UX starts feeling like friction.

The Problem It Solves

Chrome's bookmark experience hasn't changed in years. The bookmark bar fits a handful of items. The bookmark manager is a buried list. Folders are tedious to navigate. The new tab page is wasted space.

Bookmarks Grid flips all of that: open a new tab and your entire bookmark library is already there, organized by folder, searchable instantly, and fully operable without touching a mouse.

Core Features

Folder tabs

All top-level bookmark folders are rendered as tabs at the top of the page. Switching between them is a single click — no dropdowns, no nested navigation.

Instant search

Press ⌘K (or Ctrl+K) to focus the search input. Type any part of a bookmark's title or URL and the grid filters in real time. The shortcut works from anywhere on the page.

Drag-and-drop reorder

Bookmarks can be rearranged by dragging within a folder. The order is persisted back to Chrome via the bookmarks API — not just a local preference. Keyboard navigation is also supported while dragging via arrow keys.

Full CRUD

Every bookmark operation is available without leaving the new tab:

• New bookmark — press N or click the add button, fill the form, done
• Edit — hover a card and press E, or right-click for the context menu
• Delete — hover a card and press Backspace, or use the context menu
• Confirm delete — a confirmation dialog prevents accidental removals

Smart favicons

Each bookmark card shows the site's favicon. The extension tries to fetch it from DuckDuckGo first, falls back to Google's favicon service, and if both fail renders a generic SVG icon. No blank squares.

Dark mode

Toggle between light and dark themes with the button in the top-right corner. The preference is saved to localStorage and survives browser restarts.

Keyboard Shortcuts

How It Works

The extension replaces Chrome's newtab page via the chrome_url_overrides manifest field. All data comes directly from chrome.bookmarks.* — there is no backend, no sync service, and no data ever leaves the browser.

Custom hooks encapsulate each concern:

• useBookmarks — fetches the full bookmark tree, flattens it per folder, and filters by the active search query
• useFavicons — resolves favicons in parallel with a DuckDuckGo → Google → SVG fallback chain
• useDarkMode — reads and persists the theme preference
• useSearchShortcut — attaches the ⌘K / Ctrl+K listener and forwards focus to the search ref
• useBookmarkShortcuts — attaches E and Backspace hotkeys to the currently hovered card

Drag-and-drop is powered by @dnd-kit, which provides both pointer and keyboard sensors out of the box. On drop, chrome.bookmarks.move() is called to persist the new position.

Installation

1. Clone the repository and install dependencies:

git clone https://github.com/fernandobelotto/bookmarks-grid
cd bookmarks-grid
npm install

2. Build the extension:

npm run build

3. Open chrome://extensions/, enable Developer mode, click Load unpacked, and select the dist/ folder.

4. Open a new tab.

For development with live reload:

npm run dev   # vite build --watch

After each change, click the reload icon on the extension card in chrome://extensions/.

Tech Stack

• React 18 + TypeScript 5 — component model and type safety
• Vite 5 — fast builds with watch mode for development
• Tailwind CSS 3 — utility-first styling, dark mode via class strategy
• shadcn/ui — accessible dialog, tabs, input, and button primitives built on Radix UI
• @dnd-kit — drag-and-drop with pointer and keyboard sensor support
• react-hotkeys-hook — declarative keyboard shortcut binding
• Lucide React — icon set

Design Philosophy

One screen, zero config. All state lives in Chrome's bookmarks API or localStorage. No accounts, no cloud, no telemetry. The extension does exactly one job — give you a better new tab — and tries to stay completely out of the way otherwise.