Bookmarklets

September 29, 2023
December 8, 2014

Bookmarklets are bookmark of JavaScript code as the link (with protocol javascript:) that can be used to implement custom features inside browser.
They are simple ways to extend browser without resorting to browser extensions and plugins.
You can access document and window of the current page in the bookmarklet.
Useful properties includes:

Bookmarkleteer: Create and Share Bookmarklets Online (down), source
How To Make a Bookmarklet For Your Web Application | BetterExplained
Implementing bookmarklets in JavaScript

Repository

Bookmarklets | Bookmarklet Search Engine
Ben Alman » Bookmarklets
janmoesen/bookmarklets
Bookmarklets
Jesse's Bookmarklets Site
Bookmarklets - Tool Categories

Creating bookmarklets

echo -n "javascript:"; uglifyjs --no-copyright file.js ; echo

Bookmarklets construction set - Create bookmarklets online
Bookmarklet Crunchinator
bookmarkleteer - Matt Gauger's bookmarklet maker

Generates a mailto: link with the webpage's URL and title.
I use this frequently to share links.
I registered Gmail to handle mailto: according to this.

javascript: void window.open(
  "mailto:?SUBJECT=" + document.title + "&BODY=" + escape(location.href),
  "_blank",
  "width=628,left=" +
    screen.width * 0.5 +
    ",height=600,top=" +
    screen.height * 0.1 +
    ",resizable,scrollbars=no",
);

Creates a Markdown link []() for the current page. Copy and paste to Markdown documents.

javascript: prompt(
  "Markdown link for this page:",
  "[" + document.title + "](" + window.location.href + ")",
);

Duplicate Tab

Duplicates this tab, useful for when you wish to change the url manually.

javascript: void window.open(location.href);

Up a Directory

I miss the "Up" button in file manager so I bring it to browser.

javascript: void (location.href = location.href.substring(
  0,
  location.href.substring(0, location.href.length - 1).lastIndexOf("/") + 1,
));

Proxy via GAE

Sometime, someone blocks my access to website.
mirrorrr to the rescue.

javascript: void (location.href =
  "https://leesei-proxy.appspot.com/?url=" +
  encodeURIComponent(window.location.href));

jQuerify

Loads jQuery (from Google CDN) on any website, use Dev Console to play with it.

javascript:(function()%7B"use strict";function t()%7Bconsole.log("jQuery loaded!")%7Dvar e;e=document.createElement("script");e.addEventListener("load",t);e.src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js";document.head.appendChild(e)%7D())

Note: this is auto updateing as the bookmarklet loads the gist every time it is clicked.

List all the links in Markdown contained in the hovered portion of the page.
GrabLinks - BrettTerpstra.com, gist.

Bookmarklet on website.

This is rudimentary, could have parsed it a little bit.
But why need this if we have DevTool?

javascript: if (document.cookie.length < 1) {
  alert("No cookie for this site.");
} else {
  alert("Cookie for this site:\n" + document.cookie);
}

Pocket

Pocket: How to Save
Pocket | Using the Pocket Bookmarklet

Bookmarklet on website (click "install the bookmarklet").

Google Bookmark

Google Bookmarks - Chrome Help

Bookmarklet on website.

BrowserPad

HTML5 <contenteditable> is a makeshift cross platform Notepad replacement.
A little styling makes it better.

javascript: void window.open(
  "data:text/html, <html style='height: 100%'> <head> <title>BrowserPad</title><head> <body contenteditable style='background-color:#333; color: #ddd; font-family: courier; font-weight: bold'> </body> </html>",
  "_blank",
  "width=800,height=600",
);

Transforming page

Google Mobile View

This is an undocumented transformer by Google.

javascript: void window.open(
  "http://www.google.com/gwt/x?u=" + encodeURIComponent(window.location.href),
);

Readability

Readability is a service that let you focus on the content of the webpage.
heckyesmarkdown provides wrapper around Readability's API.

Bookmarklet on website.
Use "Readability→Markdown" for clean HTML or "Readability→Markdown (raw)" for Markdown.

mozilla/readability: A standalone version of the readability lib
Readability based Reader View – Get this Extension for 🦊 Firefox (en-US)

Print Friendly is a service provides a "print friendly" version of the webpage. It grabs the content intelligently, allow you to remove the unneed parts and save the result as PDF.

Bookmarklet on website.

Video

KeepVid

KeepVid is a service for downloading videos from various sites.
Personally I use youtube-dl, but this is for non-technical people.

KeepVid / Extensions

KeepVid Bookmarklet | Bookmarklet Search Engine

Bookmarklet on website.

Extract Audio from video

Dirpy and YouTube to mp3 Converter both do the job.

Dirpy Bookmarklet | Bookmarklet Search Engine

Youtube MP3 Downloader Bookmarklet | Bookmarklet Search Engine

Bookmarklet on website.

YouTube Frames as Storyboard

Gernerate a storyboard of thumbnails of the video.

How to Print a YouTube Video - Storyboard Bookmarklet
YouTube Frames as Storyboard - YouTube

Bookmarklet on website.

YouTube Popup

Open YouTube Videos in PopUp Window with a Bookmark · Amr Eldib
Embed videos and playlists - YouTube Help

javascript: (function () {
  var url = window.location;
  if (url.origin.indexOf("www.youtube.com") == -1) {
    alert("Sorry, this is not a YouTube page! URL: " + url.href);
  } else {
    var width = "width=" + 600;
    var height = "height=" + 480;
    var left = "left=" + (screen.width - width) / 2;
    var top = "top=" + (screen.height - height) / 2;

    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == "v") {
        var videoId = pair[1];
      }
    }

    window.open(
      "http://www.youtube.com/embed/" + videoId,
      document.title,
      "location=no, directories=no, menubar=no, toolbar=no, scrollbars=no, status=no, resizable=yes, " +
        width +
        ", " +
        height +
        ", " +
        left +
        ", " +
        top,
    );
  }
})();

URL shortener

is.gd - a URL shortener. Mmmm, tasty URLs!
Bookmarklet on FAQ.

硬是要縮 - 比 PPT 短網址更安全的縮網址服務

2lo.ng4.me - short urls

Bookmarklet on website.