Obsidian Web Clipper Bookmarklet with full Markdown support for images, headings, and code blocks

Share & showcase
1

EDIT: The official Obsidian Web Clipper is now available and can be downloaded for all major browsers:

My Web Clipper bookmarklet is an alternative to the MarkDownload Extension. It uses a bookmark to create a new file in Obsidian. Bookmarklets work across browsers and can sync across devices if you sync your bookmarks.

This bookmarklet supports both clipping the entire page, or just a selection. Here’s a 90 second demo of how it works:

You can find the code on Gist. To install the Web Clipper copy the code into the URL field of a bookmark.

52 Likes
2

This is so incredibly useful.

Note: If you don’t clip a selection but the whole page, it uses the browser’s “Reading View” which might cut out some images and even the whole text if it is rather short (i.e. short poems, quotes, etc.).

In that case, @kepano told me to use a selcetion instead, or just Ctrl+A to mark the whole page and cut the rest off in Obsidian.

Thanks for sharing this, @kepano!

N.B.: Just realized, the syncing between browsers actually put the Clippy onto my dektop. How neat is that!

2 Likes
3

thanks - unfortunately it doesn’t work on Obsidian Mobile.

It will open OR if already open switch to Obsidian Mobile but it doesn’t create any file.

4

It’s working for me on iOS. Which OS and browser are you using? Also can you tell me if the title of the page has any special characters?

1 Like
5

Not working on …
Chromebook
92.0.4515.130 (Official Build) (64-bit)
Android Obsidian Mobile 1.0.3
///////
Working on Android phone when clipping entire page
I have now tested your bookmarklet on my Android phone & getting the whole page is working fine - apologies, I really should have tested that before commenting.
Selection clipping not working as …
… when I go to the omnibox to select the bookmarklet from the dropdown(there is no bookmarks bar) the selection I made gets unselected and I wind up with the whole page.

6

Can someone with Vivaldi check this out please? It does not seem to be working for me.

7

Try re-install Obsidian with the newest version from https://obsidian.md/ .

That worked for me.

8

Thank you for sharing this useful code.

Now, the clippings goes to the same folder of "now opened’ note.
I’d like to know if I can assign the location for MD files.

9

I have a Vivaldi problem I think rather than an Obsidian issue. The bookmarklet is working perfectly with Edge and Chrome, just not Vivaldi.

10

Try looking in the developer console to see if any errors pop up when you trigger the bookmarklet.

The bookmarklet is definitely designed for people with a bit more programming experience. You can always try the MarkDownload extension as an alternative.

11

This shows up in Vivaldi’s dev console when I try to use the script:

image
image957×538 32.4 KB

12

It seems that Vivaldi is complaining because the bookmarklet is accessing JS packages from the web (the unpkg.com links). You could try to include the code from those JS packages into the bookmarklet itself to prevent those calls, or try other Obsidian bookmarklets that don’t rely at all on external resources — however those don’t handle formatting AFAIK.

13

This gives an error on Linux Ubuntu Chrome:
22068:1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://unpkg.com/[email protected]?module

14

Not for me either on vivaldi

15

I’ve updated the web clipper bookmarklet code with the following improvements:

  • Added optional variables for vault name, folder name and tags
  • Added detection and removal of illegal characters for Windows file names
  • Cleaned up the code to make it easier to edit the file template

Note that this bookmarklet may not work for all websites and browsers. Take a look at MarkDownload extension and Send to Obsidian for alternatives that may work better for your setup.

5 Likes
16

I was in the middle of typing a question about folder selection when you posted the updates.
Excellent additions @kepano!

17

We’re working on the boundaries here anyway: Older browsers don’t know how to, newer ones like Vivaldi simply reject for security reasons, the dynamic loading of modules in bookmarklets.

Still a very creative idea, and well done, for browsers that allow this.

(Once the browser devs learn what we do here, they’ll probably stitch this potential security hole very fast …)

1 Like
18

Yes, it would be easy to bake those modules in, but I wanted to keep the code relatively readable and editable for those who want to edit it. I haven’t run into many sites that block it so far.

1 Like
19

Isn’t there, though, a limit on bookmarklet length which would make it difficult to bake those modules in? I know I ran into this with a bookmarklet to tag and save stuff to pinboard and had to rewrite it as an extension (which brings its own problems on mobile)

1 Like
20

Hello! this is awesome! Is it possible to highlight the content, keep it on the clipboard and have jt paste it all to obsidian?
Something like this Bento - streamlined workflow for taking notes whi…: https://youtu.be/9CKbMDmf-Rw