Bookmarklets I Use

A couple of others I use frequently:

Go to referrer. This fixes an infuriating missing feature in browsers, where links opened in new tabs lose their history (why?). Often this workaround will work:

    javascript:if(!document.referrer)%20alert(%22No%20referrer!%22);%20else%20document.location%20=%20document.referrer;%20void%200

    javascript:{var%20url=location.href;void(window.open("http://wayback.archive.org/web/*/"+url));}

  head, title {
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
  }

You can apply this technique to <script> and <style> content as well to get other text nodes that are normally hidden to appear on-screen. You could also use ::before and ::after psuedoelements on other elements (and for bonus marks remember you can use attr() within their content). But no regular formatting within the head. Well, unless you append the nodes to the head with JavaScript. Yeah, the DOM lets you create nominally illegal structures that can’t be serialised again.

[0] https://spritz.com/

[1] https://www.crunchbase.com/organization/spritz#section-overv...

  javascript: var TIMER_WAIT = 1000; var timer = 0; var topComment = []; var list = document.getElementsByClassName('togg'); for (let item of list) { if (item.parentElement.parentElement.parentElement.parentElement.getElementsByTagName('img')[0].width == 0) topComment.push(item) }; for (let item of topComment) { setTimeout(() => { console.log("toggling comment by " + item.parentNode.getElementsByClassName('hnuser')[0].innerText); item.click(); }, timer + TIMER_WAIT); timer = timer + TIMER_WAIT; }

In case anyone is wondering, bookmarklets also work on mobile devices. You can simply go to the address bar and type the name of the bookmarklet (e.g.: 'remove sticky') and then click the option that shows up in the list.

Adding them to your mobile browser is a bit tricky though. I've written a small guide that helps users of my app [0] add my bookmarklet to Android/iOS devices. You can follow these steps/screenshots to add other bookmarklets - https://www.emailthis.me/web-page-to-email/how-to-save#andro...

[0] https://www.emailthis.me

They haven't been updated in a while but they work perfectly in latest FF (and Chrome I suppose).

A HN comment a while ago reported that you can switch to the 'reader mode' view of a website by prefixing the URL with 'about:reader?url=' - this can be useful for some pages where FF doesn't put the 'reader mode' button in the URL bar.

This seemed like an ideal use for a bookmarklet, so I created one as follows:

   javascript:(function(){
       window.location = "about:reader?url=" + window.location;
   })()

TypeError: Location.href setter: Access to 'about:reader?url=https://www.example.com/' from script denied.

Is there any way to work around this, or do bookmarklets simply not have the permissions to alter the URL like this?

Add jQuery to any page:

  void((function(doc){if(typeof jQuery=='undefined'){var script_jQuery=document.createElement('script');script_jQuery.setAttribute('src','//code.jquery.com/jquery-latest.min.js');document.body.appendChild(script_jQuery);console.log('jQuery added');}else{console.log('jQuery already included');}})(document));

  javascript:document.body.contentEditable = true; void 0;

  javascript:void(document.onmousedown='return true');void(document.onmouseup='return true');void(document.oncontextmenu='return true')

    javascript: (function() {
        void([].forEach.call(document.querySelectorAll('body*'), e => /fixed|sticky/.test(getComputedStyle(e).position) && e.parentNode.removeChild(e)));
        document.body.style.overflow = 'auto';
        document.body.style.height = 'auto';
        document.all[0].removeAttribute("class")
    })()

The benefit of using the add-on in Firefox is it a keyboard shortcut (that you can customize). So now instead of having to find+click a bookmarklet, I just hit cmd+shift+k on most sites I visit.

My free service where you can create bookmarklets. I use them for various things. One thing I am quite happy about lately is generating random things for forms. I use this when I test things in the browser at work, signup flows, etc.

Another thing that is useful is turning on dark mode for things: https://bookmarkify.it/33985

As is, if you + - + -, you end up at 0.87890625 instead of 1.

I recently created this one to help with my particular GitHub workflow - instantly diff any commit with the current master branch: https://gist.github.com/zmarkan/503789d31acf385e44f13b0b3c3c...

It lets you directly edit most content on a site. Kind of nice for quickly changing the wording to see if it fits nicely in a layout.

You can paste it into the URL bar to test it out. Just manually add "javascript:" since browsers tend to strip that out on paste.

   javascript:window.location=%22http://news.ycombinator.com/submitlink?u=%22+encodeURIComponent(document.location)+%22&t=%22+encodeURIComponent(document.title)

Open the oldest archive of the current url:

javascript:(function(){ document.location.href = "http://archive.is/oldest/" + document.location.href; })();

Open the most recent archive of the current url:

javascript:(function(){ document.location.href = "http://archive.is/newest/" + document.location.href; })();

    javascript:(function(){for(i=0;i<document.links.length;i++)document.links[i].style.backgroundColor='#ffff00';})();

data:text/html, <body contenteditable style="margin:2rem;">

Open the above as URL in a browser tab and bookmark.

(I've popped "Show HN" off the title now.)

I do not keep a bookmarks toolbar active, and also prefer to do things on the keyboard whenever possible.

    javascript:(function(){function%20init(){var%20newline=unescape(%22%%22+%220A%22);dead=false;oldCSS=null;x=opener;ta=document.f.ta;ta.select();ta.value=%22/*%20Type%20CSS%20rules%20here%20and%20they%20will%20be%20applied%20to%22+newline+%22whatever%20page%20is%20loaded%20in%20that%20tab,%20as%20long%20as%20the%20pages%22+newline+%22are%20from%20'%22+location.host+%22'%22+newline+%22and%20you%20keep%20this%20window%20open.%20*/%22+newline+newline;update();}function%20update(){try{if(!x||x.closed){ta.style.backgroundColor=%22#ddd%22;return;}x.bookmarkletStyleSheet;}catch(er){ta.style.backgroundColor=%22#fdc%22;setTimeout(update,150);dead=true;return;}if(dead){dead=false;ta.style.backgroundColor=%22%22;oldCSS=null;}if(!x.testStyles){var%20newSS;newSS=x.document.createElement(%22link%22);newSS.rel=%22stylesheet%22;newSS.type=%22text/css%22;x.document.getElementsByTagName(%22head%22)[0].appendChild(newSS);x.testStyles=newSS;oldCSS=null;}if(oldCSS!=ta.value){oldCSS=ta.value;if(window.opera)x.testStyles.href=%22javascript:unescape('%22+escape(ta.value)+%22')%22;else%20if(navigator.userAgent.indexOf(%22MSIE%22)!=-1)x.testStyles.href=%22javascript:unescape('%22+escape(escape(ta.value))+%22')%22;else%20x.testStyles.href=%22data:text/css,%22+escape(ta.value);}setTimeout(update,150);}y=window.open('','','resizable,width=500,height=300');y.document.write('<title>New%20CSS%20Style%20Sheet</title><style>.ec%20{%20width:%20100%;%20height:%20100%;%20border:%20none;%20margin:%200px;%20padding:%200px;%20}</style><body%20class=%22ec%22><form%20name=%22f%22%20style=%22margin:%200px;%22%20class=%22ec%22><textarea%20name=%22ta%22%20wrap=%22soft%22%20style=%22margin:%200px;%20border:%200px;%20width:100%;%20height:100%;%22%20class=%22ec%22></textarea><script>'+update+init+'init();<'+'/script>');y.document.close();})()

And:

    javascript:(function()%7Blet%20style%20%3D%20document.getElementById('__colorallblocks__')%3Bif%20(style)%7Bstyle.remove()%3B%7D%20else%20%7Bstyle%20%3D%20document.createElement('style')%3Bstyle.id%20%3D%20'__colorallblocks__'%3Bstyle.innerHTML%20%3D%20%60*%20%7B%20background-color%3A%20rgba(255%2C0%2C0%2C.2)%3B%20%7D*%20*%20%7B%20background-color%3A%20rgba(0%2C255%2C0%2C.2)%3B%20%7D*%20*%20*%20%7B%20background-color%3A%20rgba(0%2C0%2C255%2C.2)%3B%20%7D*%20*%20*%20*%20%7B%20background-color%3A%20rgba(255%2C0%2C255%2C.2)%3B%20%7D*%20*%20*%20*%20*%20%7B%20background-color%3A%20rgba(0%2C255%2C255%2C.2)%3B%20%7D*%20*%20*%20*%20*%20*%20%7B%20background-color%3A%20rgba(255%2C255%2C0%2C.2)%3B%20%7D*%20*%20*%20*%20*%20*%20*%20%7B%20background-color%3A%20rgba(255%2C0%2C0%2C.2)%3B%20%7D*%20*%20*%20*%20*%20*%20*%20*%20%7B%20background-color%3A%20rgba(0%2C255%2C0%2C.2)%3B%20%7D*%20*%20*%20*%20*%20*%20*%20*%20*%20%7B%20background-color%3A%20rgba(0%2C0%2C255%2C.2)%3B%20%7D%60%3Bdocument.body.appendChild(style)%3B%7D%7D)()

But if the equivalent exist as a Firefox add on, I use that instead, because it bypasses many restrictions.

In this article, the video BM can be replaced with the excellent "Enhancer for Youtube", at least on Youtube: https://addons.mozilla.org/fr/firefox/addon/enhancer-for-you.... Just being able to change the speed of the video using the mouse wheel is a god send.

Same for archive.li or the way back machine.

But I'll steal the space scroll one, this red bar is nifty.

You can even add them as right-click menu options for those scripts which you rarely use!