jplattel / obsidian-clipper

A Chrome extension that easily clips selections to Obsidian

Obsidian Chrome Clipper

Screencast

This is an unofficial Chrome/Firefox Extension to quickly clip a selection on a webpage to Obsidian.

Installing (Chrome)

From the Chrome Webstore

https://chrome.google.com/webstore/detail/obsidian-clipper/mphkdfmipddgfobjhphabphmpdckgfhb

Manually

1. Download/clone this repository
2. Navigate to the Chrome Extension and enabled developer mode (top right of your window)
3. Unzip the extension at the build/chrome folder. Or straight from the source with the src folder.
4. Load unpacked extension and navigate to the folder you just unzipped or src of this repository you just downloaded or cloned.
5. Chrome will now build the extension and you can use the extension menu to pin in to the user interface.
6. You're now ready to configure the extension, see the steps below in Usage & Settings:

Installing (Firefox)

1. Download/clone this repository
2. Allow unsigned extensions, see https://www.thewindowsclub.com/allow-unsigned-extensions-installed-firefox.
3. Navigate to the Firefox Addons
4. Add the zipfile from build/firefox through the cog menu.
5. You're now ready to configure the extension, see the steps below in Usage & Settings:

This extenion is only tested on Chrome/Firefox on OS X. I've heard people got it working on Unix with the flatpak Obsidian app.

Usage & Settings

Antone Heyward made an awesome video on how to use the clipper! be sure to have a look!

1. Right-click on the extension icon in the menu, and click on options.
2. A webpage should open where you can configure the options for this extension
3. You can configure the following:
   • vault: Allows you to specify which vault to open
   • note: The name of the note you want to append to
4. You can specify the clipping template using placeholders like {clip}, {date} and more like {month} or {year}.
5. Decide if you want a markdown clip (HTML is converted to markdown and added to your clipboard) or plain text.
6. You cen test if Obsidian opens with the right note with the 'Test Configuration' button.

Once configured, you're now good to go, using it only takes two steps:

1. Make a selection on a page and click the icon of the extension (or use a shortcut key!).
2. Obsidian will try to create or append to the specified note within the vault.

Troubleshooting

• I click the clipper icon and nothing is being clipped
  • You need a selection for the clipper to work, it doesn't clip entire pages
• A tab opens and closes shortly therafter and Obsidian doens't open
  • Double check you configuration and test it with the button at the bottom of the page.
  • Manually navigate to obsidian:// first to see if it's a permission issue
  • Then try opening: https://jplattel.github.io/obsidian-clipper/clip.html
  • Try specifying the vault name: https://jplattel.github.io/obsidian-clipper/clip.html?vault=<vaultname>
  • If nothing works, please make a note at issue #14

Building further upon this extension

Since Chrome allows you to set a custom shortcut to activate an extenion it should be pretty easy to chain it together with Keyboard Meastro or any other automation technology to both clip & paste the results.

Roadmap

• Support Firefox
• Allow a user to create a clipping template
• Markdown clipping with Turndown
• Make a option that let's you prepend a Zettelkasten id to the clipping itself? (through the template perhaps?)
• Date formatting with Moment
• Once the url-scheme of Obsidian allows the creation of a new note, clip to a new note.
• In the long term future, maybe even offer the possiblity to search through your notes and append it?
• If you have any ideas, please create an issue with the feature label on it, thanks! 😁

Technical explanation

This clipper is made possible with a work-around, since Chrome Extensions are forbidden to open custom url-schemes directly. The way around this issue is a custom html page that is hosted on Github-pages and also included in the repository: docs/clip.html. This little file contains javascript that pulls the data like vault & note out of the url params. With this data, it reconstructs the obsidian url and opens the right note!

Support

Want to support me? You can do so via Ko-Fi:

obsidian-clipper's Issues

Cannot create clipping with certain characters in title

When trying to clip from a webpage with "|" in the title, obsidian-clipper does not strip illegal characters from the file name, resulting in an error message in Obsidian (and no clip).

Multiple paragraph quotes

I'm not sure if this is a feature request or a bug. I've got the following in my clipping format:
> {clip}

This works fine for a single paragraph clip. But if you clip multiple paragraphs, the ">" character is obviously only prepended to the first paragraph.

windows's chrome cant get the content

hey bro ! My system is window 10 and I have test obsidian-clipper .

• When I download the plugin from chrome store and then config , I cant get the content when I select the content and click obsidian-clipper icon .
• When I download the plugin from github and install it , I can get then content . However , when I select the content and click obsidian-clipper icon , it will open a new chrome tag but shutdown it quickly .

Zettelkasten id miss zeros

The placeholder {zettel} does not match the Obsidian default format. For example file created at 2021-09-25 22:42:34 has id 2021925224234 instead of 20210925224234.

It would be great if placeholder has at least the full format with zeros. Or even better, has option to customize format.

New clipping in dedicated folder

I would like to send the clippings in a dedicated folder, similar to the standard folder for new notes.

can't build this extension on my chrome

Thanks for building amazing extension.

I tried to build but it showed me this error message:

Unrecognized manifest key 'applications'.

"applications": {
"gecko": {
"id": "[email protected]",
"strict_min_version": "53.0"
}

I appreciate it if you enlighten me on this thing.

Inconsistent

I love this extension.....when it works.

I cannot count the number of times that I've set it up, tested it successfully, clipped a a few items, and then I come back at another time and it doesn't work at all. I truly don't understand it.

The only factor I can imagine causes the problem is that I put my Obsidian files on a synced OneDrive. I had set it up successfully on iCloud, but that was tricky because the folder structure on MacOS is kinda odd for iCloud. But OneDrive places its folder in the normal file structure.

I recently got a Windows machine with Windows 11, and I set up my Obsidian there addressing the same files in OneDrive. Windows has a direct file structure as well, so it should address properly. Last night, I did some testing. It worked wonderfully on both machines simultaneously and separately. This morning,........nothing. I just don't get it.

[feature] More format options for {date} placeholder

First off, thanks for the great extension!

I would like to have a possibility to define the format for the {date} placeholder. I usually don't need the actual time, and the date (that is, YYYY-MM-DD) is enough. Obsidian itself supports this by using a 3-rd party library, so maybe it's possible to implement the same formatting in the extension as well?

Clip a note in an existing folder

When setting "Note to clip to" to <EXISTING_FOLDER>/<NAME>, the test works great but when I clip an actual site it creates a note at the root of the Vault with the following name: <EXISTING_FOLDER><NAME>

Chrome Extension on Edge flagged as Malware

Describe the bug
The extension gets disabled by Edge, with the result shown below. Details are not immediately available:

To Reproduce
Steps to reproduce the behavior:

1. Open MS Edge Browser with Obsidian Clipper Extension installed. (Link to extension in webstore currently failing: https://chrome.google.com/webstore/detail/mphkdfmipddgfobjhphabphmpdckgfhb)
2. See notification that the extension has been disabled
3. Navigate to relevant extension settings interface: edge://extensions/?id=mphkdfmipddgfobjhphabphmpdckgfhb
4. See error

Expected behavior
I expect the extension to remain enabled/usable.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge
• Version: 103.0.1264.37 (Official build) (64-bit)

use chrome extension now

I first tried to install the bookmarklet but didn't get it to work.
The chrome extension https://chrome.google.com/webstore/detail/obsidian-clipper/mphkdfmipddgfobjhphabphmpdckgfhb/related?hl=en didn't work either until I fixed a few things:

• I guess I didn't confirm the "save vault and configuration"
• I then confirmed with the default "obsidian" vault but my vault is named "Obsidian".
• images didn't get clipped until I checked the "Clip html as markdown" option

Is there still a reason to install it manually from here instead from the chrome web store?

thanks

Handle space character in Note name

So my notes should go to a path that contains spaces: 00 Inbox/Inbox.

When testing the config, I try to open: clip.html?vault=Notes&note=/00 Inbox/Inbox, as it should, but Obsidian throws File "00" not found.

I've tried to configure the path without URL encoding (00 Inbox/Inbox) and with URL encoding (00%20Inbox/Inbox), but the end result is the same.

Using the Firefox version if it makes any difference. Help would be appreciated!

Vault Not Found Error

Describe the bug
when it tries to open my vault i get the error message: Vault Not Found

I'm beginning to suspect the error lies in the fact that my vault is located in the obsidian app file in my iCloud. This is to sync it with my iPhone. I wonder if it can't read through the app files maybe?

Screenshots

a

Desktop (please complete the following information):

• OS: macOS Monterey 12.4
• Browser Chrome
• Version Version 103.0.5060.114

Using datetime in "Note to clip to" fails

Using datetime fails. No page is created. Setting it to date it works perfectly.

Multi line Clipping format

Thank you for this cool extension 👍

I'm setting Clipping format to :

> {clip}

---

# Reference
- [{title}]({url})

The test note looks like this:

> This is an example clip---

Is this a bug? I could work on this feature if you'd like.

Internal links are stripped of main part of URL

I also encountered a bug while using the HTML to markdown converter:
When there are links that lead to the same site, they get stripped of the main part of the URL.
[Rdn. 185](#LKO_09-1_263_mn_185) is wrong.
[Rdn. 185](https://www-degruyter-com.docweb.rz.uni-passau.de:2443/document/database/LKO/entry/LKO_09-1_263/html#LKO_09-1_263_mn_185) is how it should be.

Another example:
[299](/?typ=reference&y=300&b=1962&s=299&z=GA) is wrong.
[299](https://beck-online.beck.de/?typ=reference&y=300&b=1962&s=299&z=GA) is how it should be.

This doesn't happen with external links, their conversion is as expected.

I guess the problem with internal links is because the websites use relative links? I'm not exactly sure how this could be addressed. However, when I copy from the web and paste to markdown in Obsidian, then these internal links get resolved properly.

Cannot install unsigned extensions in Firefox Release channel.

Hello.

I tried installing the extension in Firefox, but it seems that the option to allow Unsigned extensions doesn't work in the normal stable channel (only in Nightly and Developer) channels.

So it would be nice, if this extension can be uploaded to the Firefox Add-Ons website.

Insider Version

Hey, obsidian's insider version is able to add new note by using URI now. You can check its document here: https://help.obsidian.md/Advanced+topics/Using+obsidian+URI#Action+new . Would be nice to see your plugin to be updated!

Not clipping to correct folder

I'm seeing a strange behaviour recently.
Have been using this successfully for the last few weeks but now the clipped notes are created at the top level of my vault.
I have the following configuration and everything works fine when I test using this config.

But when I clip from a 'real' page, the note is create in the root of my vault. In addition that note title has '@inbox' prepended as per this

Have tested and seem the same behaviour in both Chrome and Edge.

It looks like you did a release about 9 days ago. I can't be sure if this issue coincides with that or not so it could be unrelated.

I really lie the functionality so hoping you may be able to assist in resolving this issue I am seeing

Cheers

URI too long message

Had this issue a couple of times now, the extension complains about the URI being too long. Here's an example page.

My settings are:

# Note to clip to:
Journal/DailyNotes/{date} - Web clip from {title}
# Template:
---
title: {title}
created: {datetime}
source: {url}
tags:
  - webclips
---

{clip}

Tried removing the {title} tag from the note title, but still have the same issue.

How to Note to clip to Inbox?

I want to `Clip and Creat a new note' in my vault's Inbox, how to set?

{date} does not get the correct local time

at {date} got 2021-09-06T06:53:14.
But the local time should be 14:53:14 (GMT+8).

Note title's date value is incorrect

Hi,

my 'note to clip to' is : 000 Inbox/{zettel} {title}

Clipping format:

{clip}

Clipped from {title} at [[{date}]] {datetime}

Date format: YYYYMMDD

Datetime format: YYYY-MM-DD HH:mm:ss

---

I just did a test clip, and the note title is:

202227231451

but it should be
20220207231451 -- that is: 2022-02-07 23:14:51

While my zettle template & plugin completes the file format as: 20220207231819 (which is correct).

Any suggestions?

Not working on Mac OS + Vivaldi

Clicking the icon shows this

tick the allow box > open Obsidian > nothing happen.

Obsidian is running.

Extension does not launch Obsidian.app on MacOS

The Chrome dialog to launch Obsidian is displayed. However, nothing happens beyond that. I wonder if it might have anything to do with me storing my vault on iCloud?

Specs

• M1 Macbook Pro 13"
• MacOS Monterey
• Browser: Vivaldi (Chrome)

iCloud folder navigation

I have my Obsidian files in my iCloud folder to allow for sync to iOS Obsidian app. I attempted placing the file path in the Options settings, but it doesn't seem to work.

This plugin would be very helpful to me. But I must use iCloud to get the functionality I need for the iOS app.

Links in wikipedia.

Links in Wikipedia are not handled well. For example, [speech bubbles](https://en.wikipedia.org/wiki/Speech_balloon "Speech balloon") is expected, but actually [speech bubbles](/wiki/Speech_balloon "Speech balloon") is copied. This will result in empty nodes in the relationship graph and if clicked accidentally, a folder called wiki and empty files will be created.
Also, citations are annoying, since they are meaningless with expressions like [\[2\]](#cite_note-2).

Installation Issues

Hey Joost,

Thank you so much for making it available on firefox.

I had a couple of issues getting it to work

---

Just went through the process of enabling firefox developer permissions as explained here:
https://www.thewindowsclub.com/allow-unsigned-extensions-installed-firefox

I set "xpinstall.signatures.required" to false

but it still didn't work, it kept showing the message of not autorized extension
(This must be an issue on my side)

---

Temporary Upload

I was able to load the extension temporarily from here:

about:debugging
‘Load Temporary add-on’ where I loaded the file obsidian-clipper > build > firefox > obsidian_clipper.zip

This way I was able to test it out

I went through the instructions
I got to the place where I need to set the vault, file name to store notes and saved the settings.

---

Finally when I try to use the extension.

I selected some text and clicked on the extension, a new tab opens for 1 second and then closes without any further results. If I try again I get the same failed results.

My Specs

I'm using Firefox in Manjaro Arch Linux
I'm still setting up my obsidian URI so I thought there might have been an issue with that.

Then I tried it on a mac, from firefox at first
and ultimetly just to see if there was a firefox issue, I tried it all again from Google Chrome just to test, but it still didn't work for me.

---

There might me something wrong from my side, I can try it in a couple of days after I've tested Obsidian URI a bit more. (that's what I suspect might be my problem)

Again I really appreciate the help, and I'll keep testings things out

Append to an existing file // add note to selected text (enhancement)

In the long term future, maybe even offer the possiblity to search through your notes and append it?

Would it be possible to append the copied text to a predefined note? So to have that as a third option?
Because the Obsidian URI seems to allow the creation of new files, does it also let you append or not?

And perhaps this would be better suited as another issue/feature request:
Would it be possible to have the option to add a note to the selected text before sending it to Obsidian?

[enhancement] Bulk Clipping

I would love to have the option to append the clip to the current clipboard,
allowing me to rapidly clip a number of tabs and pasting them into obsidian in one go.

The chrome extension is not working

I see that you have a chrome extension for this tool now. https://chrome.google.com/webstore/detail/obsidian-clipper/mphkdfmipddgfobjhphabphmpdckgfhb

I specified the vault in options. But when I click on the extension after selecting any web content, a quick flash of a tab appears and disappears. Then nothing happens. No content is saved either.

I want to return to the original web page directly after clipping, how can I do it?

I want to return to the original web page directly after clipping instead of opening a new empty page like now, how to do it?

Request: Option to create new file from clipping

It would be great to be able to create a new page for the note: similar to 'Save to Notion' Chrome extension - the 'recipes options' on there are great too (ability to create a new note in a particular folder etc).

New note created at each clipping

When I clip something, the clipping goes into a new note each time (instead of being appended to the default note).

The note name is increased at each clipping: Chrome Clippings, Chrome Clippings 1, Chrome Clippings 2, ...

Any plans for an android version?

Does not work with Obsidian sync

Describe the bug
This extension I cannot get it to work with Obsidian sync.

Check for existing file & add comment

when i select create a new file i.e automatic option... it keeps making new files with the same name like

{date}
{date} 1
{date} 2

is there a way to make if check if said file already exists & if so.. add the highlight to the next /last line without creating a new file ???

---

also, it would be great if i can,

• select which note the highlight goes into each time, without having to open obsidian... like Zotero addon.
• add a comment to the highlight while i'm at it

Clip the entire page if nothing is highlighted

Is your feature request related to a problem? Please describe.

It's unhandy and unusual (and often leads to too long URL error) to have to highlight the whole page.
Why not just clip the whole page when nothing's selected?

Describe the solution you'd like

Trilium clipper does the job well https://github.com/zadam/trilium-web-clipper
Joplin's clipper too https://github.com/laurent22/joplin/blob/dev/readme/clipper.md

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
MarkDownload + Automation is not stable

clip placeholder seems not working in the latest release

First, thank you for providing such a great tool.

The problem I met is that when I set following clip format:

{clip}

Clipped from [{title}]({url}) at {datetime}.

And clip this project home page in GitHub, I can't get the content in clip. I only got:

Clipped from [jplattel/obsidian-clipper: A Chrome extension that easily clips selections to Obsidian](https://github.com/jplattel/obsidian-clipper) at 2021-04-09 14:01:34.

By the way, I'm using it under Linux and with Chrome (Version 89.0.4389.90 (Official Build) (64-bit)) and lastest Obsidian.

Feature request: ability to clip screenshots

I've been using onenote for years and slowly going to obsidian. One notes screen clipper is pretty fancy. One thing it allows me to do is clip screenshots and type notes.

Here is an example:

Is something like this possible?

Clipping the URL of a page yields an empty "quote"

Clipping selected text in the body o the page works fine.

Clipping the URL, however, yields an empty quote:

> 

Clipped from [Meilleure Serrure connectée août 2022 : quel modèle installer ?](https://www.phonandroid.com/meilleure-serrure-connectee-quel-modele-installer.html) at 2022-08-03.

Any possibility of adding the website's 'main' image to the clip template?

Thanks for this extension, it's awesome!

I was wondering if there's any way to receive the 'main' image from a website (e.g. similar to sites like Pocket), and place the image URL in my template using { } brackets?
I tried {og:image} but had no luck.
The reason I ask, is I'm wanting to organize notes in dataview tables in a similar way to Pocket.
I have my table set up and working with images, but it would be amazing if the image URL was grabbed automatically for me :-)

Also, while Googling I came across Image Resolver, which helps find the 'main' image from a website. I wonder if this could be implemented somehow?

Thanks :-)

Selection of the note to append to

Hi,

A great improvement for the extension would be that when making a clip, a small window opens asking the user which note they want to attach the clipped content to. Right now, we can only predefine one in the options menu.

I see that it is listed in the Readme for "In the long-term future". If the reason for this being so long term is that it's hard to extract the names from the list of notes (I don't know), maybe you could put a window with an editable text field for the user to manually enter the name of the note? Perhaps with a list of previously entered names next to it.

Thank you very much and kind regards!

Unrecognized manifest key 'applications' (Chrome)

Browser: Google Chrome 91.0.4472.124 (64 bits)

When I try to run the extension it just loops out and in the Chrome Extensions management tool I can see following error

Unrecognized manifest key 'applications'

With next part highlighted:
"applications": { "gecko": { "id": "[email protected]", "strict_min_version": "53.0" } }

Error "unrecognized manifest key" in Chrome

While it is working for me, when doing manual installation as instructed here, I get this error in Chrome - "unrecognized manifest key".

; )

Not clipping on all pages - bug? Feature Request?

Describe the bug

Not clipping pages with illegal characters in title.

The extension very often fails to create the note in Obsidian. I can see it opens Obsidian but then fails.

I can see in the console that it gives the following error

'File name cannot contain any of the following characters: * " \ / < > : | ?'

all the examples I have noted have these special characters in the title.

I have the extension configured to clip the note to

@Inbox/{title} - {date}

I guess that is the root cause but not sure if there is anyway to prevent the error while keeping the title as part of the note title.

Is it possible to define a valid character to use as a replacement for the illegal characters in the note title?

Or is there a workaround? At the moment I have to only use the {datetime} to create the note title but that adds extra steps to the note creation process.

Appreciate any thoughts,

Cheers

Please add better information on how to link to a vault

It looks like just the vault name is required but all I get is a warning that your repo is trying to access my information. Does it need a folder file path, a git repository, what?

Using {title} in filename won't save on illegal filenames.

Describe the bug
When I set "clippings/{date}-{title}" as the note to clip to some sites will allow me to save some won't.

To Reproduce

1. Set "clippings/{date}-{title}" in note to clip to
2. Go to a site with a title that would form an illegal filename (My example used | ) (Spinaziesoep met kokosmelk recept - Allerhande | Albert Heijn)
3. Hit that purple clip button.

Expected behavior
I suggest offering a {title} variant intended for the filename which sanitizes the filename.

Clipping won't work

Hi, I'm not a developper, I don't speak HTML, and I try to use Obsidian clipper.
I created from obsidian a vault named Obsidian Chrome Clippings.
When clicking on the Chrome extension (on Mac), I get the following message from Obsidian :
"Vault not found
Unable to find a vault for the URL obsidian://new?vault=obsidian&file=Chrome%20Clippings&content=%3E%20This%20is%20an%20example%20clip,%0A%0AClipped%20from%20%5BObsidian%20Clipper%5D(https://jplattel.github.io/obsidian-clipper/)%20at%202022-01-30."

What should I do ?

Screen captures :
https://www.dropbox.com/t/6MalApJCmTMR0C7P

Keyboard shortcut

Describe the solution you'd like
It could be great if we could clip by hitting a shortcut on keyboard instead of clicking the extension button on Chrome.
Thank you !!!! I'm leaving Evernote now.