
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,
This bookmarklet Alerts with the currently opened URL
javascript:alert(document.URL)
Drag after selecting the above JavaScript code to the bookmark bar.

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.
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.
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; jSort 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 nCols) nCols = tab.rows[i].cells.length; return nCols; } function makeHeaderLink(tableNo, colNo, ord) { var link; link = document.createElement('a'); link.href = "https://www.thetechbasket.com/most-useful-bookmarklets/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; iAdd 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; kTranspose 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 j) ++y; N.rows[y].appendChild(v); for (z = 0; zBullet 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; jEncrypt 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 :- NOPQRSTUVWXYZABCDEFGHIJKLMnopqrstuvwxyzabcdefghijklmYou 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 -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; jKeep 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 0What 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] " + C + " words"; for (i in W) s += W[i][0] + ":" + W[i][1] + "
"; 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.hostnameDown For Me or Down For Everyone
Check if a website is down for you only or for everyone.
javascript: location = 'https://downforeveryoneorjustme.com/' + location.hostnameRemove 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 = "" + (j == 3 ? "third-party " + t : t) + ""; 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; kRemove 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; slURL 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; iView 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; iView 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("\n" + document.documentElement.innerHTML + "\n")); } else { nd.title = "Partial Source of: " + location.href; ndb.appendChild(makePre(getSelSource())); }; void 0