41 Bookmarklets to Boost Your Productivity

A bookmarklet is a JavaScript application that can be stored as a bookmark in browsers like normal URL (as “javascript:”). After saving your bookmarklet you can run them on any site you like.

In simple words Bookmarklet is a bookmark with JavaScript code in a web browser that you can run with one click, the bookmarklet can be loaded on a webpage as a hyperlink, since bookmarklet is just a piece of JavaScript code, So possibilities are endless what you can do with it.

Read more about Bookmarklet on Wikipedia

Advertisements

In this article we will list some of the best bookmarklets that can be used by any web developer, designer or geeky like you, these bookmarklet will save your time and boost your productivity.

How Bookmarklet Look Like

Here is a simple example of a bookmarklet,

This bookmarklet Alerts with currently opened URL

Advertisements
javascript:alert(document.URL)

Drag after selecting the above JavaScript code to the bookmark bar.

how to install bookmarklet

Or you can Drag the button below to bookmark bar to add the bookmarklet.

Why use Bookmarklet

Performance: Bookmarklets won’t be slowing down your system as it won’t eat your system resources while idle like extensions.

Advertisements

Easy to Maintain: Bookmarklets are synced with your browser so you don’t lose any bookmarklet overtime, or you can just export your bookmarks as HTML and use that.

Easy to Customize: You can anytime edit any of bookmarklets code to do the task how you want.

Time Saver: These little JavaScript code saves tons of time if properly used.

No Compatibility Issue: If your browser runs JavaScript then it can run bookmarklet.

No Updates: You don’t need to update any bookmarklets like extensions as they are likely to work perfectly with the new version of browsers.

Here is List of Useful Bookmarklets

All bookmarklets code is prettified so you know what’s going on with code, you can minify this code if want to bookmarkelt will still work.

Just drag the button below bookmarkelt to bookmark bar to save it.

Share it Bookmarklet

Ever wanted to share any webpage with your friend on any specific platform but felt lazy to do this, you can do this with just with one click to load all sharing options.

This bookmarklet is great because you don’t have to add a separate bookmarklet for every website to just share content on it.

Just in case if you want it, by the end of this post you will able to make your own bookmarklet by customizing any bookmarklet.

javascript: void((function(svc) {
    var d = document,
        w = window,
        p = 0,
        b = function() {
            if (!p) {
                p = 1;
                if (_atc.xol) _adr.onReady();
                if (w.addthis_sendto) addthis_sendto(svc || 'bkmore', {
                    product: 'bmt-' + _atc.ver
                })
            } else {
                p = 0;
                if (_atw) _atw.clb()
            }
        };
    if (!w._atc) {
        var ol = w.addthis_onload || [],
            o = d.createElement('script');
        w.addthis_product = 'bmt-250';
        o.src = '//s7.addthis.com/js/250/addthis_widget.js#domready=1&username=bookmarklet';
        ol.push(b);
        w.addthis_onload = ol;
        d.getElementsByTagName('body')[0].appendChild(o)
    } else b()
})())

WayBack Search

Found 404 or the website is down, want to know what was actual page content before it was removed search on web.archive.org may be a page is cached there.

javascript: void(location.href = 'http://web.archive.org/web/*/' + escape(location.href));

Second Opinion Search

Sometimes you search something on Google but didn’t satisfied with search result you can use this bookmarklet to search the same query on Yahoo search with just one click.

if you want to search on any other search engine you can change location URL with

Bing “https://www.bing.com/search?q=”

DuckDuckGo “https://duckduckgo.com/?q=”

Google “https://www.google.com/search?q=”

Yahoo “https://search.yahoo.com/search?q=”

Brave Search “https://search.brave.com/search?q=”

javascript: Q = [];
c = location.search.slice(1).split('&');
for (i in c) {
f = c[i].split('=');
if (f[0] == 'q' || f[0] == 'as_q' || f[0] == 'p' || f[0] == 'query')
if (f[1]) Q.push(f[1])
}
R = unescape(Q.join('; ').replace(/\+/g, ' '));
location = 'https://duckduckgo.com/?q=' + escape(R);

This is just one example you can do, you can edit this bookmarklet to use for other purpose like you searched something on website 1 and want to search same thing on website 2, just replace the location URL with search query URL of website 2,

but while customizing keep in mind this bookmarklet will look for “q= ” in URL.

Advertisements

Google Search but Limited to 1 Website

Search in google while limiting the search result to currently opened webpage.

javascript: q = "" + (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text);
if (!q) q = prompt("You didn't select any text. Enter a search phrase:", "");
if (q != null) location = ("http://www.google.com/search?num=100&q=site:" + escape(location.hostname) + " \"" + escape(q.replace(/\"/g, "")) + "\"").replace(/ /g, "+");
void 0

Check Total Indexed Pages

Want to know how many pages of any website is indexed in Google just open the website and use this bookmarklet.

javascript: location = "http://www.google.com/search?num=100&q=site:" + escape(location.hostname);
void 0

Enable Right Click

Ever felt irritating when some websites disable right click

javascript: void(document.oncontextmenu = null)

Website Stack

Ever wonder what technology a website is using, like details about CDN, CSS-JS Framework, CMS Platform, Advertising Network etc this bookmarklet exactly tells you that,

If you are interested in creating your own website then here we have curated Stack – Collection of Tools you can use to boost your productivity.

javascript: (function() {
var d = document,
e = d.getElementById('wappalyzer-container');
if (e !== null) {
d.body.removeChild(e);
}
var u = 'https://www.wappalyzer.com/',
t = new Date().getTime(),
c = d.createElement('div'),
p = d.createElement('div'),
l = d.createElement('link'),
s = d.createElement('script');
c.setAttribute('id', 'wappalyzer-container');
l.setAttribute('rel', 'stylesheet');
l.setAttribute('href', u + 'css/bookmarklet.css');
d.head.appendChild(l);
p.setAttribute('id', 'wappalyzer-pending');
p.setAttribute('style', 'background-image: url(' + u + 'images/spinner.gif) !important');
c.appendChild(p);
s.setAttribute('src', u + 'bookmarklet/wappalyzer.js');
s.onload = function() {
window.wappalyzer = new Wappalyzer();
s = d.createElement('script');
s.setAttribute('src', u + 'bookmarklet/apps.js');
s.onload = function() {
s = d.createElement('script');
s.setAttribute('src', u + 'bookmarklet/driver.js');
c.appendChild(s);
};
c.appendChild(s);
};
c.appendChild(s);
d.body.appendChild(c);
})();

BugMeNot

Bug me not is a website which hosts username and password submitted by other users so we can login to some websites without making another temporary account just to check basic functionality and user interface.

javascript: (function() {
var url = ('http://www.bugmenot.com/view/' + escape(location.hostname));
w = open(url, 'w', 'location=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=500,height=400,modal=yes,dependent=yes');
if (w) {
setTimeout('w.focus()', 1000)
} else {
location = url
}
})();

Download YouTube Video

Don’t search for Google for YouTube video downloading website just add this bookmarklet to your browser and you are done.

We have full post about How to Download YouTube Video definitely check out where we mentioned how you can download a YouTube video by just changing few letters in URL only.

javascript: var regeX = /^.*(youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#&\?]*).*/,
getYTURL = location.href,
video_id, match = getYTURL.match(regeX);
if (match && 11 == match[2].length) {
video_id = match[2];
var url = "https://www.youtubnow.com/watch/?v=" + escape(video_id);
(w = open(url, "w", "location=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=500,height=800,modal=yes,dependent=yes")) ? setTimeout("w.focus()", 1E3): location = url
} else alert(" That's Not a Valid YouTube URL, \n Need URL like this \n http://youtube.com/watch?v=KuUYePG6ygQ ");

Web to PDF

Convert a webpage to pdf easily,

just keep in mind this bookmarklet won’t be generating any webpage to pdf correctly if webpage can only be accessed after some sort of authentication.

javascript: void(window.open('https://www.web2pdfconvert.com#' + location.href))

Web to QR Code

QR code is everywhere, wouldn’t be nice if you can just share a QR code of any URL instead of long messy URL,

It is useful if you want to open the same page on mobile, click on this bookmarklet to generate QR code and just scan the QR code.

javascript: (function() {
var url = ('http://chart.apis.google.com/chart?cht=qr&chs=300x300&chl=' + encodeURIComponent(location.href));
w = open(url, 'w', 'location=no,status=yes,menubar=no,scrollbars=no,resizable=yes,width=500,height=500,modal=yes,dependent=yes');
if (w) {
setTimeout('w.focus()', 1000)
} else {
location = url
}
})();

Enable Text Selection

To protect content from being copied some website disable the text selection functionality from users, you can restore text selection functionality by using this bookmarklet.

javascript: (function() {
function R(a) {
ona = "on" + a;
if (window.addEventListener) window.addEventListener(a, function(e) {
for (var n = e.originalTarget; n; n = n.parentNode) n[ona] = null;
}, true);
window[ona] = null;
document[ona] = null;
if (document.body) document.body[ona] = null;
}
R("click");
R("mousedown");
R("mouseup");
R("selectstart");
})()

View Password

If a password is saved in a browser but you don’t remember it and to peek the password, you can use this handy password viewer to check the hidden password in password field.

javascript: (function() {
var s, F, j, f, i;
s = "";
F = document.forms;
for (j = 0; j < F.length; ++j) {
f = F[j];
for (i = 0; i < f.length; ++i) {
if (f[i].type.toLowerCase() == "password") s += f[i].value + "\n";
}
}
if (s) alert("Passwords in forms on this page:\n\n" + s);
else alert("There are no passwords in forms on this page.");
})();

Sort Table

If you found a big table on any webpage page and want to quickly add sorting ability to a table without scratching your head use this bookmarklet to sort the table.

Try Table bookmarklets on w3schools HTML Table

javascript: function toArray(c) {
var a, k;
a = new Array;
for (k = 0; k < c.length; ++k) a[k] = c[k];
return a;
}

function insAtTop(par, child) {
if (par.childNodes.length) par.insertBefore(child, par.childNodes[0]);
else par.appendChild(child);
}

function countCols(tab) {
var nCols, i;
nCols = 0;
for (i = 0; i < tab.rows.length; ++i)
if (tab.rows[i].cells.length > nCols) nCols = tab.rows[i].cells.length;
return nCols;
}

function makeHeaderLink(tableNo, colNo, ord) {
var link;
link = document.createElement('a');
link.href = 'javascript:sortTable(' + tableNo + ',' + colNo + ',' + ord + ');';
link.appendChild(document.createTextNode((ord > 0) ? 'a' : 'd'));
return link;
}

function makeHeader(tableNo, nCols) {
var header, headerCell, i;
header = document.createElement('tr');
for (i = 0; i < nCols; ++i) {
headerCell = document.createElement('td');
headerCell.appendChild(makeHeaderLink(tableNo, i, 1));
headerCell.appendChild(document.createTextNode('/'));
headerCell.appendChild(makeHeaderLink(tableNo, i, -1));
header.appendChild(headerCell);
}
return header;
}
g_tables = toArray(document.getElementsByTagName('table'));
if (!g_tables.length) alert("This page doesn't contain any tables.");
(function() {
var j, thead;
for (j = 0; j < g_tables.length; ++j) {
thead = g_tables[j].createTHead();
insAtTop(thead, makeHeader(j, countCols(g_tables[j])))
}
})();

function compareRows(a, b) {
if (a.sortKey == b.sortKey) return 0;
return (a.sortKey < b.sortKey) ? g_order : -g_order;
}

function sortTable(tableNo, colNo, ord) {
var table, rows, nR, bs, i, j, temp;
g_order = ord;
g_colNo = colNo;
table = g_tables[tableNo];
rows = new Array();
nR = 0;
bs = table.tBodies;
for (i = 0; i < bs.length; ++i)
for (j = 0; j < bs[i].rows.length; ++j) {
rows[nR] = bs[i].rows[j];
temp = rows[nR].cells[g_colNo];
if (temp) rows[nR].sortKey = temp.innerHTML;
else rows[nR].sortKey = "";
++nR;
}
rows.sort(compareRows);
for (i = 0; i < rows.length; ++i) insAtTop(table.tBodies[0], rows[i]);
}

Add Number Column to Table

Sometimes tables don’t have a number column but you want to count the how many rows are available in table, this bookmarklet will come handy then.

javascript: (function() {
function has(par, ctag) {
for (var k = 0; k < par.childNodes.length; ++k)
if (par.childNodes[k].tagName == ctag) return true;
}

function add(par, ctag, text) {
var c = document.createElement(ctag);
c.appendChild(document.createTextNode(text));
par.insertBefore(c, par.childNodes[0]);
}
var i, ts = document.getElementsByTagName("TABLE");
for (i = 0; i < ts.length; ++i) {
var n = 0,
trs = ts[i].rows,
j, tr;
for (j = 0; j < trs.length; ++j) {
tr = trs[j];
if (has(tr, "TD")) add(tr, "TD", ++n);
else if (has(tr, "TH")) add(tr, "TH", "Row");
}
}
})()

Transpose Tables

You can transpose table rows and columns easily with this bookmarklet and apply other bookmarklets mentioned above to quickly do the work.

javascript: (function() {
var d = document,
q = "table",
i, j, k, y, r, c, t;
for (i = 0; t = d.getElementsByTagName(q)[i]; ++i) {
var w = 0,
N = t.cloneNode(0);
N.width = "";
N.height = "";
N.border = 1;
for (j = 0; r = t.rows[j]; ++j)
for (y = k = 0; c = r.cells[k]; ++k) {
var z, a = c.rowSpan,
b = c.colSpan,
v = c.cloneNode(1);
v.rowSpan = b;
v.colSpan = a;
v.width = "";
v.height = "";
if (!v.bgColor) v.bgColor = r.bgColor;
while (w < y + b) N.insertRow(w++).p = 0;
while (N.rows[y].p > j) ++y;
N.rows[y].appendChild(v);
for (z = 0; z < b; ++z) N.rows[y + z].p += a;
y += b;
}
t.parentNode.replaceChild(N, t);
}
})()

Bullet Points to Numbered List

Hate bullet points? or just prefer numbered list, you can make unordered list to ordered list with one click.

javascript: uls = document.getElementsByTagName("ul");
for (i = uls.length - 1; i >= 0; --i) {
oldul = uls[i];
newol = document.createElement("ol");
for (j = 0; j < oldul.childNodes.length; ++j) newol.appendChild(oldul.childNodes[j].cloneNode(true));
oldul.parentNode.replaceChild(newol, oldul);
}
void 0

Encrypt Text (ROT13)

Ever wanted to encrypt your text, URL, coupons code or spoilers before posting in any community, group or webpage so that only people who wanted to read your post can decrypt it.

Now you can do this by using this bookmarklet,

This bookmarklet replaces each letter by 13 positions from its current position, for example

Selected Text :- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
Encrypted Text :- NOPQRSTUVWXYZABCDEFGHIJKLMnopqrstuvwxyzabcdefghijklm

You can Customize how many positions this bookmarklet should move letters by changing the value in 5 lines. (keep value between 1 to 25)

javascript: var coding = "abcdefghijklmnopqrstuvwxyzabcdefghijklmABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLM";

function rot13(t) {
for (var r = "", i = 0; i < t.length; i++) {
character = t.charAt(i);
position = coding.indexOf(character);
if (position > -1) character = coding.charAt(position + 13);
r += character;
}
return r;
}
S = window.getSelection();

function t(N) {
return N.nodeType == N.TEXT_NODE;
}

function r(N) {
if (t(N)) N.data = rot13(N.data);
}
for (j = 0; j < S.rangeCount; ++j) {
var g = S.getRangeAt(j),
e = g.startContainer,
f = g.endContainer,
E = g.startOffset,
F = g.endOffset,
m = (e == f);
if (!m || !t(e)) {
/* rot13 each text node between e and f, not including e and f. */
q = document.createTreeWalker(g.commonAncestorContainer, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null, false);
q.currentNode = e;
for (N = q.nextNode(); N && N != f; N = q.nextNode()) r(N);
}
if (t(f)) f.splitText(F);
if (!m) r(f);
if (t(e)) {
r(k = e.splitText(E));
if (m) f = k;
e = k;
}
if (t(f)) g.setEnd(f, f.data.length);
}
void 0

Keep in mind this bookmarklet is not intended to use to encrypt your passwords or anything that is top secret like nuclear codes. Use it for fun with friends and lovers ?.

Read more about ROT13 on Wikipedia

Edit Page

You can pretty much change anything on a webpage as you do in a word document by using this bookmarklet, you don’t need to inspect elements and then change some text to see how it will look like on the webpage.

With this Bookmarklet, you can easily edit any website’s content, although your edits will be temporary on page reload your edits will be gone.

javascript: document.body.contentEditable = 'true';
document.designMode = 'on';
void 0

What Font is This

You can easily check font used in any webpage just click on the bookmarklet and hover over text to know details about it, you can even write your own text to see how it looks like.

javascript: void((function(d) {
    var e = d.createElement('script');
    e.setAttribute('type', 'text/javascript');
    e.setAttribute('charset', 'UTF-8');
    e.setAttribute('src', '//www.typesample.com/assets/typesample.js?r=' + Math.random() * 99999999);
    d.body.appendChild(e)
})(document));

Word Frequency

Check word frequency on any webpage like how many time any word is used on a webpage, this bookmarklet will come handy if you are looking for single word keywords in the post. The only downside is it will only count single words not two three words combined counting.

javascript: (function() {
var T = {},
W = [],
C = 0,
s, i;

function F(n) {
var i, x, a, w, t = n.tagName;
if (n.nodeType == 3) {
a = n.data.toLowerCase().split(/[\s\(\)\:\,\.;\<\>\&\'\"]/);
for (i in a)
if (w = a[i]) {
w = " " + w;
T[w] = T[w] ? T[w] + 1 : 1;
++C;
}
}
if (t != "SCRIPT" && t != "STYLE")
for (i = 0; x = n.childNodes[i]; ++i) F(x)
}
F(document);
for (i in T) W.push([T[i], i]);
W.sort(function(a, b) {
var x = b[0] - a[0];
return x ? x : ((b[1] < a[1]) ? 1 : -1)
});
s = "<h3>" + C + " words</h3>";
for (i in W) s += W[i][0] + ":" + W[i][1] + "<br>";
with(open().document) {
write(s);
close()
}
})()

Check or List All Alt Tags

For SEO purpose and for user perspective developer need to set relevant alt tags of all images. These alt tags tell search engine and users about image content.

Check Alt is bookmarklet highlights images with a green border if image have alt tag

javascript: (function() {
function d(s) {
return s == null ? "missing" : "\"" + s + "\""
}
var c = [0, 0, 0],
i, P, a, y, D = document;
if (D.createElement("img").getAttribute("alt") != null) alert("Your browser misreports missing alts as empty alts.");
for (i = 0; P = D.images[i]; ++i) {
a = P.getAttribute("alt");
y = !!a + (a != null);
++c[y];
P.style.border = "2px " + ["dotted red", "dashed #888", "solid green"][y];
P.title = "Alt: " + d(a) + ", Title: " + d(P.getAttribute("title"));
}
top.status = "Image alt texts: " + c[0] + " missing, " + c[1] + " empty, " + c[2] + " present"
})()

List Alt bookmarklet lists all images with its alt tag.

javascript: (function() {
var A = {},
B = [],
D = document,
i, e, a, k, y, s, m, u, t, r, j, v, h, q, c, G;
G = open().document;
G.open();
G.close();

function C(t) {
return G.createElement(t)
}

function P(p, c) {
p.appendChild(c)
}

function T(t) {
return G.createTextNode(t)
}
for (i = 0; e = D.images[i]; ++i) {
a = e.getAttribute("alt");
k = escape(e.src) + "%" + (a != null) + a;
if (!A[k]) {
y = !!a + (a != null);
s = C("span");
s.style.color = ["red", "gray", "green"][y];
s.style.fontStyle = ["italic", "italic", ""][y];
P(s, T(["missing", "empty", a][y]));
m = e.cloneNode(true);
if (G.importNode) m = G.importNode(m, true);
if (m.width > 350) m.width = 350;
B.push([0, 7, T(e.src.split('/').reverse()[0]), m, s]);
A[k] = B.length;
}
u = B[A[k] - 1];
u[1] = (T(++u[0]));
}
t = C("table");
t.border = 1;
r = t.createTHead().insertRow(-1);
for (j = 0; v = ["#", "Filename", "Image", "Alternate text"][j]; ++j) {
h = C("th");
P(h, T(v));
P(r, h);
}
for (i = 0; q = B[i]; ++i) {
r = t.insertRow(-1);
for (j = 1; v = q[j]; ++j) {
c = r.insertCell(-1);
P(c, v);
}
}
P(G.body, t);
})()

Alexa

This is simple bookmarklet that tells you Alexa rank of a website.

javascript: location = 'https://www.alexa.com/siteinfo/' + location.hostname

Down For Me or Down For Everyone

Check if a website is down for you only or for everyone.

javascript: location = 'https://downforeveryoneorjustme.com/' + location.hostname

Remove Colours

Some web pages use flashy colours that make it hard to focus on content, this bookmarklet will remove all colours from the webpage and adds basic link colours that are sufficient for you. You can tweak this bookmarklet to add your custom CSS while removing colour.

javascript: (function() {
var newSS, styles = '* { background: white ! important; color: black !important } :link, :link * { color: #0000EE !important } :visited, :visited * { color: #551A8B !important }';
if (document.createStyleSheet) {
document.createStyleSheet("javascript:'" + styles + "'");
} else {
newSS = document.createElement('link');
newSS.rel = 'stylesheet';
newSS.href = 'data:text/css,' + escape(styles);
document.getElementsByTagName("head")[0].appendChild(newSS);
}
})();

Remove Bloat

You can remove iframe, embeds, applets from any webpage easily to save some bandwidth and make content readable.

javascript: (function() {
function R(w) {
try {
var d = w.document,
j, i, t, T, N, b, r = 1,
C;
for (j = 0; t = ["object", "embed", "applet", "iframe"][j]; ++j) {
T = d.getElementsByTagName(t);
for (i = T.length - 1;
(i + 1) && (N = T[i]); --i)
if (j != 3 || !R((C = N.contentWindow) ? C : N.contentDocument.defaultView)) {
b = d.createElement("div");
b.style.width = N.width;
b.style.height = N.height;
b.innerHTML = "<del>" + (j == 3 ? "third-party " + t : t) + "</del>";
N.parentNode.replaceChild(b, N);
}
}
} catch (E) {
r = 0
}
return r
}
R(self);
var i, x;
for (i = 0; x = frames[i]; ++i) R(x)
})()

Remove Stylesheets

Check how any website looks without css

javascript: (function() {
var i, x;
for (i = 0; x = document.styleSheets[i]; ++i) x.disabled = true;
})();

Remove Images

Just remove it, You can remove all the images loaded in a webpage with one click.

javascript: (function() {
function toArray(c) {
var a, k;
a = new Array;
for (k = 0; k < c.length; ++k) a[k] = c[k];
return a;
}
var images, img, altText;
images = toArray(document.images);
for (var i = 0; i < images.length; ++i) {
img = images[i];
altText = document.createTextNode(img.alt);
img.parentNode.replaceChild(altText, img)
}
})();

Remove Cookie

Every web browser loves cookie, whenever you visit any website stores some data about you in your browser for future analytic tracking or for ad targeting. You can remove all cookies set by website by this bookmarklet.

javascript: (function() {
C = document.cookie.split("; ");
for (d = "." + location.host; d; d = ("" + d).substr(1).match(/\..*$/))
for (sl = 0; sl < 2; ++sl)
for (p = "/" + location.pathname; p; p = p.substring(0, p.lastIndexOf('/')))
for (i in C)
if (c = C[i]) {
document.cookie = c + "; domain=" + d.slice(sl) + "; path=" + p.slice(1) + "/" + "; expires=" + new Date((new Date).getTime() - 1e11).toGMTString()
}
})()

URL as a Link Text

It happens many times when you visit a website to download some stuff

but that website gives you 10 download links but only 1 of them works and rest are ads.

You can use this bookmarklet to make every link show the full URL before even clicking.

If you want to see what was anchor text of Link before running the bookmarklet just hover over new links you will see the content in Link title.

javascript: (function() {
var i, c, x, h;
for (i = 0; x = document.links[i]; ++i) {
h = x.href;
x.title += " " + x.innerHTML;
while (c = x.firstChild) x.removeChild(c);
x.appendChild(document.createTextNode(h));
}
})()

Internal / External Links

You can easily check how many links in a article pointing to external website and which one are internal.

Red = Internal link

Orange = Currently opened link

Blue = External link

you can change these colours in line 2

javascript: (function() {
var i, x;
for (i = 0; x = document.links[i]; ++i) x.style.color = ["blue", "red", "orange"][sim(x, location)];

function sim(a, b) {
if (a.hostname != b.hostname) return 0;
if (fixPath(a.pathname) != fixPath(b.pathname) || a.search != b.search) return 1;
return 2;
}

function fixPath(p) {
p = (p.charAt(0) == "/" ? "" : "/") + p; /*many browsers*/
p = p.split("?")[0]; /*opera*/
return p;
}
})()

Performance Analyzer

Without opening developer console you can check any pages performance metrics in neat and clean way. It uses Resources Timing API, Navigation Timing API and User-Timing-request by type, domains etc.

You can read about it on its repo

javascript: (function() {
var el = document.createElement('script');
el.type = 'text/javascript';
el.src = 'https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js';
el.onerror = function() {
alert("Looks like the Content Security Policy directive is blocking the use of bookmarklets\n\nYou can copy and paste the content of:\n\n\"https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js\"\n\ninto your console instead\n\n(link is in console already)");
console.log("https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js");
};
document.getElementsByTagName('body')[0].appendChild(el);
})();

Heatmap

Check which images of page take most of the time in loading, It also tells time to first paint and full loaded.

javascript: (function() {
var el = document.createElement('script');
el.src = 'https://zeman.github.io/perfmap/perfmap.js';
document.body.appendChild(el);
})();

View All Stylesheet

List all the stylesheet used in currently opened page included inline stylesheet.

javascript: s = document.getElementsByTagName('STYLE');
ex = document.getElementsByTagName('LINK');
d = window.open().document; /*set base href*/
d.open();
d.close();
b = d.body;

function trim(s) {
return s.replace(/^\s*\n/, '').replace(/\s*$/, '');
};

function iff(a, b, c) {
return b ? a + b + c : '';
}

function add(h) {
b.appendChild(h);
}

function makeTag(t) {
return d.createElement(t);
}

function makeText(tag, text) {
t = makeTag(tag);
t.appendChild(d.createTextNode(text));
return t;
}
add(makeText('style', 'iframe{width:100%;height:18em;border:1px solid;'));
add(makeText('h3', d.title = 'Style sheets in ' + location.href));
for (i = 0; i < s.length; ++i) {
add(makeText('h4', 'Inline style sheet' + iff(' title="', s[i].title, '"')));
add(makeText('pre', trim(s[i].innerHTML)));
}
for (i = 0; i < ex.length; ++i) {
rs = ex[i].rel.split(' ');
for (j = 0; j < rs.length; ++j)
if (rs[j].toLowerCase() == 'stylesheet') {
add(makeText('h4', 'link rel="' + ex[i].rel + '" href="' + ex[i].href + '"' + iff(' title="', ex[i].title, '"')));
iframe = makeTag('iframe');
iframe.src = ex[i].href;
add(iframe);
break;
}
}
void 0

View All Scripts

List all scripts loaded on page weather its inline or loaded via URL.

javascript: s = document.getElementsByTagName('SCRIPT');
d = window.open().document; /*140681*/
d.open();
d.close();
b = d.body;

function trim(s) {
return s.replace(/^\s*\n/, '').replace(/\s*$/, '');
};

function add(h) {
b.appendChild(h);
}

function makeTag(t) {
return d.createElement(t);
}

function makeText(tag, text) {
t = makeTag(tag);
t.appendChild(d.createTextNode(text));
return t;
}
add(makeText('style', 'iframe{width:100%;height:18em;border:1px solid;'));
add(makeText('h3', d.title = 'Scripts in ' + location.href));
for (i = 0; i < s.length; ++i) {
if (s[i].src) {
add(makeText('h4', 'script src="' + s[i].src + '"'));
iframe = makeTag('iframe');
iframe.src = s[i].src;
add(iframe);
} else {
add(makeText('h4', 'Inline script'));
add(makeText('pre', trim(s[i].innerHTML)));
}
}
void 0

View Partial Source

View source code of selected area without fiddling in developer console, just select the area and use this bookmarklet.

javascript: function getSelSource() {
x = document.createElement("div");
x.appendChild(window.getSelection().getRangeAt(0).cloneContents());
return x.innerHTML;
}

function makeHR() {
return nd.createElement("hr");
}

function makeParagraph(text) {
p = nd.createElement("p");
p.appendChild(nd.createTextNode(text));
return p;
}

function makePre(text) {
p = nd.createElement("pre");
p.appendChild(nd.createTextNode(text));
return p;
}
nd = window.open().document;
ndb = nd.body;
if (!window.getSelection || !window.getSelection().rangeCount || window.getSelection().getRangeAt(0).collapsed) {
nd.title = "Generated Source of: " + location.href;
ndb.appendChild(makeParagraph("No selection, showing generated source of entire document."));
ndb.appendChild(makeHR());
ndb.appendChild(makePre("<html>\n" + document.documentElement.innerHTML + "\n</html>"));
} else {
nd.title = "Partial Source of: " + location.href;
ndb.appendChild(makePre(getSelSource()));
};
void 0

Make Text – lowercase, UPPERCASE, Capitalize

By this you can change all text of any website to lowercase, UPPERCASE or Capitalize.

to lowercase

javascript: (function() {
var i, t, D = document;
for (i = 0; t = D.getElementsByTagName('textarea')[i]; ++i) t.value = t.value.toLowerCase(); 
var newSS, styles = '*{text-transform:lowercase}input,textarea{text-transform:none}';
if (D.createStyleSheet) {
D.createStyleSheet("javascript:'" + styles + "'");
} else {
newSS = D.createElement('link');
newSS.rel = 'stylesheet';
newSS.href = 'data:text/css,' + escape(styles);
D.getElementsByTagName("head")[0].appendChild(newSS);
}
})()

to make text UPPERCASE,

change in line 4 “lowercase” to “uppercase”

to make text Capitalize,

change in line 4 “lowercase” to “capitalize”

Let it Snow

You can make any tab of your browser like its snowing.

javascript: (t => {
function i() {
this.D = function() {
const t = h.atan(this.i / this.d);
l.save(), l.translate(this.b, this.a), l.rotate(-t), l.scale(this.e, this.e * h.max(1, h.pow(this.j, .7) / 15)), l.drawImage(m, -v / 2, -v / 2), l.restore()
}
}
window;
const h = Math,
r = h.random,
a = document,
o = Date.now;
e = (t => {
l.clearRect(0, 0, _, f), l.fill(), requestAnimationFrame(e);
const i = .001 * y.et;
y.r();
const s = L.et * g;
for (var n = 0; n < C.length; ++n) {
const t = C[n];
t.i = h.sin(s + t.g) * t.h, t.j = h.sqrt(t.i * t.i + t.f), t.a += t.d * i, t.b += t.i * i, t.a > w && (t.a = -u), t.b > b && (t.b = -u), t.b < -u && (t.b = b), t.D()
}
}), s = (t => {
for (var e = 0; e < p; ++e) C[e].a = r() * (f + u), C[e].b = r() * _
}), n = (t => {
c.width = _ = innerWidth, c.height = f = innerHeight, w = f + u, b = _ + u, s()
});
class d {
constructor(t, e = !0) {
this._ts = o(), this._p = !0, this._pa = o(), this.d = t, e && this.s()
}
get et() {
return this.ip ? this._pa - this._ts : o() - this._ts
}
get rt() {
return h.max(0, this.d - this.et)
}
get ip() {
return this._p
}
get ic() {
return this.et >= this.d
}
s() {
return this._ts = o() - this.et, this._p = !1, this
}
r() {
return this._pa = this._ts = o(), this
}
p() {
return this._p = !0, this._pa = o(), this
}
st() {
return this._p = !0, this
}
}
const c = a.createElement("canvas");
H = c.style, H.position = "fixed", H.left = 0, H.top = 0, H.width = "100vw", H.height = "100vh", H.zIndex = "100000", H.pointerEvents = "none", a.body.insertBefore(c, a.body.children[0]);
const l = c.getContext("2d"),
p = 300,
g = 5e-4,
u = 20;
let _ = c.width = innerWidth,
f = c.height = innerHeight,
w = f + u,
b = _ + u;
const v = 15.2,
m = a.createElement("canvas"),
E = m.getContext("2d"),
x = E.createRadialGradient(7.6, 7.6, 0, 7.6, 7.6, 7.6);
x.addColorStop(0, "hsla(255,255%,255%,1)"), x.addColorStop(1, "hsla(255,255%,255%,0)"), E.fillStyle = x, E.fillRect(0, 0, v, v);
let y = new d(0, !0),
C = [],
L = new d(0, !0);
for (var j = 0; j < p; ++j) {
const t = new i;
t.a = r() * (f + u), t.b = r() * _, t.c = 1 * (3 * r() + .8), t.d = .1 * h.pow(t.c, 2.5) * 50 * (2 * r() + 1), t.d = t.d < 65 ? 65 : t.d, t.e = t.c / 7.6, t.f = t.d * t.d, t.g = r() * h.PI / 1.3, t.h = 15 * t.c, t.i = 0, t.j = 0, C.push(t)
}
s(), EL = a.addEventListener, EL("visibilitychange", () => setTimeout(n, 100), !1), EL("resize", n, !1), e()
})()

Upvote All – Reddit

This bookmarklet upvotes all post in current view, You can use it to upvote all post in your favourite subreddit.

javascript: (function() {
var q = [];
$('.up').each(function() {
var that = this;
var f = function(index) {
$(that).trigger('click');
$(that).trigger('mousedown');
setTimeout(function() {
if (q[index]) {
q[index](index + 1);
} else {
if (upVoteTimer) {
window.clearTimeout(upVoteTimer);
}
}
}, 500);
};
q.push(f);
});
var upVoteTimer = window.setTimeout(function() {
q[0](1);
}, 50);
}());

Quick Search on APKMirror

Have you ever wanted to downgrade any android app but never found the download link of previous version of apk or

you just want to send apk to your friend or

want to download and install app on any device where google play store app is not installed or you don’t want to sign in (like Android emulators).

To use this bookmarklet just visit the app store page of any app and test it.

javascript: var regeX = /(?<=[?&]id=)[^&\n]+/g,
getGPSURL = location.href,
video_id, match = getGPSURL.match(regeX);
if (match) {
var url = "https://www.apkmirror.com/?s=" + escape(match) + "&post_type=app_release&searchtype=apk";
(w = open(url, "w", "location=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=500,height=800,modal=yes,dependent=yes")) ? setTimeout("w.focus()", 1E3): location = url
} else alert(" That's Not a Valid Google Play Store URL, \n Need URL like this \n https://play.google.com/store/apps/details?id=com.google.android.googlequicksearchbox")

Keep in mind all apps are not available on APKMirror.

I Hate Passwords

It’s a good practice to always use unique passwords while creating accounts on websites, So if one website’s password gets compromised your other accounts are safe.

If you are not using any password manager like LastPass, Bitwarden or 1Password then it’s really hard to keep track of all the passwords.

To solve this problem Nic Wolff has created a bookmarklet that will create a unique password for every website you signed up for,

The only thing you need to remember is 1 master password.

This bookmarklet will use the currently opened website’s domain name + your master password to create a unique password. This password will always be the same for you as long as your domain name and your master password.

What’s best about this extension is, if you run this bookmarklet on the sign-up or sign-in page it will automatically fill the password field with generated password.

javascript: var b64pad = '';
var chrsz = 8;

function b64_sha1(s) {
    return binb2b64(core_sha1(str2binb(s), s.length * chrsz));
}

function core_sha1(x, len) {
    x[len >> 5] |= 0x80 << (24 - len);
    x[((len + 64 >> 9) << 4) + 15] = len;
    var w = Array(80);
    var a = 1732584193;
    var b = -271733879;
    var c = -1732584194;
    var d = 271733878;
    var e = -1009589776;
    for (var i = 0; i < x.length; i += 16) {
        var olda = a;
        var oldb = b;
        var oldc = c;
        var oldd = d;
        var olde = e;
        for (var j = 0; j < 80; j++) {
            if (j < 16) w[j] = x[i + j];
            else w[j] = rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1);
            var t = safe_add(safe_add(rol(a, 5), sha1_ft(j, b, c, d)), safe_add(safe_add(e, w[j]), sha1_kt(j)));
            e = d;
            d = c;
            c = rol(b, 30);
            b = a;
            a = t;
        }
        a = safe_add(a, olda);
        b = safe_add(b, oldb);
        c = safe_add(c, oldc);
        d = safe_add(d, oldd);
        e = safe_add(e, olde);
    }
    return Array(a, b, c, d, e);
}

function sha1_ft(t, b, c, d) {
    if (t < 20) return (b & c) | ((~b) & d);
    if (t < 40) return b ^ c ^ d;
    if (t < 60) return (b & c) | (b & d) | (c & d);
    return b ^ c ^ d;
}

function sha1_kt(t) {
    return (t < 20) ? 1518500249 : (t < 40) ? 1859775393 : (t < 60) ? -1894007588 : -899497514;
}

function safe_add(x, y) {
    var lsw = (x & 0xFFFF) + (y & 0xFFFF);
    var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
    return (msw << 16) | (lsw & 0xFFFF);
}

function rol(num, cnt) {
    return (num << cnt) | (num >>> (32 - cnt));
}

function str2binb(str) {
    var bin = Array();
    var mask = (1 << chrsz) - 1;
    for (var i = 0; i < str.length * chrsz; i += chrsz) bin[i >> 5] |= (str.charCodeAt(i / chrsz) & mask) << (24 - i);
    return bin;
}

function binb2b64(binarray) {
    var tab = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
    var str = '';
    for (var i = 0; i < binarray.length * 4; i += 3) {
        var triplet = (((binarray[i >> 2] >> 8 * (3 - i % 4)) & 0xFF) << 16) | (((binarray[i + 1 >> 2] >> 8 * (3 - (i + 1) % 4)) & 0xFF) << 8) | ((binarray[i + 2 >> 2] >> 8 * (3 - (i + 2) % 4)) & 0xFF);
        for (var j = 0; j < 4; j++) {
            if (i * 8 + j * 6 > binarray.length * 32) str += b64pad;
            else str += tab.charAt((triplet >> 6 * (3 - j)) & 0x3F);
        }
    }
    return str;
}

function doIt() {
    var master = window.prompt('Enter your master password');
    if (master != '' && master != null) {
        host = document.location.href.match(/http(s*):\/\/([^/]+)/)[2];
        if (sld = host.match(/([^.]+\.([a-z][a-z][a-z]+|a[^abhjkpvy]|b[^cdklnpqux]|c[^bejkpqsty]|d[ejkmoz]|e[cegsu]|f[imor]|g[^cjkouvxz]|h[kmnrtu]|i[demnoqrst]|j[eop]|k[gimnpryz]|l[abcikrstuvy]|m[^bfijmz]|n[acefgloru]|om|p[aefhklmnrstwy]|qa|r[eosuw]|s[^fpqsw]|t[^abeiqrsuxy]|u[agsyz]|v[aceginu]|w[fs]|yt))$/i)) {
            domain = sld[0];
        } else {
            domain = host.match(/([^.]+\.[^.]+\.[a-z][a-z])$/i)[0];
        }
        var i = 0,
            j = 0,
            p = b64_sha1(master + ':' + domain).substr(0, 13) + '@1a',
            E = document.getElementsByTagName('input'),
            g = false;;
        for (j = 0; j < E.length; j++) {
            D = E[j];
            if (D.type == 'password') {
                D.value = p;
                D.focus();
                g = true;
            }
            if (D.type == 'text') {
                if (D.name.toUpperCase().indexOf('PASSWORD') != -1 || D.name.toUpperCase().indexOf('PASSWD') != -1) {
                    D.value = p;
                    D.focus();
                    g = true;
                }
            }
        }
        if (!g) {
            window.prompt('Your password for ' + domain + ' is', p)
        }
    }
}
doIt();
void(null);

If you don’t want to autofill password then just remove the for loop at the end of bookmarklet.

Common Questions About Bookmarklets

What is the function of Bookmarklet?

Bookmarklets are just a bookmarks of JavaScript code saved in place of URL, when you click on one of the Bookmarklet it executes the saved JavaScript in current browser.🤓

How do I make a Bookmarklet?

You can make simple bookmarklets on your own but I recommend using free tool to convert JavaScript code to bookmarkelt if you are totally beginner.
Like: https://caiorss.github.io/bookmarklet-maker/

Here is how you make your bookmarklet,

javascript:function(){ // your JavaScript code here })();

Don’t forget to URL encode this script otherwise it won’t work.

Do bookmarklets still work?

Yes, Bookmarklets still work; and will continue to work unless browsers decide to block them.

What does a Bookmarklet look like?

Bookmarklets are like JavaScript code placed in place of URL but they start with javascript:

Are bookmarklets safe?

Bookmarklets are safe as long as you know the underlying code.
Don’t run bookmarklets code from websites whom you don’t trust because that maybe harmful.

Do Bookmarklets work on mobile?

Yes, Bookmarklets work on mobile. (Android, iOS)

What are fun Bookmarklets?

Here you have some fun bookmarklets to try.
Make it Snow : This simple bookmarklets makes any page like Christmas holiday.
Wayback Search: Check any page in history how it looked.
Remove Colours: Remove colours from any website.
URL to QR: Generate QR code easily from URL.

Conclusion:

Hope you found something useful for your need,

Now we can say bookmarklets can do some pretty interesting things, these little piece of code can do heavy lifting for you.

If you are interested in making your own bookmarklet you can use these resources mentioned below.

Bookmarklet Maker (http only)

https://mrcoles.com/bookmarklet/

https://caiorss.github.io/bookmarklet-maker/

Share on:

1 thought on “41 Bookmarklets to Boost Your Productivity”

Comments are closed.

More to read

Let's Be Friends 🤘