Skip to content

Instantly share code, notes, and snippets.

@braden-w

braden-w/obsidian-web-clipper.js

Forked from Asseel-Naji/obsidian-web-clipper.js
Last active November 29, 2022 15:45
Show Gist options
  • Save braden-w/ad1bba94b48922aaf79c1686a5665c9b to your computer and use it in GitHub Desktop.
Save braden-w/ad1bba94b48922aaf79c1686a5665c9b to your computer and use it in GitHub Desktop.
Download ZIP
Prompt_Obsidian Bookmarklet to clip pages
Raw
readme.md

A bookmarklet that saves the current web page as a new article in Obsidian.

Changes in this fork

Forked from @kepano from this gist.

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. 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. Before its creation, there are a series of prompts that will ask the user that will autopopulate the file when it is created.

Raw
obsidian-web-clipper.js
javascript: (function () {
/* Optional vault name */
// const vault = prompt("Vault name (leave blank for default):", "");
const vault = ""
const vaultName = vault ? "&vault=" + encodeURIComponent(`${vault}`) : ""
/* Get Title */
const title = document.title
function processTitle(fileName) {
fileName = fileName.replace(": ", " - ").replace(/[/\\?%*|"<>]/g, "-")
return fileName
}
//
// let fileName = prompt("File Name", processTitle(title))
let fileName = processTitle(title)
/* Optional folder name such as "Clippings */
const folder = prompt("Folder:", "Sources/Clippings/")
/* Optional tags */
const on = prompt("On:", "On").split(", ").map(tag => ` - ${tag.trim()}`).join("\n")
const type = prompt("Type", "")
function getSelectionHtml() {
let 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()
/* Get Date */
const now = new Date()
function convertDate(date) {
const yyyy = date.getFullYear().toString()
const mm = (date.getMonth() + 1).toString()
const dd = date.getDate().toString()
const mmChars = mm.split("")
const ddChars = dd.split("")
return (
yyyy +
"-" +
(mmChars[1] ? mm : "0" + mmChars[0]) +
"-" +
(ddChars[1] ? dd : "0" + ddChars[0])
)
}
const today = convertDate(now)
/* Set File Contents */
const fileContent = `---
URL: ${document.URL}
date: "${today}"
type: ${type}
on: ${on}
---
# ${title}
${selection}
`
document.location.href =
"obsidian://new?" +
"file=" +
encodeURIComponent(folder + fileName) +
"&content=" +
encodeURIComponent(fileContent) +
vaultName
})()
Raw
obsidian-web-clipper.min.js
javascript:(function()%7Bjavascript%3A%20(function%20()%20%7B%0A%20%20%2F*%20Optional%20vault%20name%20*%2F%0A%20%20%2F%2F%20%20%20const%20vault%20%3D%20prompt(%22Vault%20name%20(leave%20blank%20for%20default)%3A%22%2C%20%22%22)%3B%0A%20%20const%20vault%20%3D%20%22%22%0A%20%20const%20vaultName%20%3D%20vault%20%3F%20%22%26vault%3D%22%20%2B%20encodeURIComponent(%60%24%7Bvault%7D%60)%20%3A%20%22%22%0A%0A%20%20%2F*%20Optional%20folder%20name%20such%20as%20%22Clippings%20*%2F%0A%20%20const%20folder%20%3D%20prompt(%22Folder%3A%22%2C%20%22Sources%2FClippings%2F%22)%0A%0A%20%20%2F*%20Optional%20tags%20%20*%2F%0A%20%20const%20onTags%20%3D%20prompt(%22On%20tags%3A%22%2C%20%22On%2F%22).split(%22%2C%22).map(tag%20%3D%3E%20%20%60%20-%20%24%7Btag.trim()%7D%60).join(%22%5Cn%22)%0A%20%20const%20typeTags%20%3D%20prompt(%22Type%20tags%3A%22%2C%20%22Type%2FSource%2F%22)%0A%20%20%20%20.split(%22%2C%22)%0A%20%20%20%20.map((tag)%20%3D%3E%20%60%20-%20%24%7Btag.trim()%7D%60)%0A%20%20%20%20.join(%22%5Cn%22)%0A%0A%20%20function%20getSelectionHtml()%20%7B%0A%20%20%20%20let%20html%20%3D%20%22%22%0A%20%20%20%20if%20(typeof%20window.getSelection%20!%3D%20%22undefined%22)%20%7B%0A%20%20%20%20%20%20var%20sel%20%3D%20window.getSelection()%0A%20%20%20%20%20%20if%20(sel.rangeCount)%20%7B%0A%20%20%20%20%20%20%20%20var%20container%20%3D%20document.createElement(%22div%22)%0A%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%20container.appendChild(sel.getRangeAt(i).cloneContents())%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20html%20%3D%20container.innerHTML%0A%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%20if%20(document.selection.type%20%3D%3D%20%22Text%22)%20%7B%0A%20%20%20%20%20%20%20%20html%20%3D%20document.selection.createRange().htmlText%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20return%20html%0A%20%20%7D%0A%20%20const%20selection%20%3D%20getSelectionHtml()%0A%0A%20%20%2F*%20Get%20Title%20*%2F%0A%20%20const%20title%20%3D%20document.title%0A%20%20function%20processTitle(fileName)%20%7B%0A%20%20%20%20fileName%20%3D%20fileName.replace(%22%3A%20%22%2C%20%22%20-%20%22).replace(%2F%5B%2F%5C%5C%3F%25*%7C%22%3C%3E%5D%2Fg%2C%20%22-%22)%0A%20%20%20%20return%20fileName%0A%20%20%7D%0A%20%20let%20fileName%20%3D%20prompt(%22File%20Name%22%2C%20processTitle(title))%0A%0A%20%20%2F*%20Get%20Date%20*%2F%0A%20%20const%20now%20%3D%20new%20Date()%0A%0A%20%20function%20convertDate(date)%20%7B%0A%20%20%20%20const%20yyyy%20%3D%20date.getFullYear().toString()%0A%20%20%20%20const%20mm%20%3D%20(date.getMonth()%20%2B%201).toString()%0A%20%20%20%20const%20dd%20%3D%20date.getDate().toString()%0A%20%20%20%20const%20mmChars%20%3D%20mm.split(%22%22)%0A%20%20%20%20const%20ddChars%20%3D%20dd.split(%22%22)%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20yyyy%20%2B%0A%20%20%20%20%20%20%22-%22%20%2B%0A%20%20%20%20%20%20(mmChars%5B1%5D%20%3F%20mm%20%3A%20%220%22%20%2B%20mmChars%5B0%5D)%20%2B%0A%20%20%20%20%20%20%22-%22%20%2B%0A%20%20%20%20%20%20(ddChars%5B1%5D%20%3F%20dd%20%3A%20%220%22%20%2B%20ddChars%5B0%5D)%0A%20%20%20%20)%0A%20%20%7D%0A%0A%20%20const%20today%20%3D%20convertDate(now)%0A%0A%20%20%2F*%20Set%20File%20Contents%20*%2F%0A%20%20const%20fileContent%20%3D%20%60---%0Adate%3A%20%22%24%7Btoday%7D%22%0Atags%3A%0A%24%7BonTags%7D%0A%24%7BtypeTags%7D%0A---%0A%0A%23%20%24%7Btitle%7D%0A%0A%24%7Bselection%7D%0A%0A%23%20References%0A-%20(References%3A%3A%20%5B%24%7Btitle%7D%5D(%24%7Bdocument.URL%7D))%60%0A%0A%20%20document.location.href%20%3D%0A%20%20%20%20%22obsidian%3A%2F%2Fnew%3F%22%20%2B%0A%20%20%20%20%22file%3D%22%20%2B%0A%20%20%20%20encodeURIComponent(folder%20%2B%20fileName)%20%2B%0A%20%20%20%20%22%26content%3D%22%20%2B%0A%20%20%20%20encodeURIComponent(fileContent)%20%2B%0A%20%20%20%20vaultName%0A%7D)()%7D)()%3Bjavascript:(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%22Brain%22%3B%0A%0A%20%20%2F*%20Optional%20folder%20name%20such%20as%20%22Clippings%2F%22%20*%2F%0A%20%20%2F*%20const%20folder%20%3D%20%22Resources%2F0_INBOX%2F%22%3B%20*%2F%0A%20%20const%20folder%20%3D%20prompt(%22Folder%3A%22%2C%20%22Resources%2F0_INBOX%2F%22)%3B%0A%0A%20%20%2F*%20Optional%20tags%20%20*%2F%0A%20%20let%20baseTag%20%3D%20%22%23resources%20%22%3B%0A%20%20let%20extraTags%20%3D%20prompt(%22additional%20tags%3A%22%2C%20%22%23to_read%22)%3B%0A%20%20const%20tags%20%3D%20baseTag%20%2B%20extraTags%3B%0A%0A%20%20%0A%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%20let%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%20let%20fileName%20%3D%20prompt(%22File%20Name%22%2C%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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment