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

Huh. Rebooting my machine after installing Obsidian fixed it.

Hello @kepano and @Moonbase59 !!!

First of all, I wanna thank you for sharing this bookmarklet with us. The ability to save an URL in markdown at as specific folder is amazing and very important in many of my workflows. Thanks!

Iā€™m writing this message because I wanna share with you guys an idea that I have. Maybe this is something that you guys want to implement as a new feature.

I have a bunch of URL inside Obsidian (in notes) that I want to extract the content. Today I have to use the command Follow link under cursor to go to Safari and then use the bookmarklet to extract the content back to Obsidian.

A few days ago I saw this plugin at our community store: Javascript Init that gives us the feature of execute javascript scripts inside Obsidian.

Then I start to think: How about using this amazing bookmarklet to extract a URL content from Obsidian ā†’ Obsidian.

This way we could achieve both words for dealing with URLs:

  • Safari to Obsidian;
  • Obsidian to Obsidian.

I reach the developer of Javascript Init and he said that is possible. More information here

Unfortunately I donā€™t have skill to make this happen :frowning:


My objetive with this post is to show a new workflow for this bookmarklet and maybe @kepano and @Moonbase59 like this ideia and want to make this happen :slight_smile:

Thanks for reading this and have a great day!

Thank you very much! This booklet has changed my life significantly. It works perfectly on my Mac. However, it doesnā€™t work on my Window PC. When I run the booklet(with Chrome browser), it asks like ā€œWill you open obsidian?ā€ and if I choose ā€œyesā€, nothing happens. Does this booklet work only on a Mac or am I missing something?

1 Like

Thank-you. This, and the refinements on github are great. After scanning some documentation, I think Obsidian has great potential but has ignored their most common use case. Maybe I am missing something? I hope I am.

The documentation describes a note-first approach, and a link-first approach. If you are taking notes independent of the rest of the world this is ok. But I read web pages that Google and new services push to me constantly, or search, and almost all of my notes are web page-first. I used to share these to Pocket (terrible organization of pages) or other things. I resort to sharing them to an email message to myself to read the next day. What I want to do is push them to Obsidian, refine the metadata, and use existing or new tags to fit them into the tagging scheme.

I rarely start with notes. I am absorbing info that I want to tag, develop insight from, and link into more complex structures later.

A lot of potential because it is so flexible, but it is so horribly awkward to use for this type of thing, that people have to resort to bookmarklets that are much appreciated byt only [art of what we need. Obsidian can be morphed into something highly usable, but I have a day job.

1 Like

Thanks a lot for this bookmarklet, working fine on Android Brave. I have 2 questions, keep in mind that I know nothing about coding and Iā€™m very new at this:

  • how can I modify the code so it doesnā€™t insert the tag #clipping?, (it messes up my system of finding untagged documents on my inbox, so I can tag them later)
  • how can I define the folder where the clippings are saved?

Iā€™m sorry if this is obvious, Iā€™ve tried searching, but Iā€™m still a bit lost here. Anyway, thanks again!

Hello and thanks for this handy bookmarklet!

I gave it a try and then modified a bit, to ask you about tags you want to add.

  /* Optional tags  */
  const tags = ["#clippings"].concat((prompt("Extra tags?")||'').split(',').map(e => e.trim())).join(' #');

That is the line Iā€™ve modified, now browser will ask you about extra tags, before clipping. You can opt out by canceling the prompt or leaving it empty.

You can see screenshots and modified sources here (gist)

UPD: now it can also handle #multi-word tags, by adding dash in between words

I am trying to modify this awesome script and suit it to my need, also combine it with Templater. The issue is when I use Templater ā€œ<% %>ā€ it donā€™t work anymore. If I change the code to copy the final results to clipboard instead of using obsidian URI it works. The original code certainly can handle this kind of symbols in the content of page. I have no idea why writing it down in the code causes trouble. Can someone please help with this issue. It is bothering me so much for some reason.

PS. The issue with % was because of changing to Advanced URI plugin, there is a bug with that. But still have problem. It works for some websites but nothing happens on other sites. I have no idea why. Can someone help?

1 Like

Somehow the ā€œoriginalā€ (early release) of this ā€œbookmark codeā€ work well. If in setting, i set ā€œfolder to create new note inā€ is UNSORTED folder, the clipped articles away goes exactly into it.

But the latest, newer version of this bookmark wont do that anymore, new clipped articles away create in the very root folder, then i have to move it around to desire folder. If we do web clipped alot, it will make a big cluster in the explorer panel which is not so please to the eyes. Hope the dev ā€œkepanoā€ fix it !

Again, thanks for this amazing bookmark clipped ! This is no doubt the best webclipper for obsidian !

I continue to regularly enjoy using this Web Clipper for Safari on an iPhone. Itā€™s great! But, I use a Windows desktop machine and when I try to use Obsidian Sync to sync the clipped notes there are many errors because of illegal characters in note names. I am trying to find a solution to this.

For a while now, my workflow has been to just separately sync these notes using another sync service then use the PowerRename utility to bulk replace the illegal characters in theses notes. Usually these notes are just articles and resources that arenā€™t heavily linked with other notes in my vault by the time they make it to my computer, so the fixing of the links broken when removing the illegal characters hasnā€™t been problematic enough to require a new workflow. But, when I recently reread this thread, I noticed that the Windows version of this Web Clipper bookmarklet automatically removes the illegal characters in the first place.

So, if anyone knows how or whether it would be possible to modify the version that I am using for iPhone to remove the illegal characters the way the Windows version does I would greatly appreciate it.

Thanks in advance!

I can also confirm that this works on my iPad Pro and it is absolutely amazing. Also works when highlighting portion of text if donā€™t want full page sent to Obsidian. Thank you. I am using iOS 16 latest developer version on Safari.

Wonderful plug-in ā€¦ Iā€™m using it on my iPhone (iOS 16) with Safari. Works very well. Many thanks.

A few months ago I started using this bookmarklet in my daily workflow. I had a few issues that were unrelated to the bookmarklet directly, such as security settings of the site I was trying to highlight, etc.

I updated the bookmarklet code to embed the Turndown code in the bookmarklet itself, which gets around the security setting issues. I also took the ideas from Turndown-ext and embedded some code to support highlighting tables to work with the ā€˜Advanced Tableā€™ obsidian plugin.

I wrapped this all up in a new obsidian plugin that I have submitted for release. Here is the info.

I have tested this on Mac, iOS, Windows, and Linux(xdg-open works but I canā€™t figure out how to get the browser to support obsidian-url).

1 Like

Thank you for a brillint plugin. I used to use MarkDownload, but this bookmarklet is more convenient since it added notes directly to Obsidian.

Iā€™ve added a little improvement to my workflow. I converted a bookmarklet to Chrome extention using this tool - Convert bookmarklet to Chrome extension.

I donā€™t like having Bookmarks bar open, since it eats lotā€™s of real estate. And by turning a bookmarlet to extention I was able to add it to Chromeā€™s main toolbar and close Bookmarks bar.

Disclaimer: I donā€™t know how safe this tool is. I just found it by googling.

1 Like

@kepano: wonderful job! Iā€™m using extensively both for my research vault and for my personal one. And here it comes a question: would it be possible to customize the script to have multiple bookmarklets for multiple vaults? Iā€™m not a coder but in the javascript I see there are 2 possible variables: ā€œconst vaultā€ and ā€œconst folderā€. What if I created two different bookmarks for two vaults so that I can directly store my work clippings in my work vault and my personal clippings to my personal one? Would it work?
Thanks!

My bad: I saw that @ganesshkumar created a service to accomplish that:

And it work like a charm!

This is so cool! I canā€™t believe I havenā€™t come across this yet.

I wonderā€¦ do you think it would be possible to somehow use this with Raycast?

Your extension maker doesnā€™t seem to work for me, but Iā€™ve found another solution to your problem that can be interesting for other people:

The Powerlet extension for Chrome (I use it on Brave), groups all your Bookmarklets under a single button on the extensions bar. So you save screen real estate and it only takes two clicks to run any bookmarklet. Also, the icon and pane look straightforward and cool:

Screenshot 2023-01-05 212051

With this thing and short names, I can use 4 bookmarklets on desktop and mobile with minimum hassle. I hope you people find it useful.

Has anyone else had any trouble getting the clipper by kepano to work recently? I am guessing I probably just need to remove and then reset it up. However, I have been using it as is for the longest time until the last few days when it doesnā€™t seem to want to respond. I will post again if I get it sorted out.

Thanks in advance.

Working fine on iOS as of this post :+1: (2023-01-13 08:00)

1 Like

That is strange. I am on iOS as well and am pasting the content from https://gist.githubusercontent.com/kepano/90c05f162c37cf730abb8ff027987ca3/raw/db9989a228802e40aff96bea7a12046719b369b2/obsidian-web-clipper.min.js to the Address of a Safari bookmark as shown in image. Not sure why it is no longer working. Thanks for the confirmation that it should be working. I will get to the bottom of this. I didnā€™t realize how reliant I was upon this.

Thanks!