41 Bookmarklets to Boost Your Productivity

A bookmarklet is a JavaScript application that can be stored as a bookmark in browsers like a 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 a bookmarklet is just a piece of JavaScript code, So possibilities are endless what you can do with it.

Read more about Bookmarklet on Wikipedia

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 bookmarklets will save you time and boost your productivity.

How Bookmarklet Look Like

Here is a simple example of a bookmarklet,

Advertisements

This bookmarklet Alerts with the currently opened URL

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 the 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.

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

Advertisements

Easy to Customize: You can anytime edit any of the bookmarklet’s 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 a List of Useful Bookmarklets

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

Just drag the button below the bookmarklet to the 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 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 was 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 for something on Google but didn’t satisfy with the search results, 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 the 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 purposes like you searched something on website 1 and want to search the same thing on website 2, just replace the location URL with the search query URL of website 2,

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

Advertisements

Google Search but Limited to 1 Website

Search in Google while limiting the search result to the 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 are 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 irritated when some websites disable right click

javascript: void(document.oncontextmenu = null)

Read more 👉🏻 How to Enable Right Click and Copy Paste

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 usernames and passwords submitted by other users so we can log in 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 websites just add this bookmarklet to your browser and you are done.

We have a full post about How to Download YouTube Video, check out where we mentioned how you can download a YouTube video by just changing a few letters in the 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 the 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 a long messy URL,

It is useful if you want to open the same page on mobile, click on this bookmarklet to generate a 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
}
})();

Read More 👉🏻 QR Code Generator

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 at the password, you can use this handy password viewer to check the hidden password in the 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 a 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 if you want to count how many rows are available in the table, this bookmarklet will come in 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 a numbered list, you can make an unordered list into an 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, coupon 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 with 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 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 the font used in any webpage by just clicking on the bookmarklet and hovering over text to know details about it, you can even write your own text to see what 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 times any word is used on a webpage, this bookmarklet will come in 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()
}
})()

Read More 👉🏻Online Word Counter Tool

Check or List All Alt Tags

For SEO purposes and for the user perspective developers need to set relevant alt tags for all images. These alt tags tell search engines and users about image content.

Check Alt is bookmarklet highlights images with a green border if the image has 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 their 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 a simple bookmarklet that tells you the 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, and 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 on 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 cookies, 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 the website by this bookmarklet.

By deleting cookie you will be logged out from that website.

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 the 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 the Link before running the bookmarklet just hover over new links you will see the content in the 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 an article point to an 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 the developer console you can check any page’s performance metrics in a 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 the page take most of the time in loading, It also tells the time of page first paint and fully 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 stylesheets used in the currently opened page including the 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 the page whether 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 the source code of the selected area without fiddling in the 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 it’s 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 posts in the current view, You can use it to upvote all posts 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 the previous version of apk or

Do you just want to send apk to your friend or

want to download and install the app on any device where the 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 are.

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 bookmarks of JavaScript code saved in place of URL, when you click on one of the Bookmarklets it executes the saved JavaScript in the current browser.🤓

How do I make a Bookmarklet?

You can make simple bookmarklets on your own but I recommend using a free tool to convert JavaScript code to a bookmarklet if you are a total beginner.
Like: https://bookmarklet.one/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 that you don’t trust because that may be 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 bookmarklet 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, this little piece of code can do the heavy lifting for you.

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

Share on:

1 thought on “41 Bookmarklets to Boost Your Productivity”

Comments are closed.

More to Read from Internet

Let's Be Friends 🤘