My favorite bookmarklets

2019-04-21 Łukasz Nojek Comments 3 comments

Bookmarklets are an “ancient” idea to execute custom scripts on arbitrary pages. I haven’t really heard people using it nowadays, but there still seem to be present several interesting scripts to improve browsing. A few years ago I created several scripts to add custom formatting and features to Jira board and issue pages and recently I created an “add-on” to Trello and I discovered some bookmarklets created by others, which I list below.

Table of contents

Enable right click
Disable all event handlers
Print what you like
XRAY
Font Friend
Show Anchors
Show generated DOM
jQuerify
Vimeo playing speed
Edit Website
Pass a page to another website (Google Translate)
Trello Clutterless View
Todoist – sort current view by project name
Todoist – choose random task
Chrome – remove CSS styles

Enable right click

Link: https://stackoverflow.com/a/57741525/1454656

Drag and drop this link to your toolbar: Enable right click

It tries fixing one of the most annoying problems with modern pages – the right mouse button is disabled to prevent from copying content. As much as I support the copyrights, I am against forbidding making copies for private use. Besides, there are more options accessed with the right mouse click apart from copying. And all the content is still available with the Inspector tool (F12).

Due to more and more complex methods used by web authors, this bookmarklet is not 100% successful, but worth a try.

Source code:

javascript:function enableContextMenu(aggressive = true) { void(document.ondragstart=null); void(document.onselectstart=null); void(document.onclick=null); void(document.onmousedown=null); void(document.onmouseup=null); void(document.body.oncontextmenu=null); enableRightClickLight(document); if (aggressive) { enableRightClick(document); removeContextMenuOnAll('body'); removeContextMenuOnAll('img'); removeContextMenuOnAll('td'); } } function removeContextMenuOnAll(tagName) { var elements = document.getElementsByTagName(tagName); for (var i = 0; i < elements.length; i++) { enableRightClick(elements[i]); enablePointerEvents(elements[i]); } } function enableRightClickLight(el) { el || (el = document); el.addEventListener('contextmenu', bringBackDefault, true); } function enableRightClick(el) { el || (el = document); el.addEventListener('contextmenu', bringBackDefault, true); el.addEventListener('dragstart', bringBackDefault, true); el.addEventListener('selectstart', bringBackDefault, true); el.addEventListener('click', bringBackDefault, true); el.addEventListener('mousedown', bringBackDefault, true); el.addEventListener('mouseup', bringBackDefault, true); } function restoreRightClick(el) { el || (el = document); el.removeEventListener('contextmenu', bringBackDefault, true); el.removeEventListener('dragstart', bringBackDefault, true); el.removeEventListener('selectstart', bringBackDefault, true); el.removeEventListener('click', bringBackDefault, true); el.removeEventListener('mousedown', bringBackDefault, true); el.removeEventListener('mouseup', bringBackDefault, true); } function bringBackDefault(event) { event.returnValue = true; (typeof event.stopPropagation === 'function') && event.stopPropagation(); (typeof event.cancelBubble === 'function') && event.cancelBubble(); } function enablePointerEvents(el) { if (!el) return; el.style.pointerEvents='auto'; el.style.webkitTouchCallout='default'; el.style.webkitUserSelect='auto'; el.style.MozUserSelect='auto'; el.style.msUserSelect='auto'; el.style.userSelect='auto'; enablePointerEvents(el.parentElement); } enableContextMenu();

Disable all event handlers

Link: https://stackoverflow.com/a/57065599/1454656

Drag and drop this link to your toolbar: Disable all event handlers

If the previous method fails, you may disable all event handlers (in modern pages it will make the user interface barely usable, e.g. buttons may stop responding to clicks).

Source code:

javascript:function enableContextMenu(aggressive = false) { void(document.ondragstart=null); void(document.onselectstart=null); void(document.onclick=null); void(document.onmousedown=null); void(document.onmouseup=null); void(document.body.oncontextmenu=null); enableRightClickLight(document); if (aggressive) { enableRightClick(document); removeContextMenuOnAll("body"); removeContextMenuOnAll("img"); removeContextMenuOnAll("td"); } } function removeContextMenuOnAll(tagName) { var elements = document.getElementsByTagName(tagName); for (var i = 0; i < elements.length; i++) { enableRightClick(elements[i]); } } function enableRightClickLight(el) { el || (el = document); el.addEventListener("contextmenu", bringBackDefault, true); } function enableRightClick(el) { el || (el = document); el.addEventListener("contextmenu", bringBackDefault, true); el.addEventListener("dragstart", bringBackDefault, true); el.addEventListener("selectstart", bringBackDefault, true); el.addEventListener("click", bringBackDefault, true); el.addEventListener("mousedown", bringBackDefault, true); el.addEventListener("mouseup", bringBackDefault, true); } function restoreRightClick(el) { el || (el = document); el.removeEventListener("contextmenu", bringBackDefault, true); el.removeEventListener("dragstart", bringBackDefault, true); el.removeEventListener("selectstart", bringBackDefault, true); el.removeEventListener("click", bringBackDefault, true); el.removeEventListener("mousedown", bringBackDefault, true); el.removeEventListener("mouseup", bringBackDefault, true); } function bringBackDefault(event) { event.returnValue = true; (typeof event.stopPropagation === 'function') && event.stopPropagation(); (typeof event.cancelBubble === 'function') && event.cancelBubble(); } enableContextMenu();

Print what you like

Link: https://www.printwhatyoulike.com/bookmarklet

Drag and drop this link to your toolbar: Print what you like

It allows editing a page before printing it to remove advertisements, background and other unimportant information:

I’ll provide the source code in case the link doesn’t work anymore (note that it depends on printwhatyoulike.com service):

javascript:(function(){if(window['ppw']&&ppw['bookmarklet']){ppw.bookmarklet.toggle();}else{window._pwyl_home='//www.printwhatyoulike.com/';window._pwyl_pro_id=null;window._pwyl_bmkl=document.createElement('script');window._pwyl_bmkl.setAttribute('type','text/javascript');window._pwyl_bmkl.setAttribute('src',window._pwyl_home+'static/compressed/pwyl_bookmarklet_10.js');window._pwyl_bmkl.setAttribute('pwyl','true');document.getElementsByTagName('head')[0].appendChild(window._pwyl_bmkl);}})();

XRAY

Link: http://westciv.com/xray/

Drag and drop this link to your toolbar: XRAY

It provides information about some relevant styles for a selected element on a page:

I’ll provide the source code in case the link doesn’t work anymore (note that it depends on westciv.com service):

javascript:function%20loadScript(scriptURL)%20{%20var%20scriptElem%20=%20document.createElement('SCRIPT');%20scriptElem.setAttribute('language',%20'JavaScript');%20scriptElem.setAttribute('src',%20scriptURL);%20document.body.appendChild(scriptElem);}loadScript('http://westciv.com/xray/thexray.js');

Font Friend

Link: http://somadesign.ca/projects/fontfriend/

It allows previewing all Google Web Fonts in the context of the current page:

Note that the bookmarklet doesn’t work because the source files cannot be found. It can be easily fixed by downloading the sources and hosting by yourself.

Show Anchors

Link: http://www.sensefulsolutions.com/2009/12/show-anchors-bookmarklet.html

Drag and drop this link to your toolbar:

Note: the original bookmarklet has to be fixed to work on https:// pages by removing http: from it.

I’ll provide the fixed source code:

javascript:(function(){/* v2.2 -- //bit.ly/7akCur */function ls(u,c){var h=document.getElementsByTagName("head")[0];var s=document.createElement("script");s.src=u;var d=false;s.onload=s.onreadystatechange=function(){if(!d&&(!this.readyState||this.readyState=="loaded"||this.readyState=="complete")){d=true;c();s.onload=s.onreadystatechange=null;h.removeChild(s);}};h.appendChild(s);}var $;var loc=location.href;var anchorPos=location.href.lastIndexOf('#');if(anchorPos>-1){loc=loc.substring(0,anchorPos);/* if already has an anchor, it needs to be replaced */}function a(e,n,t){$('<a href="'+loc+'#'+n+'" title="'+t+': '+n+'"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGdSURBVDjLpVMxa8JAFL6rAQUHXQoZpLU/oUOnDtKtW/MDBFHHThUKTgrqICgOEtd2EVxb2qFkKTgVChbSCnZTiVBEMBRLiEmafleCDaWxDX3w8e7dve+7l3cv1LZt8h/jvA56vV7DNM20YRgE/jyRSOR+ytvwEgAxvVwui/BF+LTvCtjNwKvj/X8CbgXPOHMEZl559HsTu93uPQi7jBiNRgMEx8PR0GIxRB+y2eze2gqQeAXoSCaqqu5bpsWIdyzGvvRrBW7rdDo2I6ZSKeq7B8x0XV/bwJWAJEnHSMwBDUEQWq5GfsJthUJhlVuv11uckyiGgiH2RWK73RYRb2cymbG7gnK5vIX9USwWI1yAI/KjLGK7teEI8HN1TizrnZWdRxxsNps8vI3YLpVKbB2EWB6XkMHzgAlvriYRSW+app1Mpy/jSCRSRSyDUON5nuJGytaAHI/vVPv9p/FischivL96gEP2bGxorhVFqYXDYQFCScwBYa9EKU1OlAkB+QLEU2AGaJ7PWKlUDiF2BBw4P9Mt/KUoije+5uAv9gGcjD6Kg4wu3AAAAABJRU5ErkJggg%3D%3D" /></a>').insertBefore(e);}ls("//ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js",function(){$=jQuery;$("a[name]").each(function(i){a(this,this.name,"NAME");});$("[id]:not(input[type='hidden'])").each(function(i){a(this,this.id,"ID");});});})()

Show generated DOM

Drag and drop this link to your toolbar: Show generated DOM

It shows the generated contents of a page after JavaScript DOM manipulations in contrast to what you can find in the view page source option in a browser (CTRL + U) that will show what was transferred from the server.

I'll provide the source code:

javascript:(function(){c=unescape(document.documentElement.innerHTML);c=c.replace(/&/g,'&');c=c.replace(/</g,'<');c=c.replace(/>/g,'>');c=c.replace(/</g,'<');c=c.replace(/>/g,'>');document.write('<html><head><title>Source%20of%20Page<\/title><\/head><body><pre>'+c+'<\/pre><\/body><\/html>');x.document.close();})();

jQuerify

Link: https://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet

Drag and drop this link to your toolbar: jQuerify

It adds the jQuery object ($) to the page to allow doing quick experiments with the page in the browser's dev tools.

I fixed the source a bit to make it work on https pages as well:

javascript:(function(){var el=document.createElement('div'),b=document.getElementsByTagName('body')[0],otherlib=!1,msg='';el.style.position='fixed',el.style.height='32px',el.style.width='220px',el.style.marginLeft='-110px',el.style.top='0',el.style.left='50%25',el.style.padding='5px 10px',el.style.zIndex=1001,el.style.fontSize='12px',el.style.color='#222',el.style.backgroundColor='#f99';function showMsg(){var txt=document.createTextNode(msg);el.appendChild(txt),b.appendChild(el),window.setTimeout(function(){txt=null,typeof jQuery=='undefined'?b.removeChild(el):(jQuery(el).fadeOut('slow',function(){jQuery(this).remove()}),otherlib&&(window.$jq=jQuery.noConflict()))},2500)}if(typeof jQuery!='undefined')return msg='This page already using jQuery v'+jQuery.fn.jquery,showMsg();typeof $=='function'&&(otherlib=!0);function getScript(url,success){var script=document.createElement('script');script.src=url;var head=document.getElementsByTagName('head')[0],done=!1;script.onload=script.onreadystatechange=function(){!done&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')&&(done=!0,success(),script.onload=script.onreadystatechange=null,head.removeChild(script))},head.appendChild(script)}getScript('//code.jquery.com/jquery.min.js',function(){return typeof jQuery=='undefined'?msg='Sorry, but jQuery was not able to load':(msg='This page is now jQuerified with v'+jQuery.fn.jquery,otherlib&&(msg+=' and noConflict(). Use $jq(), not $().')),showMsg()})})();

Vimeo playing speed

Drag and drop this link to your toolbar: Vimeo playing speed

If the video you are playing in Vimeo does not provide controls to change the playing speed, you can try running this bookmarklet.

Here is its source code:

javascript:var v = document.querySelector('video'); var t = prompt('Set the playback rate'); v.playbackRate = parseFloat(t)

Edit Website

Drag and drop this link to your toolbar: Edit website

It will provide the ability to edit the text on a page without using the browser's dev tools. Just click in any text on a page and start typing.

The source code is very short:

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

Pass a page to another website (Google Translate)

If you need to send the current page as a parameter to another website, you can use this bookmarklet. It will compose a new URL consisting of static text and the URL of the current page (location.href). For example, the below bookmarklet will send the current page to the Google Translate service.

Source code - opens the translation in the same tab as the current page:

javascript:location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|en&tbb=1';

Source code - opens the translation in a new tab:

javascript:window.open('http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|en&tbb=1');

Trello Clutterless View

Link: Trello Power-Up to hide labels and fields from card covers

And naturally, my own bookmarklet to hide labels, dates and custom fields from Trello cards.

Todoist - sort current view by project name

I created a bookmarklet that sorts the current view (e.g. Today view) by project names. Although the script is not perfect (you have to refresh the page to navigate to another project), it does the job.

Drag and drop this link to your toolbar: Todoist - sort

Source code:

javascript:(function(){

function getScript(url,success){var script=document.createElement('script');script.src=url;var head=document.getElementsByTagName('head')[0],done=!1;script.onload=script.onreadystatechange=function(){!done&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')&&(done=!0,success(),script.onload=script.onreadystatechange=null,head.removeChild(script))},head.appendChild(script)}
getScript('//code.jquery.com/jquery.min.js',function(){
	jQuery('#agenda_view ul.items').each(function() {
		const $ul = jQuery(this);
		const $lis = $ul.children('.task_item');
		$lis.detach();
		
		$lis.sort((a,b) => {
			const ta = jQuery(a).find('.project_item__name').text();
			const tb = jQuery(b).find('.project_item__name').text();
			if (ta < tb) return -1;
			if (ta > tb) return 1;
			return 0;
		});
		
		$lis.appendTo($ul);
	});
})
})();

Todoist - choose random task

Link: Reddit

Drag and drop this link to your toolbar: Todoist - random

This bookmarklet selects a random task visible in the current view and opens it.

javascript: items = document.getElementsByClassName('note_icon'); items[Math.floor(Math.random()*items.length)].click();

Chrome - remove CSS styles

I miss the ability to remove all CSS styles from a page and show it unformatted in Chrome. Probably the shortest workaround is just removing the head section from the current page, since most styles are defined in the <head> section. Although there are pages with inline styles and styles imported outside of the head section, so far the following solution is good enough for me.

Drag and drop this link to your toolbar: Remove CSS styles

Source code:

javascript: document.head.parentNode.removeChild(document.head);

0 0 votes

Article Rating

Łukasz Nojek – blog

Software development and architecture

My favorite bookmarklets

2019-04-21 Łukasz Nojek Comments 3 comments

Enable right click

Disable all event handlers

Print what you like

XRAY

Font Friend

Show Anchors

Show generated DOM

jQuerify

Vimeo playing speed

Edit Website

Pass a page to another website (Google Translate)

Trello Clutterless View

Todoist - sort current view by project name

Todoist - choose random task

Chrome - remove CSS styles

Want more?

Share!