SearchMyMarks (BookmarkOS Architecture)

SearchMyMarks is a production-ready Manifest V3 Chrome extension implementing the BookmarkOS architecture: fast bookmark search, pinning, full tree navigation, duplicate detection, domain grouping, and usage analytics.

Setup

Requirements

• Chrome (current stable)
• Node.js 18+

Install dependencies

npm install

Load unpacked extension

1. Open chrome://extensions.
2. Enable Developer mode.
3. Click Load unpacked.
4. Select this project folder.
5. Pin the extension and open the popup.

Build for distribution

npm run build

Build artifacts are emitted to dist/.

Development workflow

1. Update source files in project root and utils/.
2. Run npm run build.
3. In chrome://extensions, click Reload on SearchMyMarks.
4. Validate popup, tree.html, and analytics.html flows.

Project structure

Searchmymarks/
├─ manifest.json
├─ background.js
├─ popup.html
├─ popup.js
├─ popup.css
├─ tree.html
├─ tree.js
├─ tree.css
├─ analytics.html
├─ analytics.js
├─ analytics.css
├─ utils/
│  ├─ search.js
│  ├─ storage.js
│  ├─ treeBuilder.js
│  ├─ duplicateDetector.js
│  └─ domainGrouping.js
├─ build.mjs
├─ icons/
├─ Task.md
└─ README.md

Architecture decisions

• Modular utilities: core logic is split into utils/ for ranking/search, storage schema handling, tree building, duplicate detection, and domain grouping.
• Service worker orchestration: background.js is the source of truth for bookmark indexing, open tracking, pinning, and data endpoints for popup/tree/analytics.
• Storage-first MV3 design: state is persisted in chrome.storage.local to survive service-worker restarts.
• Tree performance: tree rendering uses DocumentFragment, lazy folder child rendering, and requestAnimationFrame for expand/collapse transitions.

Implemented features

Popup search system

• Bookmark index fields: id, title, url, path, usageCount, pinned.
• Search matches title, URL, and folder path (case-insensitive substring).
• Debounced input at 150ms.
• Ranking order: exact title, title prefix, title word match, URL/path match.
• View sorting applied after ranking: A–Z, Z–A, Most Used.
• Pinned results are surfaced at the top.

Usage and pin system

• Opening bookmarks through extension increments usage counts.
• Pin/unpin supported from popup and tree.
• Persisted storage schema:

{
  "bookmarks": [],
  "usageStats": {
    "bookmarkId": 0
  },
  "pinned": []
}

Full tree view (tree.html)

• Hierarchical recursive folder rendering.
• Expand/collapse chevrons with smooth transition.
• Expand all / collapse all actions.
• Search within tree auto-expands matching branches.
• Domain grouping mode toggle.
• Duplicate groups with delete confirmation.
• Responsive layout with tree panel and preview panel.

Analytics dashboard (analytics.html)

• Total bookmarks count.
• Most used bookmark, domain, and folder.
• Top 10 bookmarks table.
• Top 5 domains table.

Permission justification

• bookmarks: required to read bookmark tree data, search bookmarks, and delete duplicate bookmarks selected by the user.
• storage: required to store local index cache, usage stats, and pinned bookmark IDs.
• tabs: required to open bookmarks in current/new/background tabs and open extension pages (tree.html, analytics.html) in new tabs.

Privacy statement

SearchMyMarks processes bookmarks locally in the browser. No bookmark content, usage stats, or pinned state is sent to remote servers.

Chrome Web Store submission notes

Package checklist

• Run npm run build and upload contents of dist/.
• Include icons (16, 48, 128).
• Provide screenshots of popup, tree view, duplicates section, and analytics dashboard.

Listing notes

• Clearly document local-only processing in privacy description.
• Include permission rationale for bookmarks, storage, and tabs.
• Mention keyboard support in popup (arrow keys, Enter, Ctrl+Enter).