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

A few posts up there’s a generator: https://obsidian-clipper-maker.ganesshkumar.com, maybe give that a try and re-do it?

1 Like

Thanks. I tried and unfortunately it still doesn’t work for me. To be sure, I just wanted to verify the process of using it.

  1. Open article
  2. Tap on the address bar
  3. Tap on the created Web Clipper bookmark
  4. Wait for the dialog and choose to open in Obsidian

Thanks once again!

I trigger it like this:

  • article is open
  • tap bookmarks
  • tap the name you gave it
  • confirmation modal
  • obsidian opens
1 Like

Thanks for that. Unfortunately still no luck with that method either. But at least I have narrowed it down. I appreciate your help very much.

1 Like

Is there a way to change date format? to any of these?

  1. MMMM dd, yyyy

or preferably these?
2. M/dd/yy
3. M/dd/yy, h:mm a

This works perfectly with hyperweb, a screenshot of what it look like, just one click to save web to vault.

Thanks so much for this fantastic extension!

hyperweb integrated this clipper, you could try if that works.

1 Like

thank you so much for this @kepano!

It’s been a big help. I’m having some trouble getting it to work on Linkedin posts - do you have any suggestions?

I can’t get it to work on desktop browsers. I have tried it with Chrome, Brave and Edge. With the respective mobile versions, on the other hand, it works perfectly. Does anyone have any idea why?

This is wonderful, thank you!

I’m not technologically capable enough to know how to modify the code. Could somebody help me or help me help myself to modify this? What I want is very simple

clip the content to root Obsidian folder with no front matter and nothing else but the content pasted in block quote formatting: > Petierunt uti sibi concilium totius Galliae in diem certam indicere.

Thank you :slight_smile:

It is working again! I have no idea what was stopping it. Just figured I would mention it. I feel tempted to delete my previous posts mentioning issues, as they are misleading for others. That being said, they did occur for some reason, so I might as well leave them in case the problem ever returns or happens for someone else.

Thanks!

Hi, This looks perfect in the demo video, and in fact puts everything in the note Except for any of the actual highlighted ‘content’, which is a problem. I’m using Safari and have tried various changes to the bookmarklet and template with always the same result. My current template looks like :

[{{title}}]({{url}}) {{tags}}
Contents:
{{content}}
***

Everything OS and app-wise is up to date. It’s just what I need, but not sure what’s going on. Perhaps it’s more targeted to PC/Chrome users so this problem got missed.


Update: Solved… I found quite accidentally that (oddly) it does work from the bookmarks bar. Usually I don’t have this turned on. But if you instead click on the same bookmarklet in the side panel it won’t fill in the contents. Strange, but at least it seems to work now.

Updated version:

Changes:

  1. update turndown to latest
  2. add gfm support which correctly convert the markdown tables in clipper.
1 Like

I’m running into an issue I can’t seem to nail down. All the image tags seem to have an extra brackets around them in the markdown:

Initial html tag is:
<img src="https://www.website.com/image.png" alt="image" />

[![](https://www.website.com/image.png)](https://www.website.com/image.png)
or
[![image](https://www.website.com/image.png)](https://www.website.com/image.png)

This is true whether I’m using this web clipper or MarkDownload with FireFox. When I enter the same image tag into a real-time Turndown “translator” the extra brackets aren’t there (Turndown Demo):
![](https://www.website.com/image.png)
or
![image](https://www.website.com/image.png)

The issue is that those extra brackets are then visible throughout at note in Obsidian above and below the image and create a bit of a mess in live preview mode:
2024-07-04_10-32-24

Any ideas on where the extra brackets are coming from? Is anyone else experiencing this?

I recently installed Obsidian on a Windows PC and have the same problem now of Obsidian not able to create notes with prohibited characters. I would love a version of the bookmarklet that either allows you to confirm/customize the note title, or just automatically removes prohibited characters- : / \

When I first set up Sync on the Windows machine, Sync deleted all my notes with illegal filenames, but fortunately I was able to recover almost all of them.

1 Like

The Web Clipper already checks which OS you’re on and automatically removes illegal characters. Make sure you have the latest version:

This is great thanks! It has actually solved an issue I had and took much less time than previously thought.

I have a question however, how is it that the clipper is allowed to put # in titles and we are not? I had a naming scheme that took this limit into consideration and now I have to changes things (which is fine) but maybe I was actually doing something wrong in the first place?