I Rebuilt Glasp in 9 Minutes — Here's the Prompt

The tool we rebuilt

Glasp is a social highlighter and note-taking tool. You highlight passages on any webpage, the highlights persist across visits, and they're stored in a personal library you can search, tag, and (optionally) share publicly. The social layer is the differentiator — you can follow other people, see their highlights, discover what knowledge workers and researchers are reading.

The pricing is $8/month for Premium, which removes limits on highlight count and adds AI features (Glasp uses AI to summarize highlights and suggest related content).

The core functionality — highlight, save, search — is straightforward. The social layer and the AI features are where Glasp's value lives beyond pure highlighting. The interesting question for the rebuild is what you actually need.

If you want the social layer (following other researchers, public profile, discovery), Glasp's value is real and rebuildable only with backend infrastructure that's out of scope for a Chrome extension. If you want private highlighting that persists across web reading, the rebuild is straightforward and the cost case is strong: storage-only highlights mean no API costs at all beyond the PlugThis subscription.

What I built

A Chrome extension that lets you highlight text on any webpage with three colors (yellow, green, pink), saves them persistently to a local library, restores highlights when you revisit a page, and provides a searchable view of all saved highlights across all sites.

It took 9 minutes to build. The core functionality is pure DOM manipulation plus chrome.storage — no AI API calls, no external services, no backend. The result is a working Manifest V3 extension with about 280 lines of code.

Output: 4 files (manifest, content script, content CSS, popup for the library view). No external dependencies.

The prompt I used

A few notes on the prompt:

The "text matching, not XPath" requirement matters. XPath is fragile — any minor DOM change (a navigation update, a sidebar addition, a new dynamic element) breaks the path. Text matching is robust: find the highlighted phrase in the current page, wrap it. Works across page redesigns.

The export to Markdown is a small detail with big implications. Glasp users frequently want to export their highlights to Notion, Obsidian, or Roam Research. Markdown is the universal interchange format. Without this, the highlights are trapped in the extension.

The choice not to include a social layer (following other users, public profiles, etc.) is deliberate. Building a social network in a Chrome extension would require backend infrastructure that's out of scope. The rebuild focuses on the personal-knowledge-management value, not the social-discovery value.

How it works

The architecture is simpler than the AI rebuilds — no service worker API calls, just DOM manipulation and chrome.storage.

Content script is the workhorse. On page load, it:

1. Reads chrome.storage.local for any highlights matching the current URL
2. For each saved highlight, finds the text in the current page and wraps it in a colored <span> element
3. Listens for selectionchange events to know when the user has selected text

When the user right-clicks on a selection, the context menu options come from the contextMenus API (registered in the background script's onInstalled handler). When a menu item is clicked, the background script sends a message to the content script with the chosen color.

The content script then:

1. Wraps the selected text in a span with the chosen color
2. Saves the highlight to chrome.storage.local with structure:

{
  id: 'highlight-12345',
  url: 'https://example.com/article',
  pageTitle: 'How Chrome extensions work',
  text: 'The selected text here',
  color: 'yellow',
  note: '',
  createdAt: '2026-06-08T14:32:00Z'
}

When the user revisits the page, the content script reads all highlights matching that URL and re-wraps the matching text on the page. This uses a simple text-search algorithm: walk the DOM tree, find text nodes containing the highlighted phrase, wrap them.

Popup page is the library. It loads all highlights from chrome.storage.local on open, groups them by source page (URL), and renders them as expandable sections. Each section header shows the page title and URL; expanding shows the highlights for that page.

The search uses simple substring matching (case-insensitive) across the highlight text, page title, and notes. Filter chips toggle which colors and date ranges are visible.

Export to Markdown loops through highlights grouped by source and writes:

# How Chrome extensions work
[https://example.com/article](https://example.com/article)

> The selected text here
> 
> _My note about this highlight_

> Another highlight from the same page

Export to JSON dumps the raw chrome.storage.local contents in a downloadable file.

Background service worker is minimal — just registers the context menu items on install and forwards menu clicks to the content script.

That's the entire extension. No external services. No API costs. The infrastructure scales to thousands of highlights with no degradation (chrome.storage.local handles up to 10MB without the unlimitedStorage permission, which fits many thousands of highlights).

Cost breakdown — the strongest cost case in the series

For users who want only the personal-knowledge value of Glasp (highlighting, searching, exporting), the math is the cleanest in the rebuild series: PlugThis Starter at $29/month vs Glasp Premium at $8/month, with no ongoing API costs.

The headline price is higher than Glasp. But two things shift the math:

One extension covers the whole feature set. PlugThis Starter includes one extension. If you only need this one, you're paying $29/month for ownership of unlimited highlighting forever. Glasp at $8/month never stops.

No usage caps. Glasp's free tier limits highlight count. Premium removes that, but you're paying ongoing for "permission to highlight more." The rebuild has no caps because there's no central service to limit.

If you'd otherwise pay for PlugThis Starter for another extension anyway, the marginal cost of adding this one is effectively $0. In that case the rebuild is dramatically cheaper than Glasp.

If you specifically want Glasp's social layer (following other readers, public profile), the rebuild doesn't replace that. Continue with Glasp.

Side-by-side feature comparison

The honest read: if you value the social discovery and the public profile, Glasp is the better choice — the rebuild can't replicate those without backend infrastructure. If you want private personal-knowledge management with full ownership, the rebuild is the more durable choice.

Customization ideas

More colors and styles. Add unlimited custom highlight colors, plus styles like underline, strikethrough, dashed border. Each is a CSS class addition.

Tagging system. Add a tags field to each highlight. Use tags for organization (research/inspiration/quote-bank) and filter the library by tag. Stored as tags: ['research', 'ai'] in the highlight object.

AI-summarized digest. Add an optional weekly digest that uses GPT-4 to summarize the highlights you saved that week. One API call per week, ~$0.10/month. The most useful AI feature, easy to add.

Cross-highlight connections. Use AI to find conceptual links between highlights from different sources. "These three highlights all touch on attention economics" — useful for research workflows.

Notion/Obsidian sync. Auto-export new highlights to a Notion database or Obsidian vault via their APIs. The Notion API integration is straightforward; Obsidian needs a custom file watcher.

Highlight-to-tweet. Right-click any saved highlight → "Share as quote tweet" with proper attribution. Useful for content creators who quote-tweet research.

Reading time tracking. Track time spent on pages where you highlighted. Surface "you spent 47 minutes reading and saved 8 highlights from this article" as engagement metrics.

Each is a small addition. The core highlight infrastructure handles them.

Try it yourself

Drop the prompt above into PlugThis, load the extension into Chrome via chrome://extensions/, and start highlighting. No API key setup needed — the core functionality is pure local storage.

If you want to add AI features later (summarization, tagging, connections), modify the prompt before generating or add follow-on prompts to extend the base extension.

Related reading

• Glasp alternatives — structured comparison — competitor analysis
• I rebuilt Liner in 11 minutes — similar approach for a different highlighter
• I rebuilt Notion Web Clipper — Notion-integrated saving
• The complete Chrome extension building guide — how Chrome extensions work technically

The Glasp rebuild is the strongest cost case in the series — no API costs, no caps, full ownership. For users who want personal-knowledge management without the social layer, the rebuild is the more durable choice. For users who specifically value the social discovery, stay with Glasp.