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

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

That worked for me.

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.

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

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.

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

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.

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

Not for me either on vivaldi

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.

4 Likes

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

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 …)

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

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)

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

A bookmarklet is probably not the best way to implement this functionality. Perhaps this feature could be added to an extension like MarkDownload. Maybe there are other extensions out there that do what you’re looking for. This Bento app seems like it should be compatible with Obsidian since it outputs markdown, but looks like it’s only for Android.

Thanks for this great idea, but it does nothing for me. not getting that notification that shows in the demo and nothing happens in my vault. I am on win7, maybe that is a problem :frowning:

Do you see any errors in the dev console?

I am not sure where to look in it tbh,

the notification now appears. but i can’t find any note in my vault. the new note should be created like i am creating a new note, right? my setting is to be place in the current note’s folder

I am not sure. It can be tricky to troubleshoot this because there are several variables that affect the bookmarklet (browser, OS, website you’re on, and title of the page). You might want to try out the MarkDownload extension as it is a bit more user friendly if you don’t want to poke around in the javascript.

1 Like

i am following that plugin from the start , and eventho it is a good solution it doesn’t always work and recently i can’t download images with it for some unknown reason. there was another similar bookmarklet that used clipboard for the output i use at the moment. your plugin is a great improvement over that. I will try to troubleshoot the problem tomorrow.

on a side note, eventho I don’t know java, today, I was trying to modify that bookmarklet to get my desired metadata from youtube pages ( to use with yaml and dataview). can you guide me on how to get more metadata for that? I know that document.title gets the title of the page and window.location.href gets the url. I am specially like to get the channel name and video duration from that.