Hacker News new | past | comments | ask | show | jobs | submit login
Bookmarklets I Use (ph-uhl.com)
228 points by adminu on June 7, 2020 | hide | past | favorite | 65 comments



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


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


Remove sticky is also my most often used bookmarklet.

One that I also use regularly, related to your "Open in wayback machine", is "Save to wayback machine". That way it'll be there when you click it!

    javascript:location.href %3D %27//web.archive.org/save/%27 %2B location.href.split(%27%3F%27)%5B0%5D%3B


Love the "back to referer". You are right, it should be here by default.


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.


Mind blown. I had no idea.


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 wrote a RSVP app in J2ME for my Sony Ericcson T610. I feel like it made sense then, when the whole screen was so small you couldn't reasonably read long form text on it in any other way. Some of my friends used it to read books on their commute on the tiny screens of phones back then. Now that phones and tablets are not much smaller than books anyway, you really have to be invested into the niche idea of speedreading to find it useful and as I understand it, most research shows that although you can increase your reading speed, it comes with a reduction in understanding and retention if you push it too far.


I believe Spritz was taken over by one of their funders, as it happens. This is a cautionary tale to founders who are tempted to raise too much for the stage they're at — raising money accelerates your trajectory but also increases your chance of failure.

It also shows that "money raised" is not always a good metric for success.


I'd argue it's better than Spritz because it preserves your privacy.

I developed and sold a speed-reading app on iOS for a few years and users frequently wrote in to ask for Spritz support. Spritz had a patent (or patent application) and was known to shut down [1] non-licensees, so I looked over their API's terms of usage. Unfortunately they required users to create individual accounts with them. As this would enable them to track who was reading what with their technology, it was a non-starter for me and I'm sure many other devs felt the same way.

[1] https://news.ycombinator.com/item?id=9046034


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


I also cannot get it to work in Firefox.


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


Doesn't unfortunately work on Firefox for Android.


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?


It works with some other address than about:reader, so I think there’s something special with about: addresses.

Also, you don’t have to wrap it in a function; you can just do

javascript:location.href='foo:/bar/'+document.location.href;


https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/The...

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.


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


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)


I can't answer your question, but I can offer a nice alternative in the form of extension, aptly named "Open in Reader View", works a treat!

https://addons.mozilla.org/es/firefox/addon/reader-view/

https://add0n.com/reader-view.html


That's great, thanks!


Also if I put a link into the page with the about:reader uri scheme, it does not work (opens blank page if I open new tab, does not go anywhere if I click on it without opening new tab)

I suppose it might work if I put it into an extension of some sort, if not then I think to make it work on Windows it would be easiest to have an AutoHotkey script that prepended about:reader?url= on the address line and pressed enter for you.

I have as yet to find a worthwhile AutoHotkey competitor on Linux or MacOs.


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.


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.


Thanks. I use a bookmarklet but my friend appreciates it!

That said, we can't find the option to set a keyboard shortcut (Ctrl+Shift+k opens the web console), in Xubuntu 18.04, any clue as to why?

edited typo


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.


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


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


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.


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


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'


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


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?


I use Spectacle to do this, like it a lot: https://www.spectacleapp.com


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


Super-strict CSP can prevent bookmarklets from working.



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.


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?


You can drag "Bookmarks Toolbar Items" next to the address bar see https://support.mozilla.org/en-US/kb/customize-firefox-contr...

And then you can put bookmarklets into that.


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.


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.


in Chrome i use this extension

https://chrome.google.com/webstore/detail/speed-dial-for-goo...

There are other more powerful ones i am playing with


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.


Ok, but please remember that this is a highly international site and there are many thousands of non-native speakers posting in English here. It's not cool to shame them. (Especially since most of us who would criticize them have no second language at all.) If you notice an error, it's better to neutrally offer correct information.

Submitted title was "Show HN: Some Bookmarklets, I Use".


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


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


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!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: