Bookmarklet: Send to Obsidian

Share & showcase
1

I made a quick bookmarklet to save content from a webpage to Obsidian.

If you like, you can grab it by dragging this link to your bookmarks bar:

Send to Obsidian

Then, edit it and change the link to the code below by copying and pasting.

javascript:(function(){

	const title = document.title;
	const selectedText = window.getSelection().toString();
	const url = document.location.href;
	const tag = '#saved_from_chrome';
	const content = `# ${title}
${selectedText != "" ? `${"\n"} > ${selectedText.replaceAll("\n", "\n> ")}` : ""	}
${"\n\n"}
- [${title}](${url})
${"\n\n"}
${tag}`;
	document.location.href = `obsidian://new?name=${encodeURIComponent(title)}&content=${encodeURIComponent(content)}`
})();
14 Likes
2

Great idea! Can you be more specific about how to make this work? I tried to replace changeme (the two hashtags were not removed) from the following link with the script, but it did not work for me.
https://forum.obsidian.md/t/bookmarklet-send-to-obsidian/13415#changeme#

3

Thanks for this! I also added &vault=my-vault to the script to be able to send to a specific vault.

1 Like
4

You need to delete the entire url and replace it with the code, not just the changeme part.

Additionally, as @gregxvx suggested, you can (should?) add your vault name.

See below (it’s at the end of the 2nd to last line that begins with document.location):

javascript:(function(){

	const title = document.title;
	const selectedText = window.getSelection().toString();
	const url = document.location.href;
	const tag = '#saved_from_chrome';
	const content = `# ${title}
${selectedText != "" ? `${"\n"} > ${selectedText.replaceAll("\n", "\n> ")}` : ""	}
${"\n\n"}
- [${title}](${url})
${"\n\n"}
${tag}`;
	document.location.href = `obsidian://new?name=${encodeURIComponent(title)}&content=${encodeURIComponent(content)}&vault=VAULTNAMENERE`
})();
2 Likes
5

Thanks for the help. I replaced the link with the code. However, after clicking the bookmark, it navigates to the active pane in Obsidian but did not paste anything into the note.

6

I tried to test this bookmark with the current post page, and it did not work. It’s working for other websites.

7

I had the same issue. It worked on other pages, but not this one.

8

I think it comes from the fact that selected / highlighted text here triggers the quote feature of the forum (and thus probably overriding what the bookmarklet tries to do).

1 Like
9

This is really cool. I’m gonna add this to my bookmark manager!

10

Great addition.

I think it may not work with this page if you’re using Obsidian in Windows because the file it’s trying to create contains a colon character (: ) as it’s obtained from the page title. And Windows doesn’t allow it.

To fix this minor issue I’ve just cleaned the filename replacing non-word characters from the title with a hyphen (-):

const file = title.replaceAll(/[^\w]/ig, '-').replaceAll(/[_-]+/g, '-');

The final bookmarklet looks like this:

javascript:(function(){

	const title = document.title;
        const file = title.replaceAll(/[^\w]/ig, '-').replaceAll(/[_-]+/g, '-');
	const selectedText = window.getSelection().toString();
	const url = document.location.href;
	const tag = '#saved_from_chrome';
	const content = `# ${title}
${selectedText != "" ? `${"\n"} > ${selectedText.replaceAll("\n", "\n> ")}` : ""	}
${"\n\n"}
- [${title}](${url})
${"\n\n"}
${tag}`;
	document.location.href = `obsidian://new?name=${encodeURIComponent(file)}&content=${encodeURIComponent(content)}&vault=VAULTNAMEHERE`
})();
5 Likes
11

Great! Now this version works for me on macOS when saving the current post page.

1 Like
12

Great stuff!

Here’s my version plucking up the parts that can be customized:

javascript: (function () {
  const vault = "zettelkasten";
  const prefix = "Clips/";
  const tag = "#saved_with_bookmarklet";

  const title = document.title;
  const file = title.replaceAll(/[^\w]/gi, "-").replaceAll(/[_-]+/g, "-");
  const selectedTextNotGoogleDocs = window.getSelection().toString().trim();
  const url = document.location.href;
  const content = `# ${title}${
    selectedTextNotGoogleDocs != ""
      ? `${"\n"} > ${selectedTextNotGoogleDocs.replaceAll("\n", "\n> ")}`
      : ""
  }${"\n\n"}- [${title}](${url})${"\n\n"}${tag}\n`;
  document.location.href = `obsidian://new?name=${prefix}${encodeURIComponent(
    file
  )}&content=${encodeURIComponent(content)}&vault=${vault}`;
})();

Note: quoting the selectedText doesn’t work in Google apps. See https://stackoverflow.com/a/11288003 for an explanation of why

4 Likes
13

I tried this but there are some bugs. Firefox adds extra spaces. And do not get rid of ALL spaces in the name. I removed the signs ?/|: and double spaces.

javascript:(function(){const title=document.title;const file="BM "+title.replaceAll(/[:\\\?\/\|]/gi,"-");const selectedText=window.getSelection().toString();const url=document.location.href;const tag="TAG";const%20content=`#%20${title}${selectedText!=""?`${"\n"}%20>%20${selectedText.replaceAll("\n","\n>%20")}`:""}\n\n-%20[${title}](${url})\n\n${tag}`;document.location.href=`obsidian://new?name=${encodeURIComponent(file)}&content=${encodeURIComponent(content)}&vault=Main`})();
14

See Obsidian Web Clipper Bookmarklet to save articles and pages from the web (for Safari, Chrome, Firefox, and mobile browsers) · GitHub as a starting point

1 Like