Obsidian Web Clipper Bookmarklet to save articles and pages from the web (for Safari, Chrome, Firefox, and mobile browsers)

readme.md

By @kepano

🎉 Support my work at buymeacoffee.com/kepano

Demo

You can find a demo of this bookmarklet on YouTube

Installation

Create a new bookmark in your browser, then copy/paste the minified code below into the URL field.

You can customize the output using the optional variables at the top, and the template at the bottom. The default template is designed for use with the Dataview plugin. If you make changes I recommend using Bookmarklet Maker to minify and URI encode the bookmarklet.

Usage

By default, clicking the bookmarklet creates a new Obsidian file from the main body of the article (similar to Readability view). Alternatively you can choose to create a file from a selection, by either selecting all (CMD+A), or just a portion of the page.

Any images in the content will be embedded as external references. If you want to download images locally you can use the Local Images plugin which allows you to download images for a note.

Troubleshooting

This bookmarklet may not work on all websites. If you run into issues, you can also try the MarkDownload browser extension which provides similar functionality. You can troubleshoot issues by opening the Developer Console in your browser and checking if any errors appear when you click the bookmarklet. The most common error is that a website or the browser itself is blocking third party code execution. Unfortunately there is no good solve for that yet.

obsidian-web-clipper.js

javascript: Promise.all([import('https://unpkg.com/turndown@6.0.0?module'), import('https://unpkg.com/@tehshrike/readability@0.2.0'), ]).then(async ([{
    default: Turndown
}, {
    default: Readability
}]) => {

  /* Optional vault name */
  const vault = "";

  /* Optional folder name such as "Clippings/" */
  const folder = "";

  /* Optional tags  */
  const tags = "#clippings";

  function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
  }

  const selection = getSelectionHtml();

  const {
      title,
      byline,
      content
  } = new Readability(document.cloneNode(true)).parse();

  function getFileName(fileName) {
    var userAgent = window.navigator.userAgent,
        platform = window.navigator.platform,
        windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'];

    if (windowsPlatforms.indexOf(platform) !== -1) {
      fileName = fileName.replace(':', '').replace(/[/\\?%*|"<>]/g, '-');
    } else {
      fileName = fileName.replace(':', '').replace(/\//g, '-').replace(/\\/g, '-');
    }
    return fileName;
  }
  const fileName = getFileName(title);

  if (selection) {
      var markdownify = selection;
  } else {
      var markdownify = content;
  }

  if (vault) {
      var vaultName = '&vault=' + encodeURIComponent(`${vault}`);
  } else {
      var vaultName = '';
  }

  const markdownBody = new Turndown({
      headingStyle: 'atx',
      hr: '---',
      bulletListMarker: '-',
      codeBlockStyle: 'fenced',
      emDelimiter: '*',
  }).turndown(markdownify);

  var date = new Date();

  function convertDate(date) {
    var yyyy = date.getFullYear().toString();
    var mm = (date.getMonth()+1).toString();
    var dd  = date.getDate().toString();
    var mmChars = mm.split('');
    var ddChars = dd.split('');
    return yyyy + '-' + (mmChars[1]?mm:"0"+mmChars[0]) + '-' + (ddChars[1]?dd:"0"+ddChars[0]);
  }

  const today = convertDate(date);

  const fileContent = 
      "author:: " + byline + "\n"
      + "source:: [" + title + "](" + document.URL + ")\n"
      + "clipped:: [[" + today + "]]\n"
      + "published:: \n\n" 
      + tags + "\n\n"
      + markdownBody ;
  
  document.location.href = "obsidian://new?"
    + "file=" + encodeURIComponent(folder + fileName)
    + "&content=" + encodeURIComponent(fileContent)
    + vaultName ;
})

obsidian-web-clipper.min.js

javascript:(function()%7Bjavascript%3A%20Promise.all(%5Bimport('https%3A%2F%2Funpkg.com%2Fturndown%406.0.0%3Fmodule')%2C%20import('https%3A%2F%2Funpkg.com%2F%40tehshrike%2Freadability%400.2.0')%2C%20%5D).then(async%20(%5B%7B%0A%20%20%20%20default%3A%20Turndown%0A%7D%2C%20%7B%0A%20%20%20%20default%3A%20Readability%0A%7D%5D)%20%3D%3E%20%7B%0A%0A%20%20%2F*%20Optional%20vault%20name%20*%2F%0A%20%20const%20vault%20%3D%20%22%22%3B%0A%0A%20%20%2F*%20Optional%20folder%20name%20such%20as%20%22Clippings%2F%22%20*%2F%0A%20%20const%20folder%20%3D%20%22%22%3B%0A%0A%20%20%2F*%20Optional%20tags%20%20*%2F%0A%20%20const%20tags%20%3D%20%22%23clippings%22%3B%0A%0A%20%20function%20getSelectionHtml()%20%7B%0A%20%20%20%20var%20html%20%3D%20%22%22%3B%0A%20%20%20%20if%20(typeof%20window.getSelection%20!%3D%20%22undefined%22)%20%7B%0A%20%20%20%20%20%20%20%20var%20sel%20%3D%20window.getSelection()%3B%0A%20%20%20%20%20%20%20%20if%20(sel.rangeCount)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20container%20%3D%20document.createElement(%22div%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20for%20(var%20i%20%3D%200%2C%20len%20%3D%20sel.rangeCount%3B%20i%20%3C%20len%3B%20%2B%2Bi)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20container.appendChild(sel.getRangeAt(i).cloneContents())%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20html%20%3D%20container.innerHTML%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%20else%20if%20(typeof%20document.selection%20!%3D%20%22undefined%22)%20%7B%0A%20%20%20%20%20%20%20%20if%20(document.selection.type%20%3D%3D%20%22Text%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20html%20%3D%20document.selection.createRange().htmlText%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20return%20html%3B%0A%20%20%7D%0A%0A%20%20const%20selection%20%3D%20getSelectionHtml()%3B%0A%0A%20%20const%20%7B%0A%20%20%20%20%20%20title%2C%0A%20%20%20%20%20%20byline%2C%0A%20%20%20%20%20%20content%0A%20%20%7D%20%3D%20new%20Readability(document.cloneNode(true)).parse()%3B%0A%0A%20%20function%20getFileName(fileName)%20%7B%0A%20%20%20%20var%20userAgent%20%3D%20window.navigator.userAgent%2C%0A%20%20%20%20%20%20%20%20platform%20%3D%20window.navigator.platform%2C%0A%20%20%20%20%20%20%20%20windowsPlatforms%20%3D%20%5B'Win32'%2C%20'Win64'%2C%20'Windows'%2C%20'WinCE'%5D%3B%0A%0A%20%20%20%20if%20(windowsPlatforms.indexOf(platform)%20!%3D%3D%20-1)%20%7B%0A%20%20%20%20%20%20fileName%20%3D%20fileName.replace('%3A'%2C%20'').replace(%2F%5B%2F%5C%5C%3F%25*%7C%22%3C%3E%5D%2Fg%2C%20'-')%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20fileName%20%3D%20fileName.replace('%3A'%2C%20'').replace(%2F%5C%2F%2Fg%2C%20'-').replace(%2F%5C%5C%2Fg%2C%20'-')%3B%0A%20%20%20%20%7D%0A%20%20%20%20return%20fileName%3B%0A%20%20%7D%0A%20%20const%20fileName%20%3D%20getFileName(title)%3B%0A%0A%20%20if%20(selection)%20%7B%0A%20%20%20%20%20%20var%20markdownify%20%3D%20selection%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20var%20markdownify%20%3D%20content%3B%0A%20%20%7D%0A%0A%20%20if%20(vault)%20%7B%0A%20%20%20%20%20%20var%20vaultName%20%3D%20'%26vault%3D'%20%2B%20encodeURIComponent(%60%24%7Bvault%7D%60)%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20var%20vaultName%20%3D%20''%3B%0A%20%20%7D%0A%0A%20%20const%20markdownBody%20%3D%20new%20Turndown(%7B%0A%20%20%20%20%20%20headingStyle%3A%20'atx'%2C%0A%20%20%20%20%20%20hr%3A%20'---'%2C%0A%20%20%20%20%20%20bulletListMarker%3A%20'-'%2C%0A%20%20%20%20%20%20codeBlockStyle%3A%20'fenced'%2C%0A%20%20%20%20%20%20emDelimiter%3A%20'*'%2C%0A%20%20%7D).turndown(markdownify)%3B%0A%0A%20%20var%20date%20%3D%20new%20Date()%3B%0A%0A%20%20function%20convertDate(date)%20%7B%0A%20%20%20%20var%20yyyy%20%3D%20date.getFullYear().toString()%3B%0A%20%20%20%20var%20mm%20%3D%20(date.getMonth()%2B1).toString()%3B%0A%20%20%20%20var%20dd%20%20%3D%20date.getDate().toString()%3B%0A%20%20%20%20var%20mmChars%20%3D%20mm.split('')%3B%0A%20%20%20%20var%20ddChars%20%3D%20dd.split('')%3B%0A%20%20%20%20return%20yyyy%20%2B%20'-'%20%2B%20(mmChars%5B1%5D%3Fmm%3A%220%22%2BmmChars%5B0%5D)%20%2B%20'-'%20%2B%20(ddChars%5B1%5D%3Fdd%3A%220%22%2BddChars%5B0%5D)%3B%0A%20%20%7D%0A%0A%20%20const%20today%20%3D%20convertDate(date)%3B%0A%0A%20%20const%20fileContent%20%3D%20%0A%20%20%20%20%20%20%22author%3A%3A%20%22%20%2B%20byline%20%2B%20%22%5Cn%22%0A%20%20%20%20%20%20%2B%20%22source%3A%3A%20%5B%22%20%2B%20title%20%2B%20%22%5D(%22%20%2B%20document.URL%20%2B%20%22)%5Cn%22%0A%20%20%20%20%20%20%2B%20%22clipped%3A%3A%20%5B%5B%22%20%2B%20today%20%2B%20%22%5D%5D%5Cn%22%0A%20%20%20%20%20%20%2B%20%22published%3A%3A%20%5Cn%5Cn%22%20%0A%20%20%20%20%20%20%2B%20tags%20%2B%20%22%5Cn%5Cn%22%0A%20%20%20%20%20%20%2B%20markdownBody%20%3B%0A%20%20%0A%20%20document.location.href%20%3D%20%22obsidian%3A%2F%2Fnew%3F%22%0A%20%20%20%20%2B%20%22file%3D%22%20%2B%20encodeURIComponent(folder%20%2B%20fileName)%0A%20%20%20%20%2B%20%22%26content%3D%22%20%2B%20encodeURIComponent(fileContent)%0A%20%20%20%20%2B%20vaultName%20%3B%0A%7D)%7D)()%3B

@pioneerskies @jordanwiseman

Many things I want to clip are too long and it fails. I want to grab the leading part of a page and edit from there; or a selection.
I also want a navigable link to the page at the bottom of what I clip.

This refinement of Jordan's fits as much of the page as possible, assuming a safe URL length for most browsers is 2048; i trimmed it back to 2030 due to errors, which can URI encode 1200-1300 characters of source content. It also adds the link to source and a diagnostic of the number of characters of page content clipped.

I acknowledge that tags may be fractured and the last character of the page may be broken, if URI encoding it escapes it and I truncate in the middle. But it captures pages pretty well so far and there will always be some massaging on the Obsidian page.

Decrementing by 1 char each time seems a little wasteful, I used to use 100, but its just browser cycles and is instantaneous.

Still no CSP or CORS solution.

Code

javascript: Promise.all([import('https://unpkg.com/turndown@6.0.0?module'), import('https://unpkg.com/@tehshrike/readability@0.2.0'), ]).then(async ([{
    default: Turndown
}, {
    default: Readability
}]) => {

  /* Optional vault name */
  const vault = "";

  /* Optional folder name such as "Clippings/" */
  const folder = "";

  /* Optional tags  */
  let tags = "clippings";

  /* parse and lightly clean the site's meta keywords content into tags, if present */
  if (document.querySelector('meta[name="keywords" i]')) {
      var keywords = document.querySelector('meta[name="keywords" i]').getAttribute('content').split(',');

      keywords.forEach(function(keyword) {
          let tag = ' ' + keyword.split(' ').join('');
          tags += tag;
      });
  }

  function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
  }

  const selection = getSelectionHtml();

  const {
      title,
      byline,
      content
  } = new Readability(document.cloneNode(true)).parse();

  function getFileName(fileName) {
    var userAgent = window.navigator.userAgent,
        platform = window.navigator.platform,
        windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'];

    if (windowsPlatforms.indexOf(platform) !== -1) {
      fileName = fileName.replace(':', '').replace(/[/\\?%*|"<>]/g, '-');
    } else {
      fileName = fileName.replace(':', '').replace(/\//g, '-').replace(/\\/g, '-');
    }
    return fileName;
  }
  const fileName = getFileName(title);

  if (selection) {
      var markdownify = selection;
  } else {
      var markdownify = content;
  }

  if (vault) {
      var vaultName = '&vault=' + encodeURIComponent(`${vault}`);
  } else {
      var vaultName = '';
  }

  const markdownBody = new Turndown({
      headingStyle: 'atx',
      hr: '~~~',
      bulletListMarker: '-',
      codeBlockStyle: 'fenced',
      emDelimiter: '*',
  }).turndown(markdownify);

  var date = new Date();

  function convertDate(date) {
    var yyyy = date.getFullYear().toString();
    var mm = (date.getMonth()+1).toString();
    var dd  = date.getDate().toString();
    var mmChars = mm.split('');
    var ddChars = dd.split('');
    return yyyy + '-' + (mmChars[1]?mm:"0"+mmChars[0]) + '-' + (ddChars[1]?dd:"0"+ddChars[0]);
  }

  const today = convertDate(date);

  /* YAML front matter as tags render cleaner with special chars  */
  const fileContent = 
      "---\n"
      + "author:    " + byline + "\n"
      + "title:     [" + title + "]\n"
      + "source:    " + document.URL + "\n"
      + "clipped:   " + today + "\n"
      + "published: \n\n" 
      + "tags:      [" + tags + "]\n"
      + "---\n\n"
      + markdownBody ;
  
  
  /* add a link to the source at the end */
  const linkref = 
      "\n\n---\n\source: [" + title + "](" + document.URL + ")\n";

  /* assemble URL, decrementing each time, until it does not exceed the max URL length for this browser, supposedly 2048 but allow for a little error with 2030 */
  contentLength = 2048;
  maxURLLength = 2030;
  decrement = 1;

  do {
	hrefString = "obsidian://new?"
      + "file=" + encodeURIComponent(folder + fileName)
      + "&content=" + encodeURIComponent(fileContent.substr(0,contentLength-1)) + encodeURIComponent(linkref) + "\n\nclipped " + String(contentLength) + " chars " 
      + vaultName ;
	contentLength = contentLength - decrement;
  } while (hrefString.length > maxURLLength);

  document.location.href = hrefString;

})

@skelly-larry nice one. I'll think about implementing a simple "selection" function on my script too. With something like https://jsfiddle.net/Y4BBq/

Still no CSP or CORS solution.

That's not a script's problem, but a security enforcement on some websites. I wrote a webservice for me only to be able to overcome that thing (I often do webclips from GitHub for example).

Another workaround I've found for certain sites that block web clipping: use "Reader View" on Safari and copy and paste from there... defeats a lot of things

@jordanwiseman: Works like a charm, thank you. 👍

Small improvement idea: Add a level one headline (# The Headline) at the beginning of the document.
E.g.:

var headline = title;
const fileContent = ....... +
'# ' + headline + 
markdownBody;

If this is turned into an extension, couldn't it bypass CORS restriction ?

@kepano, I have been using this and I have couple of bookmarklets to clip the contents into different folders in my vault. Since I created bookmarklets for various folders, I created a simple UI to fill in the vault name, folder name, tags and get the bookmarklet.

http://obsidian-clipper-maker.ganesshkumar.com

Let me know if this is useful for you guys!

Thanks for setting that up, makes it so much easier : )

Ray

Is it supposed to work on Android? I'm using Brave, and saved the bookmark, but it doesn't do anything. Thanks in advance for your work!
I get the following errors :

VM184:1 Refused to load the script 'https://unpkg.com/turndown@6.0.0?module' because it violates the following Content Security Policy directive: "script-src github.githubassets.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

(anonymous) @ VM184:1
VM184:1 Refused to load the script 'https://unpkg.com/@tehshrike/readability@0.2.0' because it violates the following Content Security Policy directive: "script-src github.githubassets.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

(anonymous) @ VM184:1
90c05f1…:1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://unpkg.com/turndown@6.0.0?module

I'm experiencing the issue that selection mode is not working on Safari. But work very well on chrome and firefox.

Ref: mdn/browser-compat-data#14270 (comment)

Edit: I think the problem is when clicking bookmarklet the selection is cleared because safari popup notification for obsidian

On my Windows 10 with Google Chrome I had to add this to the registry and then it works.

Got the tip via this thread and used the Obsidian Clipper Maker

obsidan-allow.reg

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\SOFTWARE\Policies\Google\Chrome]

[HKEY_CURRENT_USER\SOFTWARE\Policies\Google\Chrome\AutoOpenAllowedForURLs]
"1"="obsidian://"

This is working great in Chrome but I'm wondering whether it's possible to get it working in Safari - I've tried the same procedure in Safari but to no avail.

This is working great in Chrome but I'm wondering whether it's possible to get it working in Safari - I've tried the same procedure in Safari but to no avail.

I use it in Safari every day...

@wealthychef1, maybe it's a Mac thing (I'm on a Mac). Still working great in Chrome but in Safari the load bar starts but then gets stuck.

I'm getting an error on some websites because the titles can't contain certain characters. Is there a regex expression you can insert somewhere to prevent that error?

@wealthychef1, maybe it's a Mac thing (I'm on a Mac). Still working great in Chrome but in Safari the load bar starts but then gets stuck.

I'm using Safari Version 16.0 (17614.1.25.9.10, 17614) on MacOS Monterey 12.6

How can I fix the errors found in my developers console? The web clippings do not save. Thanks

How can I fix the errors found in my developers console? The web clippings do not save. Thanks
Can you post your console logs ?

I'm afraid it's a CSP issue, then it's not fixable.

Sorry for the irrelevant issue, but why does the bookmarklet not work with this page or any other gist or GitHub page?

Sorry for the irrelevant issue, but why does the bookmarklet not work with this page or any other gist or GitHub page?

@vitr That's the same answer as in https://gist.github.com/kepano/90c05f162c37cf730abb8ff027987ca3?permalink_comment_id=4352531#gistcomment-4352531

GitHub's CSPs cannot be "bypassed" w/o using a server side. I had to wrote a personal webservice in order to make this work w/ GitHub and some other sites (https://github.com/pioneerskies/downmark#backstory-and-credits JFYI)

P.S.: Heroku is going to shut down free tier hosting, so don't think to use my experimental publix webservice: it will be shut down and maybe moved away sooner than later

thanks, I guess, browser extensions (e.g. https://github.com/deathau/markdownload) work with any page, as they have full access to the content

thanks, I guess, browser extensions (e.g. https://github.com/deathau/markdownload) work with any page, as they have full access to the content

You're right @vitr (AFAIK)! If that fits your flow, than it seems a sturdy option to me

Hi, thanks for this great plugin! I have a small issue. Somehow images are not exported to Obsidian from voxeu (an economics website). I tried different articles from there, but they always export without pics. Here is an example site: https://cepr.org/voxeu/columns/addressing-uks-public-finances-after-mini-budget-crisis

Any way to remedy this?

I just can't get this bookmarklet to work with any of the sites I read.
When I click it absolutely nothing happens. No notes appear in obsidian. I use Brave browser.
"MarkDownload" and "Obsidian Web" extensions for chrome work.

thanks for creating this - one FYI for chrome on Android. I was running into a max length issue for the generated bookmarklet URI. Seems like URI couldn't be > 5000 characters (when pasting in the javascript code, the text box (?) was limiting the # of characters allowed, truncating to about 5000 chars). So nothing worked - no clipping nor errors.

I didn't spend too much time but my workaround was to delete/modify a couple things from javascript (content template, comments) and re generate with the bookmarklet maker linked above. Now generated is ~4800 chars and whole pages seem to work but not selected subset. Good enough for me at the moment. (Android 12, samsung tablet)