obsidianmd/obsidian-clipper

Obsidian Web Clipper helps you highlight and capture the web in your favorite browser. Anything you save is stored as durable Markdown files that you can read offline, and preserve for the long term.

• Download Web Clipper
• Documentation
• Troubleshooting

Install the extension by downloading it from the official directory for your browser:

• Chrome Web Store for Chrome, Brave, Arc, Orion, and other Chromium-based browsers.
• Firefox Add-Ons for Firefox and Firefox Mobile.
• Safari Extensions for macOS, iOS, and iPadOS.
• Edge Add-Ons for Microsoft Edge.

Documentation is available on the Obsidian Help site, which covers how to use highlighting, templates, variables, filters, and more.

User documentation is maintained in the en/Obsidian Web Clipper directory of obsidian-help.

You can help translate Web Clipper into your language. Submit your translation via pull request using the format found in the /_locales folder.

See the help wanted tag for issues where contributions are welcome.

In no particular order:

• Annotate highlights
• Template directory
• Sync settings across browsers
• A separate icon for Web Clipper (1.6.3)
• Template validation (1.1.0)
• Template logic (if/for) (1.1.0)
• Save images locally (Obsidian 1.8.0)
• Translate UI into more languages — help is welcomed

To build the extension:

npm run build

This will create three directories:

• dist/ for the Chromium version
• dist_firefox/ for the Firefox version
• dist_safari/ for the Safari version

For Chromium browsers, such as Chrome, Brave, Edge, and Arc:

1. Open your browser and navigate to chrome://extensions
2. Enable Developer mode
3. Click Load unpacked and select the dist directory

For Firefox:

1. Open Firefox and navigate to about:debugging#/runtime/this-firefox
2. Click Load Temporary Add-on
3. Navigate to the dist_firefox directory and select the manifest.json file

If you want to run the extension permanently you can do so with the Nightly or Developer versions of Firefox.

1. Type about:config in the URL bar
2. In the Search box type xpinstall.signatures.required
3. Double-click the preference, or right-click and select "Toggle", to set it to false.
4. Go to about:addons > gear icon > Install Add-on From File…

For iOS Simulator testing on macOS:

1. Run npm run build to build the extension
2. Open xcode/Obsidian Web Clipper/Obsidian Web Clipper.xcodeproj in Xcode
3. Select the Obsidian Web Clipper (iOS) scheme from the scheme selector
4. Choose an iOS Simulator device and click Run to build and launch the app
5. Once the app is running on the simulator, open Safari
6. Navigate to a webpage and tap the Extensions button in Safari to access the Web Clipper extension

npm test

Or run in watch mode during development:

npm run test:watch

• webextension-polyfill for browser compatibility
• defuddle for content extraction and Markdown conversion
• dayjs for date parsing and formatting
• lz-string to compress templates to reduce storage space
• lucide for icons
• dompurify for sanitizing HTML

Obsidian Web Clipper source code is open source under the MIT License. All trademarks, icons, marketing copy, and other marketing assets are excluded from that license.