Markvein - Web Highlights Extension

A minimal Chrome extension (Manifest V3) that lets you highlight text on any webpage, tag it, and search/browse everything from a popup dashboard. Fully offline - all data lives in chrome.storage.local. No backend, no API, no telemetry.

---

Install (Load unpacked)

1. Open Chrome and navigate to chrome://extensions.
2. Toggle Developer mode ON (top-right corner).
3. Click Load unpacked.
4. Select the unpacked-extension/ folder from this delivery.
5. The Markvein icon will appear in your Chrome toolbar. Pin it for quick access (click the puzzle icon → pin Markvein).

You're done. No restart required.

---

Usage

Save a highlight

1. Open any standard http:// or https:// webpage.
2. Select the text you want to save.
3. Right-click on the selection → Save Highlight.
4. An inline modal appears. Optionally add up to 3 tags, comma-separated (e.g. nlp, transformer, reference).
5. Press Enter or click Save highlight. The text is now highlighted on the page and stored locally.

Re-render on revisit

Close the tab, reopen the same URL - your highlights automatically re-appear.

Browse / search / delete

1. Click the Markvein icon in your Chrome toolbar.
2. The dashboard opens (400×500).
3. Highlights are grouped by domain, sorted newest first.
4. Type in the search bar to filter by keyword in the text/URL or by tag.
5. Hover any highlight and click the trash icon to delete it.
6. Click on a highlight's quote to open the original page in a new tab.

Export

Click the Export button (top-right of the dashboard) to download a .json file containing every saved highlight, matching this schema:

{
  "highlights": [
    {
      "url": "https://example.com/article",
      "text": "The highlighted text…",
      "tags": ["tag1", "tag2"],
      "timestamp": "2026-05-22T09:05:41.000Z"
    }
  ]
}

---

Customizing the brand color

All colors are defined as CSS variables in a single file:

unpacked-extension/styles/theme.css

To rebrand, change the values under :root - the popup, modal, buttons, focus rings, and tag chips will all update.

:root {
  --mv-brand:        #6366F1;   /* primary buttons, focus ring, accents */
  --mv-brand-hover:  #4F46E5;   /* primary button hover */
  --mv-brand-active: #4338CA;   /* primary button active */
  --mv-tag-bg:       #E0E7FF;   /* tag chip background */
  --mv-tag-text:     #4338CA;   /* tag chip text */
  --mv-highlight:    #FBBF24;   /* the <mark> background */
  --mv-highlight-alpha: 0.4;    /* highlight opacity (0–1) */
}

Reload the extension via chrome://extensions → Markvein → reload icon.

---

File structure

unpacked-extension/
├── manifest.json
├── service-worker.js          # background: context menu + messaging
├── content/
│   ├── content.js             # injected: modal, highlight, re-render
│   └── content.css            # injected: modal + <mark> styles
├── popup/
│   ├── popup.html             # 400×500 dashboard
│   ├── popup.js               # dashboard logic
│   └── popup.css              # dashboard styles
├── styles/
│   └── theme.css              # ⭐ single source of truth for brand colors
├── lib/
│   └── storage.js             # shared chrome.storage helpers
└── icons/
    ├── logo.svg
    ├── icon-16.png
    ├── icon-32.png
    ├── icon-48.png
    └── icon-128.png

---

Notes & limitations

• Works on standard http:// and https:// pages only. Chrome blocks extensions from running on chrome://, chrome-extension://, the Chrome Web Store, and similar restricted URLs.
• On revisit, a highlight is re-applied to the first occurrence of the saved text on the page (text-matching). If the text doesn't appear (page changed since save), the highlight is silently skipped - the data is still safe in storage.
• Tags are normalized to lowercase and trimmed. Max 3 per highlight.
• All data is local. Uninstalling the extension or clearing extension data will erase your highlights. Use Export to back up.