Bookmarklets I Use

  • "Remove sticky" is a must have on the modern web. Probably my most used bookmarklet.

    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
    
    Open in wayback machine. For when you follow a link and there's nothing there anymore.

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

  • There’s a fun way around that specific “remove sticky” bookmarklet, because it only looks at elements within the body. But did you know: you can actually show content from the head! For example, you could display the document title and make it sticky:

      head, title {
        display: block;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
      }
    
    An example of using this technique (minus stickyness) in real life (for some loose value of “real life”): https://github.com/martenbjork/github-xp/issues/13

    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.

  • On the video faster/slower playback thing: it would be better for the slower link to multiply by 0.8 rather than 0.75, so that it’s the opposite of faster. Currently each time you click faster once and slower once, you end up at 93.75% speed rather than 100%.

  • I was kind of impressed by Spritz[0] speed reader a few years ago when I tried it. Fun to see their entire(?) business which raised over $4 million[1] in VC replaced by a JavaScript booklet.

    [0] https://spritz.com/

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

  • I use this bookmarklet to collapse all the top comment threads on a hacker news story. I usually do this for stories where there's a lot of threads, and use the currently open thread is my "bookmark". It collapses 1 thread a second (any faster and the toggle request may not succeed):

      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; }

  • Thanks for sharing this great collection. I've just added your 'remove sticky' bookmarklet.

    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

  • I love bookmarklets. There are many fantastic ones here: https://www.squarefree.com/bookmarklets/

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

  • Can any Firefox experts help me out with a bookmarklet, please?

    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;
       })()
    
    But, this doesn't work. In the console I get the error:

    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?

  • Bookmarklets are wonderful! I will certainly use that "remove sticky". My favorites:

    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));
    
    
    Edit any page:

      javascript:document.body.contentEditable = true; void 0;
    
    Make the right click work again:

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

  • improved 'remove sticky', some websites set overflow on BODY element itself, or get cute with whole document class, this will catch those.

        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")
        })()

  • I was using the "Remote Sticky" bookmarklet in Chrome for 1-2 years now but when I moved to Firefox I switched to an add-on which does it: https://addons.mozilla.org/en-CA/firefox/addon/kill-sticky/

    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.

  • Shameless yet relevant plug: https://bookmarkify.it/

    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

  • One remark regarding the speed bookmarks: it should be .8 instead of .75 as 1 / 1.25 is .8, not .75.

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

  • This is great, thank you for sharing.

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

  • This one is useful sometimes: javascript:document.body.contentEditable = true; void 0;

    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.

  • I've been using Zap and Zap Colors from this site for the past 15+ years: https://www.squarefree.com/bookmarklets/zap.html

  • Don't forget this one!

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

  • Chrome bookmarklets to access archive.today cache

    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; })();

  • A shameless plug: https://zipl.ink/ To send any open webpage to your mobile without any bluetooth or airdrop

  • Highlights all hyperslinks on a page in yellow

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

  • Here is a simple bookmarklet to quickly turn any browser tab to a rich text editor:

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

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

  • I also wrote about a few I find useful, biggest one is 'Sane Color', it changes the text to be black on white. (Some sites have very hard to read colors, and sometimes I prefer light mode over dark) https://loftie.com/post/3-useful-bookmarklets-i-use-almost-d...

  • It's a good submission, but lists can't be Show HNs. Please read the rules: https://news.ycombinator.com/showhn.html.

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

  • I'd like to use one or more bookmarklets to (1) define a standard size and location for my Safari windows, and (2) reset the size and location of the current window to the standard settings. Can bookmarklets persist information for later use?

  • It's great that anyone can just drag drop bookmarklet from website into bookmark bar and just use it without any restrictions, unlike extensions. No signing and uploading to "extension store".

  • I use remove sticky bookmarklet frequently. On Firefox one can place a bookmark wherever one wants, so I have a Panic! button to unstick/unfix those dreadful headers.

  • Is there any way around having to click a bookmarklet on the bookmarks toolbar?

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

  • Bookmarklets always seem like an idea whose time is past, but they never go away.

  • I adore bookmarklets, I use:

        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();})()
    
    To quickly edit the css style of anything.

    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)()
    
    To color all blocks in a page.

    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.

  • And some, I don't.

  • I moved over to Violentmonkey (https://violentmonkey.github.io) so everything I needed bookmarklets for is now automated, instead of having to hunt around my bookmark folders.

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