Fragmentum is a Chrome extension that helps you collect multiple text highlights from any webpage and compile them into a single shareable URL. When someone opens the link, their browser automatically scrolls to and highlights all the selected passages.
Built on the W3C Text Fragments standard (#:~:text=...).
- Multi-Highlight Collection — Save multiple text highlights per page
- One-Click Compilation — Combine all highlights into a single shareable URL
- Native Browser Integration — Uses Chrome's built-in "Copy link to highlight" feature
- Clean Interface — Minimal, focused popup UI
-
Clone this repository:
git clone https://github.com/yourusername/fragmentum.git cd fragmentum -
Install dependencies and build:
pnpm install pnpm build
-
Load the extension:
- Open Chrome and go to
chrome://extensions/ - Enable Developer mode (top right toggle)
- Click Load unpacked and select the project folder
- Open Chrome and go to
| Step | Action |
|---|---|
| 1 | Select text on any webpage |
| 2 | Right-click → "Copy link to highlight" |
| 3 | Open the Fragmentum popup |
| 4 | Paste the link and click Add |
| 5 | Repeat for more highlights |
| 6 | Click Compile & Copy to get your shareable URL |
- Node.js 18+
- pnpm
pnpm install # Install dependencies
pnpm dev # Watch mode
pnpm build # Production build
pnpm test # Run tests
pnpm typecheck # Type checkingsrc/
├── background.ts # Service worker & storage
├── popup/ # Extension popup UI
├── services/
│ ├── fragment/ # Text fragment utilities
│ ├── compile.service # URL compilation
│ └── storage.service # Chrome storage wrapper
├── contracts/ # TypeScript interfaces
└── constants/ # Configuration
| Browser | Support |
|---|---|
| Chrome 80+ | Full |
| Edge 80+ | Full |
| Opera 67+ | Full |
| Firefox | Navigate only* |
| Safari | Not supported |
*Firefox can navigate to text fragment URLs but cannot generate them natively.
MIT