Obsidian Web Clipper
2021
Web Clipper is a bookmarklet I made for Obsidian that saves articles and pages from the web as Markdown files in Obsidian. It is compatible with Safari, Chrome, Firefox, and mobile browsers.
Demo
Installation
Simply drag the “Clip in Obsidian” link below into your bookmarks. Then click the bookmark to clip the page. This will clip the page to your currently open vault and insert YAML metadata about the page automatically.
If you want to customize the file path and template for your clippings, you will need to edit the code from this Gist .
Optional file path variables can be found at the top of the code, and the template at the bottom. The default template is designed for use with the Dataview plugin. If you make changes I recommend using Bookmarklet Maker to minify and URI-encode the bookmarklet.
Usage
By default, clicking the bookmarklet creates a new Obsidian file from the main body of the article (similar to Readability view). Alternatively you can choose to create a file from a selection, by either selecting all (CMD+A), or just a portion of the page.
Downloading images for offline use
Any images in the content will be embedded as external references. If you want to download images locally you can use the Local Images plugin which allows you to download images for a note.
Troubleshooting
This bookmarklet may not work on all websites and browsers. You can troubleshoot issues by opening the Developer Console in your browser and checking if any errors appear when you click the bookmarklet.
The most common error is that a website or the browser itself is blocking third party code execution. This is commonly due to the connect-src Content Security Policy (CSP) used by some websites.
Community-led variations
- Aseel-Naji shared a fork that prompts the user for folder and extra tags
- ganesshkumar created a browser-based bookmarklet maker that helps you customize the output
- pioneerskies turned it into a web service that you can run on Heroku to bypass CSP restrictions
- Moonbase59 shared a fork that uses frontmatter rather than inline fields
Related
Tidy Reader is another bookmarklet I made that helps tidy up article pages to make them more readable in your browser.