Skip to content

Instantly share code, notes, and snippets.

@jbrown123
Last active August 18, 2024 21:55
Show Gist options
  • Save jbrown123/84839a5abe763e5b117a321510cb9de7 to your computer and use it in GitHub Desktop.
Save jbrown123/84839a5abe763e5b117a321510cb9de7 to your computer and use it in GitHub Desktop.
Reference bookmarklet - generate a string containing the page title, URL and any selected text

Reference bookmarklet

This bookmarklet will grab 2 or 3 bits of info from the currently viewed webpage and put them into an 'alert' so you can copy & paste into another document.

It should work in any desktop browser (chrome, firefox, ect.) on any OS but I've only personally tested it in Chrome on Windows.

You can press either enter or escape after copying the text. It doesn't make any difference which one you use.

For example, the above URL points to the bookmarklet entry on Wikipedia. If you used the reference bookmarklet on that page it would return the following:

Bookmarklet - Wikipedia
https://en.wikipedia.org/wiki/Bookmarklet

If you selected the first two sentences of the first paragraph prior to invoking the bookmarklet, you'd get the following:

Bookmarklet - Wikipedia
https://en.wikipedia.org/wiki/Bookmarklet
A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser. Bookmarklets are unobtrusive JavaScripts stored as the URL of a bookmark in a web browser or as a hyperlink on a web page.

Copy and paste the following code into your bookmark to create a bookmarklet (I named mine 'reference')

javascript:(function(){let text=""; if(window.getSelection()!=''){text=window.getSelection().toString()+"\n";}prompt("Press Ctrl+C, Escape", document.title+"\n"+location.href+"\n"+text);})()

You can, of course, rearrange the order of the output. I've put them in this order because that's the way I like them. Feel free to change the ordering in the prompt() call to suite your preferences. Note that the 'text' item is optional (blank if nothing is selected) so it should NOT generally have a hard return after it in the prompt line unlike title and href. Instead, the code adds a return to the end of text if there is something selected (inside the if() statement).

markdown link version

Here's a version that creates a markdown style link using the page title as the text and the URL as, unsurprisingly, the URL.

javascript:(function(){ prompt("Press Ctrl+C, Escape", '['+document.title+']('+location.href+') ');})()

It generates the following for the above wikipedia page:

[Bookmarklet - Wikipedia](https://en.wikipedia.org/wiki/Bookmarklet)

Which produces Bookmarklet - Wikipedia in markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment