Obsidian Web Clipper

English | 中文

A browser extension based on the LLM Wiki concept that clips web pages to Obsidian as Markdown. Supports Chrome / Edge (Chromium).

Core Concept

Extends Karpathy's LLM Wiki "capture-compile-accumulate" workflow into a complete personal knowledge capture system:

• raw/ — Save original web content (immutable source)
• wiki/ — Compiled, structured knowledge articles
• Template System — Customize output format

Features

• 🎯 Smart content extraction (Mozilla Readability algorithm)
• 📝 HTML → Markdown conversion (Turndown)
• 🏷️ Auto-extract tags and metadata
• 📁 Save directly to Obsidian Vault via File System Access API, or to browser downloads
• 🎨 Customizable templates
• 🛡️ XSS protection with DOMPurify
• 💾 Image localization support

Installation

Load the Extension

1. Open Chrome/Edge and navigate to chrome://extensions/ or edge://extensions/
2. Enable "Developer mode" (top right)
3. Click "Load unpacked"
4. Select the obsidian-web-clipper folder

Configure Vault Directory

1. Click the extension icon, then click ⚙️ Settings
2. Click "Select Vault Directory" and choose your Obsidian Vault folder
3. Configure default save folder and template
4. Click "Save Settings"

Note: If no Vault directory is selected, files will be saved to the browser's default download directory.

Usage

1. Browse any webpage
2. Click the extension icon
3. Preview the extracted content
4. Choose save location and template
5. Add tags (optional)
6. Click "Save to Obsidian"

Project Structure

obsidian-web-clipper/
├── manifest.json           # Extension manifest
├── background/
│   └── service-worker.js   # Service worker (MV3)
├── content-script/
│   └── content-collector.js # Content extraction
├── popup/
│   ├── popup.html         # Popup window
│   ├── popup.css
│   └── popup.js
├── options/
│   ├── options.html       # Settings page
│   ├── options.css
│   └── options.js
├── templates/             # Note templates
│   ├── raw-template.md
│   ├── article-template.md
│   └── archive-template.md
├── lib/                   # Third-party libraries (browser bundle)
├── patches/               # Documentation for lib modifications
├── tests/                 # Test files
└── icons/
    ├── icon-48.png
    └── icon-128.png

Template Variables

Variable	Description
{{title}}	Article title
{{url}}	Original URL
{{date}}	Capture date
{{author}}	Author
{{content}}	Body content
{{excerpt}}	Excerpt/summary
{{tags}}	Tag list
{{siteName}}	Site name

Troubleshooting

File Permission Errors

• Ensure the vault path has write permissions
• Windows: Run browser as administrator
• Linux/Mac: Check folder permissions

Content Extraction Fails

• Some sites have anti-scraping measures and may not extract completely
• Use the fallback copy-to-clipboard option

Development

Tech Stack

• Manifest V3 (MV3)
• Service Worker
• Content Script
• File System Access API
• IndexedDB

Build

# No build step required — load as unpacked extension directly

Testing

npm test

License

MIT

References

• Karpathy LLM Wiki
• Obsidian Web Clipper (stephango.com)
• Chrome Extension Docs
• Microsoft Edge Extension Docs