fkscott/obsidian-web-clipper.js

## readme.md

      
    Raw
  

              readme.md
            
          
    my take on this web clipper

all credit to @kepano for the original script
i modified this script to use a template literal to build my note content and specifically clip youtube videos

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 = "";

  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, //optional if you want author
  } = new Readability(document.cloneNode(true)).parse();

  const shareURL = window.location.href;

  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 (vault) {
        var vaultName = '&vault=' + encodeURIComponent(`${vault}`);
    } else {
        var vaultName = '';
    }

    /*
    this is the structure i use for my dataview query which is part of a larger note system

    just modify this and it'll append it to the markdown file

    String.raw fills in
    */
  const fileContent = String.raw`type:: youtube
  started:: false
  finished:: false
  url:: ${shareURL}
  loved::
  #watch/youtube`;

  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%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%20%2F%2Foptional%20if%20you%20want%20author%0A%20%20%7D%20%3D%20new%20Readability(document.cloneNode(true)).parse()%3B%0A%0A%20%20const%20shareURL%20%3D%20window.location.href%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%20%0A%20%20%20%20if%20(vault)%20%7B%0A%20%20%20%20%20%20%20%20var%20vaultName%20%3D%20'%26vault%3D'%20%2B%20encodeURIComponent(%60%24%7Bvault%7D%60)%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20var%20vaultName%20%3D%20''%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F*%0A%20%20%20%20this%20is%20the%20structure%20i%20use%20for%20my%20dataview%20query%20which%20is%20part%20of%20a%20larger%20note%20system%0A%0A%20%20%20%20just%20modify%20this%20and%20it'll%20append%20it%20to%20the%20markdown%20file%0A%0A%20%20%20%20String.raw%20fills%20in%0A%20%20%20%20*%2F%0A%20%20const%20fileContent%20%3D%20String.raw%60type%3A%3A%20youtube%0A%20%20started%3A%3A%20false%0A%20%20finished%3A%3A%20false%0A%20%20url%3A%3A%20%24%7BshareURL%7D%0A%20%20loved%3A%3A%0A%20%20%23watch%2Fyoutube%60%3B%0A%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%0A%7D)%7D)()%3B
	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 = "";

	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, //optional if you want author
	} = new Readability(document.cloneNode(true)).parse();

	const shareURL = window.location.href;

	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 (vault) {
	var vaultName = '&vault=' + encodeURIComponent(`${vault}`);
	} else {
	var vaultName = '';
	}

	/*
	this is the structure i use for my dataview query which is part of a larger note system

	just modify this and it'll append it to the markdown file

	String.raw fills in
	*/
	const fileContent = String.raw`type:: youtube
	started:: false
	finished:: false
	url:: ${shareURL}
	loved::
	#watch/youtube`;

	document.location.href = "obsidian://new?"
	+ "file=" + encodeURIComponent(folder + fileName)
	+ "&content=" + encodeURIComponent(fileContent)
	+ vaultName ;

	})