
Bookmarklets I Use - adminu
https://www.ph-uhl.com/0010-Bookmarklets/
======
paol
"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));}

~~~
arantius
I felt the same until I wrote [https://arantius.com/misc/greasemonkey/fixed-
only-at-top.use...](https://arantius.com/misc/greasemonkey/fixed-only-at-
top.user.js) which works automatically. Sticky bits are visible at first,
disappearing only when you scroll down.

------
chrismorgan
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](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.

~~~
schmappel
Mind blown. I had no idea.

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

------
sixhobbits
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/](https://spritz.com/)

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

~~~
Wowfunhappy
Does that Bookmarklet work for others? Seems to do nothing for me in Firefox.

~~~
bootlooped
I also cannot get it to work in Firefox.

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

------
bharani_m
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...](https://www.emailthis.me/web-page-to-email/how-to-save#android-
mobile-tablet)

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

~~~
emayljames
Doesn't unfortunately work on Firefox for Android.

------
notRobot
I love bookmarklets. There are many fantastic ones here:
[https://www.squarefree.com/bookmarklets/](https://www.squarefree.com/bookmarklets/)

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

------
joosters
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/'](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?

~~~
bryanrasmussen
[https://developer.mozilla.org/en-
US/docs/Mozilla/Firefox/The...](https://developer.mozilla.org/en-
US/docs/Mozilla/Firefox/The_about_protocol)

at the bottom

Note: You must access about: protocol pages by typing them into the address
bar. Attempts to navigate through window.location will throw — Error: Access
to 'about:addons' from script denied.

~~~
nattaylor
GP, You could put the link into a window.prompot() for easy copy/paste into
the address bar

~~~
bryanrasmussen
Well, I guess you could probably use document.execCommand to do it, unless
that is blocked for JavaScript uri scheme access, or ask for async clipboard
access (I wonder what happens if you ask for it from JavaScript uri, should
take time to investigate some day)

------
owenversteeg
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')

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

------
bretthopper
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/](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.

~~~
chrisweekly
FTR, there's a little cottage industry of text expanders (whether dedicated or
part of eg Alfred's suite of tools) which provide complete control over
keyboard shortcuts and scripting / automation.

------
mosselman
Shameless yet relevant plug:
[https://bookmarkify.it/](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](https://bookmarkify.it/33985)

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

~~~
lucb1e
There is a reset bookmarklet for that, but I agree that 2 bookmarklets to
control speed are better than needing 3 (or having to reload the page+video).

~~~
meue
Playback Keyboard Shortcuts

CTRL+[ Decrease Speed

CTRL+] Increase Speed

CTRL+\ Set Increment Unit

CTRL+' Set Speed to Specific Rate

CTRL+; Reset Playback to Default

    
    
        javascript:(function()%7B(function()%20%7Bvar%20rateUnit%20%20%20%20%3D%200.2%3Bvar%20osdTimeout%20%20%3D%203000%3Bvar%20eleOSD%2C%20osdTimer%3Bfunction%20showOSD(rate)%20%7Bif%20(eleOSD)%20%7BeleOSD.textContent%20%3D%20rate%20%2B%20%22X%22%3B%7D%20else%20%7BeleOSD%20%3D%20document.createElement(%22DIV%22)%3BeleOSD.style.cssText%20%3D%20%22position%3Afixed%3Bz-index%3A999999999%3Bright%3A5px%3Bbottom%3A5px%3Bmargin%3A0%3Bpadding%3A5px%3Bwidth%3Aauto%3Bheight%3Aauto%3Bfont%3Abold%2010pt%2Fnormal%20monospace%3Bbackground%3A%23444%3Bcolor%3A%23fff%22%3BeleOSD.textContent%20%3D%20rate%20%2B%20%22X%22%3Bdocument.body.appendChild(eleOSD)%3B%7DclearTimeout(osdTimer)%3BosdTimer%20%3D%20setTimeout(function()%20%7BeleOSD.remove()%3BeleOSD%20%3D%20null%3B%7D%2C%20osdTimeout)%3B%7DaddEventListener(%22keydown%22%2C%20function(ev)%20%7Bvar%20ele%20%3D%20document.querySelector(%22VIDEO%22)%2C%20rate%2C%20inp%3Bif%20(ele%20%26%26%20ev.ctrlKey%20%26%26%20!ev.shiftKey%20%26%26%20!ev.altKey)%20%7Brate%20%3D%20rate%20%3D%20ele.playbackRate%3Bswitch%20(ev.key)%20%7Bcase%20%22%5B%22%3Arate%20-%3D%20rateUnit%3Bif%20(rate%20%3C%200.1)%20rate%20%3D%200.1%3Bbreak%3Bcase%20%22%5D%22%3Arate%20%2B%3D%20rateUnit%3Bif%20(rate%20%3E%2016)%20rate%20%3D%2016%3Bbreak%3Bcase%20%22%5C%5C%22%3Aif%20((inp%20%3D%20prompt(%22Enter%20playback%20rate%20increment%2Fdecrement%20unit.%22%2C%20rateUnit))%20%3D%3D%3D%20null)%20return%3Bif%20(isNaN(inp%20%3D%20parseFloat(inp.trim()))%20%7C%7C%20(inp%20%3C%3D%200)%20%7C%7C%20(inp%20%3E%204))%20%7Balert(%22Number%20must%20be%20greater%20than%20zero%2C%20and%20less%20or%20equal%20to%204.%22)%3Breturn%3B%7DrateUnit%20%3D%20inp%3Breturn%3Bcase%20%22'%22%3Aif%20((inp%20%3D%20prompt(%22Enter%20playback%20rate.%5Cn(1.0%20%3D%20Normal)%22%2C%20rate))%20%3D%3D%3D%20null)%20return%3Bif%20(isNaN(inp%20%3D%20parseFloat(inp.trim()))%20%7C%7C%20(inp%20%3C%200.1)%20%7C%7C%20(inp%20%3E%2016))%20%7Balert(%22Number%20must%20be%20between%200.1%20to%2016%20(inclusive).%22)%3Breturn%3B%7Drate%20%3D%20inp%3Bbreak%3Bcase%20%22%3B%22%3Arate%20%3D%201%3Bbreak%3Bdefault%3Areturn%3B%7Drate%20%3D%20parseFloat(rate.toFixed(2))%3Bele.playbackRate%20%3D%20rate%3Bif%20(osdTimeout%20%3E%200)%20showOSD(ele.playbackRate)%3B%7D%7D)%3B%7D)()%7D)()

------
zan
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...](https://gist.github.com/zmarkan/503789d31acf385e44f13b0b3c3c7af4)

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

------
FiddlerClamp
I've been using Zap and Zap Colors from this site for the past 15+ years:
[https://www.squarefree.com/bookmarklets/zap.html](https://www.squarefree.com/bookmarklets/zap.html)

------
nvr219
Don't forget this one!

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

------
textread
Chrome bookmarklets to access archive.today cache

Open the oldest archive of the current url:

javascript:(function(){ document.location.href =
"[http://archive.is/oldest/"](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/"](http://archive.is/newest/") \+
document.location.href; })();

------
raksoras
A shameless plug: [https://zipl.ink/](https://zipl.ink/) To send any open
webpage to your mobile without any bluetooth or airdrop

------
KoenDG
Highlights all hyperslinks on a page in yellow

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

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

~~~
madars
You can also make any existing page editable (and then back to non-editable):

    
    
       javascript:if(document.body.contentEditable=="true"){ document.body.contentEditable="false"; document.designMode="off"; document.body.spellcheck=true;} else { document.body.spellcheck=false; document.body.contentEditable="true"; document.designMode="on";}; void(0);

~~~
chrismorgan
If you’re putting the document into design mode (the best way of doing it),
why are you also setting contenteditable on the body?

Shortened version of your bookmarklet, for fun:

    
    
      javascript:document.designMode=(document.body.spellcheck=document.designMode=='on')?'off':'on'

------
lpellis
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...](https://loftie.com/post/3-useful-bookmarklets-i-use-almost-
daily/)

------
dang
It's a good submission, but lists can't be Show HNs. Please read the rules:
[https://news.ycombinator.com/showhn.html](https://news.ycombinator.com/showhn.html).

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

~~~
lone-commenter
I'm perplexed:

> Blog posts, sign-up pages, curated lists, and other reading material can't
> be tried out, so can't be Show HNs.

It's a list, but it's not intended to be consumed the way a list of books or
other resources is meant to. It's a list of useful scripts that can be tried
right away.

------
chmaynard
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?

~~~
ptrklly
I use Spectacle to do this, like it a lot:
[https://www.spectacleapp.com](https://www.spectacleapp.com)

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

~~~
extra88
Super-strict CSP can prevent bookmarklets from working.

~~~
bariumbitmap
Indeed. The "should not" in the spec is a big loophole.

[https://www.w3.org/Bugs/Public/show_bug.cgi?id=23357](https://www.w3.org/Bugs/Public/show_bug.cgi?id=23357)

[https://medium.com/making-instapaper/bookmarklets-are-
dead-d...](https://medium.com/making-instapaper/bookmarklets-are-
dead-d470d4bbb626)

[https://blog.github.com/2013-04-19-content-security-
policy/](https://blog.github.com/2013-04-19-content-security-policy/)

[https://stackoverflow.com/questions/7607605/does-content-
sec...](https://stackoverflow.com/questions/7607605/does-content-security-
policy-block-bookmarklets)

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

~~~
blackoil
I am not able to add bookmarklet to Main toolbar(address bar). When I drag it
over the toolbar there is no drop point. Do I need to enable/disable any
option to unlock it?

~~~
noxer
You can drag "Bookmarks Toolbar Items" next to the address bar see
[https://support.mozilla.org/en-US/kb/customize-firefox-
contr...](https://support.mozilla.org/en-US/kb/customize-firefox-controls-
buttons-and-toolbars)

And then you can put bookmarklets into that.

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

~~~
chrismorgan
Drop it in a user script with Greasemonkey or similar, and add a keypress
event listener.

The bones of it:

    
    
      // ==UserScript==
      // @name     Personal jmapui tweaks
      // @version  1
      // @grant    none
      // ==/UserScript==
    
      addEventListener("keypress", event => {
        if (event.target …) { return; }
        if (event.key == 'x' && event.ctrlKey && !event.metaKey …) {
          window.eval('…');
        }
      });
    

You’ll want to do things like skip events targeted at form elements or within
a contenteditable, perhaps unless you use a suitable modifier.

It may be helpful to flatten the modifiers and key into a single string, like
"Ctrl-Meta-Shift-S", and match on _that_.

The security interactions between your user script code and document code are
fiddly and troublesome, and debugging is distressingly limited. I find using
window.eval(`…`) to be a good technique for executing arbitrary code in the
security context of the page itself.

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

------
BiteCode_dev
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...](https://addons.mozilla.org/fr/firefox/addon/enhancer-for-youtube/).
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.

------
fortran77
And some, I don't.

~~~
unstatusthequo
Thank you, for that. I agree. It’s very, annoying.

~~~
dang
Can you please stop posting unsubstantive comments to Hacker News? Also please
see my sibling reply
([https://news.ycombinator.com/item?id=23449760](https://news.ycombinator.com/item?id=23449760)).

------
thegeekpirate
I moved over to Violentmonkey
([https://violentmonkey.github.io](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!

