Wait, what's a bookmarklet? | Hacker News Reader

Wait, what's a bookmarklet?

thehistoryoftheweb.com

243 pointsBrajeshwar178 comments

Three bookmarklets I made for my bookmarks toolbar:

"Don't mess with paste" - for when signup forms expect you to hand-type your email address twice. javascript:void ["contextmenu","copy","paste","selectstart"].map(e=>document.addEventListener(e,e=>e.stopPropagation(),true))

"Nebula no-alt-#" - Nebula's video viewer annoying captures e.g. alt-3 to do the same as plain 3 (seek to 3/10 of the video currently playing), but I expect it to switch to the 3rd browser tab instead. YouTube doesn't do this. Luckily I can just activate this bookmarklet: javascript:void document.addEventListener("keydown",(e)=>void(e.altKey&&!isNaN(+e.key)&&e.stopPropagation()))

"canvas DL" - when playing skribbl.io and someone has made a nice drawing, this lets you download the current drawing as a PNG. javascript:var w=window.wdq||(window.wdq=document.createElement("a"));var p=/The word was '([^']*)'/g,pp=/<span>([^<>]+) is drawing now!/g,tt=document.body.innerHTML;var mm,nn,xx;while(mm=p.exec(tt))nn=mm;while(mm=pp.exec(tt))xx=mm;w.download=location.host+"_"+(nn?nn[1]+"_":"")+(xx?xx[1]+"_":"")+new Date().toISOString().replace(/:/g,"_");w.href=document.querySelector("canvas").toDataURL();w.click();

I took the liberty of making your bookmarklets easier to edit/share with my tool bookmarkl.ink [1].

Don't Mess With Paste: https://bookmarkl.ink/ashtonmeuser/6e3869d8e468e016f22a4b4de...

Nebula No-Alt-#: https://bookmarkl.ink/ashtonmeuser/6e3869d8e468e016f22a4b4de...

Canvas DL: https://bookmarkl.ink/ashtonmeuser/6e3869d8e468e016f22a4b4de...

[1] https://bookmarkl.ink/

Thanks for your site, and to the GP who made Don't Mess With Paste!

Feel free to add this if you want, I have it in my firefox called "UnfuckSlack" which puts the old slack UI back:

javascript:(function() { localStorage.setItem("localConfig_v2", localStorage.getItem("localConfig_v2").replace(/\"is_unified_user_client_enabled\":true/g, '\"is_unified_user_client_enabled\":false')); location.reload(); })();

As you wish! https://bookmarkl.ink/ashtonmeuser/6e3869d8e468e016f22a4b4de...

you have listing page to browse these?

Unfortunately, no. This is a simple pet project aimed at easing sharing/versioning of bookmarklets. The site is entirely static. Listing bookmarklets is, however, something I'd love to add.

A simple and sensible way to list bookmarklets may be scraping GitHub's own search [1]. Using a flag in gists such as `// bookmarklink-index` or similar may be a good way to go.

[1] https://gist.github.com/search?q=extension%3Ajs+bookmarklet_...

Love seeing cool stuff like this, thank you.

The proper way would be a bookmarklet that renders a list of bookmarklets.

I have "increment" and "decrement" bookmarklets, that look for the last-most number in a url and make it go up or down by one. I'm always surprised at how often it's useful. Oh, and I have this one called "kill sticky",

    javascript:( function(){ let i, elements = document.querySelectorAll('body *'); for (i = 0; i < elements.length; i++) { if(getComputedStyle(elements[i]).position === 'fixed' || getComputedStyle(elements[i]).position === 'sticky') { elements[i].parentNode.removeChild(elements[i]); } } document.body.style.overflow = "auto"; document.body.style.position = "static"; })()

Which deletes those annoying page-covering popups like "sign up for my newsletter" or "you need to log in (even though the content is right there*)"

I have a slightly longer one that also makes gets rid of the various `overflow:hidden` stylings since it seemed like I'd often kill an annoying popover with the content _right there_ to find that I couldn't scroll down anymore.

``` javascript:(function(){document.querySelectorAll("body ").forEach(function(node){if(["fixed","sticky"].includes(getComputedStyle(node).position)){node.parentNode.removeChild(node)}});document.querySelectorAll("html ").forEach(function(node){var s=getComputedStyle(node);if("hidden"===s["overflow"]){node.style["overflow"]="visible"}if("hidden"===s["overflow-x"]){node.style["overflow-x"]="visible"}if("hidden"===s["overflow-y"]){node.style["overflow-y"]="visible"}});var htmlNode=document.querySelector("html");htmlNode.style["overflow"]="visible";htmlNode.style["overflow-x"]="visible";htmlNode.style["overflow-y"]="visible"})(); ```

GPT-4 appears to be able to cut around 180 characters off while keeping the same functionality.

   ((e,l)=>{[...e.querySelectorAll("body")].forEach((e=>{["fixed","sticky"].includes(l(e).position)&&e.parentNode.removeChild(e)})),[...e.querySelectorAll('html,[style\*="overflow"]')].forEach((e=>{["hidden"].includes(l(e).overflow)&&(e.style.overflow="visible"),["hidden"].includes(l(e)["overflow-x"])&&(e.style["overflow-x"]="visible"),["hidden"].includes(l(e)["overflow-y"])&&(e.style["overflow-y"]="visible")}));let o=e.querySelector("html");o.style.overflow=o.style["overflow-x"]=o.style["overflow-y"]="visible"})(document,getComputedStyle);

https://chat.openai.com/share/4c6710b5-9c81-415b-85fc-b33e69...

Wow!

This used to be a feature in Opera a decade ago IIRC.

It is still a feature in Vivaldi, Opera's spiritual successor.

For things you need to always run Grease Monkey seems like a prime choice. You could have your script run automatically for every visit to a nebula page.

By default Greasemonkey can access all data on all pages. With extensions being routinely compromised to steal crypto that’s starting to look like a bad deal. (If you limit it to a single domain in Chrome it will nag you to unlock it on Chrome startup forever)

I only use a few and they're simple enough I can read them before updating to see if they're bringing in something weird. Also in GP's case they could just write their own since they're already making them. No exploitable surface there if it's not a remote updatable script.

It's not the bookmarklets that OP is warning about, it's the risk that the GreaseMonkey extension itself becomes compromised. Basically, it's good browser hygiene to keep the number of extensions you have installed to an absolute minimum.

A bookmarklet alone isn't so much a concern, both because it doesn't run automatically on all pages (only when clicked) and because, as you note, you can usually pretty easily audit what you add and you don't get automatic updates.

> you don't get automatic updates

Unless the bookmarklet updates itself by loading code from another URL. This is blocked by some websites but not all.

I am weirdly more afraid of installing chrome extensions than executables on my machine

Violetmonkey is opensource.

By default Chrome can access all data on all pages. With browsers being routinely compromised by advertising companies working against your interest that's starting to look like a bad deal.

This is an important point. The only solution we're ever offered for security concerns is centralizing more and more control in the platform companies hands even though those same companies are increasingly abusing their power.

Violentmonkey might be the better recommendation now, as it's still in active development, while Greasemonkey seems kinda dead.

Is there any real need for ongoing development? Seems like GM has the features you need to get the work done.

It's a matter of compatibility and bug fixing. Might be not a problem at the moment, but over time a dead project will degrade and make problems. So if one starts now, they can also just start with the more active project. After all there is AFAIK no disadvantage in using VM over GM.

Force pasting is something that is unfortunately required in many places, not just the browser. For example a Citrix session where the Citrix admin decided that pasting was a security risk and hence blocked it. Or some very poorly written apps.

For all of these I use an apple script that emulates typing one letter at a time, with a small delay because Citrix can't deal with typing which is too fast.

It's based on Force Paste: https://github.com/EugeneDae/Force-Paste

I invoke it with a shortcut (Alfred on macOS for example) and it's a life saver multiple times a day. Weirdly satisfying to watch happening =)

Why do some sign up forms block pasting from the clipboard?

My city does this, as well as preventing right clicks, as a "copy protection mechanism", complete with an `alert()` shaming you every time you have the audacity to try and cut and paste some text.

They are worried about someone copying a mistyped email from the first form field and pasting it into the "confirm email" field, thus making the confirmation field pointless. I would suspect in the real world most people are typing their email by hand and not using a password manager or auto-fill so this becomes an actual problem.

A nice implementation of this would detect that you pasted/auto-filled the original field and not prompt you to confirm unless you typed it slowly by hand.

> "Don't mess with paste"

You are my hero

Oh that first one... that is sweet.

At a previous company, we got to the point where we were considering making a Chrome extension to support an out-of-band workflow for our app. I, being in my 40s, suggested the prototype could just be a bookmarklet. All the younger devs were like "what's a bookmockler?" and I felt very old.

Almost as old as when I started singing The Wreck of the Edmund Fitzgerald when asked if I could name all the Great Lakes.

They're so simple that it's hard to believe they just work. I'm almost surprised that browser vendors haven't pushed the functionality out of existence just because, in favor of ever more complicated solutions.

Similarly, while prototyping an internal company wiki I made bookmarklets to fix some Sharepoint shenanigans and add features that otherwise would've required mucking about with extensions (tough when half the company was forced to use IE) or even worse, Sharepoint apps. The entire IT staff had a major WTF moment after explaining just how simple the whole thing was.

The annoying thing to me is that browsers often enforce CSP on bookmarklets and so they have started being less reliable.

Firefox fixed this in a limited way: https://bugzilla.mozilla.org/show_bug.cgi?id=1478037 but other browsers don’t care or won’t

I'm told Opera doesn't support bookmarklets.

I made one to collapse all comments in a BitBucket PR page (just find each comment and nest it inside a <details> tag, with a <summary> containing the first line of the comment). It's widely used in PRs that deal with Atlantis/Terraform, because Atlantis leaves huge comments on PRs.

> and I felt very old.

I was debugging a database issue the other day [0] and, being new to the firm, I asked "Hey, who is our DBA?"

Every junior SRE on the call asked "What's a DBA??"

0 - Client process hung and left an open transaction

Why do you two feel "old," instead of experienced? Aka "teachable moment".

I made a little bookmarklet a while back that allows you to spawn a little man that walks along the top of elements: https://divwalker.arbitrarydata.co.uk/

I'm still not bored of it.

This is giving me flashbacks to Lode Runner on the Mac.

Awesome!

lmao make me want to play lemmings

A few ones I use often:

* Get Markdown link of the current page as [Title](url):

  javascript:void function(){function e(){var e="";if(window.getSelection)e=window.getSelection().toString();else if(document.getSelection)e=document.getSelection().toString();else{if(!document.selection)return null;e=document.selection.createRange().text}return e}var t=e(),n=window.document.title,o=window.location.href,i=[];if(t){i.push("["+t+"]")}else{i.push("["+n+"]"),i.push("("+o+")")}window.prompt("created link",i.join(""))}();

* See current page on the Wayback Machine:

  javascript:void(window.open('https://web.archive.org/web/*/'+location.href.replace(/\/$/, '')));

* Twitter to Nitter:

  javascript:h=['nitter.it','nitter.snopyta.org','nitter.net']; location.href=location.href.replace(window.location.host,h[Math.floor(Math.random()*h.length)]);

I took the liberty of making your bookmarklets easier to edit/share with my tool bookmarkl.ink [1].

Markdown Link: https://bookmarkl.ink/ashtonmeuser/6e3869d8e468e016f22a4b4de...

Wayback Machine: https://bookmarkl.ink/ashtonmeuser/6e3869d8e468e016f22a4b4de...

Nitter: https://bookmarkl.ink/ashtonmeuser/6e3869d8e468e016f22a4b4de...

[1] https://bookmarkl.ink/

Wouldn't it be more in the spirit of bookmarklets to share tham as data: URLs containing a link with the bookmarklet?

The one they shared is backed by gist which is much better if you want to understand the code.

The gist also allow people to comment on the bookmarklet.

Of course - now they have a way of injecting arbitrary javascript code into the browser of the people using the service to bookmark the bookmarklet. Lack of trust sucks.

And (due to lack of trust) most applications make it hard to share javscripts links - so you need to instead instruct people to create a new bookmark and past the content into instead of right-clicking a link and clicking "bookmark".

Hi! Agreed re: advantages of gist/git backing. Comments and gist history via GitHub add a lot of value for free. The tool also allows bookmarklet creators to write in modern, un-obfuscated JS as there are transpilation, minification, and IIFE wrapping applied to the bookmarklet.

The security risk angle is also a concern I share. If you take a look at the disclaimer at the bottom of my project README [1], you'll see this exact issue mentioned. Versioning gists and thus bookmarklets is discussed in the same document [2]. This locks bookmarklet source to a specific commit of the git repo underlying a gist.

[1] https://github.com/ashtonmeuser/bookmarklet-platform?tab=rea...

[2] https://github.com/ashtonmeuser/bookmarklet-platform?tab=rea...

Final nitpick.

> And (due to lack of trust) most applications make it hard to share javscripts links - so you need to instead instruct people to create a new bookmark and past [sic] the content into instead of right-clicking a link and clicking "bookmark".

This is mostly true for mobile browsers. For desktop, simply dragging the button to the bookmarks bar ought to do the trick. Please feel free to open an issue if you've found this not to be the case!

Ah, I see how that paragraph could be misunderstood. I actually meant it as an advantage of the service. Sharing a link to bookmarkl.ink is trivial in any system since it's just a regular link. Where as if you want to share a bookmarklet (as a use-friendly-link) directly in chat system like Slack (or in a github comment) you can't since these most likely refuse to display javascript: links

fantastic service. thank you

Also add current page snapshot to the wayback machine:

javascript:void(window.open('https://web.archive.org/save/'+location.href));

What’s the purpose of the randomization in the Twitter to nitter one?

I bet you it's to make spamming the button a useful action if one of the instances is overloaded or rate limited, you can click a few more times until a page loads

I created a tool [1] to easily convert GitHub gists into bookmarklets and share them. Includes versioning, multi-file gists, etc. Some of my favourite examples hide images until mouseover [2] and play a procedural Brian Eno tune [3].

[1] https://bookmarkl.ink/

[2] https://bookmarkl.ink/ashtonmeuser/21427841853c9f2292c8f7d7a...

[3] https://bookmarkl.ink/ashtonmeuser/5e696524d986ba6c25af0df89...

Thanks, would be cool to have a quick copy button, as these "bookmark me" buttons never work on mobile. With a simple copy button I could create a new bookmark easily on mobile.

I believe I had this at one point but ditched it as browser support was spotty (looking at you, iOS Safari). Looks like support for async clipboard API [1] is getting there so I'll look at adding this functionality back.

[1] https://caniuse.com/async-clipboard

One of the first bookmarklets I made was a simple one that just went up one directory.

It worked gloriously for a year or two, and then the internet decided to stop using structure and broke everything.

My most used bookmarklet is one to call "debugger" after a short timeout to debug dynamic elements that would otherwise disappear as soon as I try to inspect them.

https://darekkay.com/blog/debugging-dynamic-content/

Is there a good bookmarklet for a HN dark theme?

Edit: I made one. Its based on:

https://github.com/UserStyles/hacker-news-zenburn-dark

  javascript:(()=>{var s=document.createElement('style');s.innerText=`*{color:#dcdccc!important;background-color:#404040!important}body%3Ecenter%3Etable%3Etbody%3Etr:first-child{background-color:#505050!important}body%3Ecenter%3Etable%3Etbody%3Etr:first-childa:hover{background:#404040!important}code,pre,input,textarea{background:#505050!important}a{color:#7F9F7F!important}.subtext%20a{color:#dcdccc!important}a:visited,a:visited%20span{color:#CC9393!important}a:hover,a:hover%20span{background:#505050!important}%60;document.head.appendChild(s)})();

Edit 2: It works on several other sites too. Cool!

This is just a small crocheting website, they don't have expertise to make such a fancy feature natively

you can also use ublock origin to filter html to create a dark mode:

https://gist.github.com/aclarknexient/c39c83f2f97c3c6b1c307c...

> As those browsers rose in market share, extensions began to overtake bookmarklets in popularity. The Bookmarks bar faded to the background more. Bookmarklets are still in use, and still quite useful, but they are ….

Is this article not finished?

No, it's not finished, but ChatGPT was.

Weirdly, I learned about bookmarklets last week when ChatGPT was giving me a solution to put the old slack ui back

Force narrow page - this one just shrinks body width, useful for handling pages which simultaneously don't allow zooming and also want to be 100% width on a giant monitor

  javascript:(function(){var newSS, styles='body { width: 25em !important; overflow: wrap; margin-left: auto; margin-right: auto; }'; if(document.createStyleSheet) { document.createStyleSheet("javascript:'"+styles+"'"); } else { newSS=document.createElement('link'); newSS.rel='stylesheet'; newSS.href='data:text/css,'+escape(styles); document.getElementsByTagName("head")[0].appendChild(newSS); } })();

Kill sticky:

  javascript:(function()%7B(function%20()%20%7Bvar%20i%2C%20elements%20%3D%20document.querySelectorAll('body%20*')%3Bfor%20(i%20%3D%200%3B%20i%20%3C%20elements.length%3B%20i%2B%2B)%20%7Bif%20(getComputedStyle(elements%5Bi%5D).position%20%3D%3D%3D%20'fixed')%20%7Belements%5Bi%5D.parentNode.removeChild(elements%5Bi%5D)%3B%7D%7D%7D)()%7D)()

Bookmarklets are great in mobile browsers. This is handy if you want to avoid writing an extension for a simple script.

I often use a bookmarklet I wrote to remove the extra content from online recipes: https://github.com/kevlened/foodmarklet

It’s based on https://github.com/poundifdef/plainoldrecipe, but it works entirely in the client.

Recipe websites are some of the worst things on the web these days, with autoplaying videos, ads, newsletter box, cookie notice, while the actual recipe is buried down after a bunch of useless preamble... I tested this foodmarklet in a few places and so far it seems to work amazingly. Thank you for sharing!

Kagi.com, a $10/month search engine, has "lenses" that "focus" your search. One of the lenses is "recipe sites that are high quality and don't have loads of useless crap"

I've taken to copy-pasting recipes into a google doc and then cleaning up the formatting if I use it more than once or twice.

In the spirit of bookmarklets, you can bookmark this instead: <javascript:"%3Chtml contenteditable%3E">

This changes the current page into a blank rich text editor where you can paste the recipe instead, which eliminates the Google Docs dependency.

Agreed.

I have one I use on my iPhone that shows page source. Comes in handy sometimes.

javascript:(function()%7Bvar%20a=window.open('about:blank').document;a.write('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Ctitle%3ESource%20of%20'+location.href+'%3C/title%3E%3Cmeta%20name=%22viewport%22%20content=%22width=device-width%22%20/%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/html%3E');a.close();var%20b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))%7D)();

this is awesome! I've added the page title to the source:

   javascript:!function(){var e=window.open("","_blank");e.document.write("<!DOCTYPE html><html><head><title>Source of "+location.href+"</title><meta name='viewport' content='width=device-width, initial-scale=1.0'></head><body><pre></pre></body></html>"),e.document.body.querySelector("pre").textContent=document.documentElement.outerHTML,e.document.close()}();

oh, this is great. i've never thought to even try bookmarklets on mobile.

Base 64 decode. This is the only one I use frequently.

javascript:function%20c(){}c.prototype.get=function(){var%20a="";window.getSelection?a=window.getSelection().toString():document.selection&&"Control"!=document.selection.type&&(a=document.selection.createRange().text);return%20a};c.prototype.set=function(a){if(window.getSelection){var%20b=window.getSelection();b.rangeCount&&(b=b.getRangeAt(0),b.deleteContents(),b.insertNode(document.createTextNode(a)))}else%20document.selection&&document.selection.createRange&&(b=document.selection.createRange(),b.text=a)};try{var%20d=new%20c,e=atob(d.get());d.set(e)}catch(a){alert(a.message)};

> As those browsers rose in market share, extensions began to overtake bookmarklets in popularity

Halfway between bookmarklets and browser extensions sit user scripts: arbitrary long scripts that are run by a specialized extension (usually, today, TamperMonkey).

They are incredibly powerful and can customize pretty much any webpage, with none of the limitations of bookmarklets, and very little of the hassle of creating a proper extension.

They're quite addictive.

I'm old enough to remember when Opera supported userscripts by default. I thought they were the future, but today it seems most would-be userscripts are just turned into extensions instead. Now that browsers have more granular permissions control, from a user perspective, I suppose it doesn't matter much whether it's called an extension or a userscript. But from a developer perspective it makes it's a little more tough to build a simple thing and throw it out into the world.

It's much easier to write a userscript than an extension -- the problem is distribution: almost no one know what they are or how to install them, etc.

But I have been making them at work to bypass and improve some quirks of Atlassian products for instance (JIRA and Confluence), and there they spread like wildfire.

I wrote userscripts to speed up annoying MS and okta logins, like the ones where you have to click to send a 2FA text or click a stupid checkbox to stay logged in. I also wrote one to show what I call "spending cash available" (cash minus credit card balances) on personalcapital. Plus I found one that turns youtube shorts into normal videos. Fun stuff.

This is texed, the plainest text editor:

  data:text/html,<title>texed</title><body style=margin:0><textarea autofocus spellcheck=false style=width:100vw;height:100vh;resize:none;border:0;padding:6pt;font-family:monospace;font-size:large;background-color:rgb(22,22,22);color:lightyellow>

Fun fact, I found, mostly by accident, that adding a comment to the beginning of a bookmarklet Chrome will set it to the name. I'd love to see the source code in Chrome that does this.

  javascript:/* name: /awesome# */alert(2+2)

Unable to reproduce this on Chrome 118. I just ended up with an untitled bookmark.

Still interesting to look at Chromium's source to see that they have unit tests for bookmarklets [1]. Also looks like people "frequently" report running JS from bookmarks as an XSS vulnerability [2]

[1] https://github.com/chromium/chromium/blob/0acce829e996f8387c...

[2] https://github.com/chromium/chromium/blob/0acce829e996f8387c...

Did you drag and drop it? Which OS? It works for me on Windows.

It doesn't seem to work on Chromium on Ubuntu. I don't have a Mac to try it on, perhaps someone else can try it.

Doesn't work on macOS for me. Huh.

What does "adding a comment to the beginning of a bookmarklet Chrome will set it to the name" mean, exactly?

This is a comment in JavaScript:

  /* comment */

Bookmarklets, like bookmarks, also have names.

I didn't phrase it very well but I figured people would just drag and drop it in Chrome and see it for themselves.

I'm not having trouble understanding the JS part ("a comment [at] the beginning of a bookmarklet"). It's the last part—understanding what it is that you're saying it's actually supposed to do ("will set it to the name") and what that would mean for bookmarklet usage that's giving me trouble.

> I didn't phrase it very well but I figured people would just drag and drop it in Chrome and see it for themselves.

I did. I spent way too long (15+ minutes) doing that, trying variations of the bookmarklet and user interactions to see if doing so would cause some observable difference and reveal some insight, and trying on different plausible (and implausible) interpretations of your comment.

Sorry about that. Which OS? It works for me on Windows.

When I drag and drop this to the Chrome bookmark bar, it will create a new bookmarklet with the name "awesome"

  javascript:/* name: /awesome# */alert(2+2)

It doesn't seem to work on Chromium on Ubuntu. I don't have a Mac to try it on, perhaps someone else can try it.

Doesn't work on ChromeOS or Ubuntu.

Does it have to be two lines? Going to try this from home.

2 lines?

Edit: my bad, it was my mobile layout.

I mean does it need a line break as it is seen in your code?

I don't see a line break. Are you on mobile? Turn it sideways.

Always good to have some of these in your bookmarks toolbar:

https://www.squarefree.com/bookmarklets/zap.html

Square free … there’s a name I haven’t heard in a long time.

They had a simple wysiwyg in the browser html editor, in the pre-Ajax era.

I use one to get rid of fixed headers on a page

   javascript:(function()%20{%20var%20s,e,i,ee=document.getElementsByTagName('*');%20for(i=0;%20e=ee[i];%20i++)%20{%20s=getComputedStyle(e);%20if%20(s%20&&%20s.position%20==%20'fixed')%20e.style.position='static';%20}%20})();

ya, same, I don't know where I got this one but I modified it to include sticky

javascript:var ni%3Ddocument.createNodeIterator(document.documentElement,NodeFilter.SHOW_ELEMENT,function(node)%7Breturn document.defaultView.getComputedStyle(node,null).getPropertyValue("position").match(/sticky|fixed/) %3F NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT%3B%7D)%3Bwhile(currentNode%3Dni.nextNode())%7Bconsole.log(currentNode.remove())%3B%7D

Can't live without this. The 10% of the time it doesn't work makes me sad. Super useful from cVim/Vimmium etc, I keep it mapped to 'gh'

I use that all the time (to get rid of any fixed element, incl footers and floating sidebars)

Protip is named bookmarklets can be triggered on Android Chrome if you search the name and tap it on the omnibar. Very useful for setting playback speed on mobile. I have desktop bookmarklets that increment / decrements playback speed, and mobile bookmarklets with fixed playback speed.

Wish there was easier way to customize/set favicon for bookmarklet. Right now you can export bookmark, edit in <A ICON> data, and import. If you have multiple chrome sessions you need to import on all devices within short period or icon will reset to default globe.

I used the "Readability" bookmarklet a lot back in The Day before that functionality was built-in https://web.archive.org/web/20090303150113/http://lab.arc90....

Two of my most used bookmarklets are to reset the viewport or force a desktop viewport. Annoyances like websites not allowing you to zoom in using the viewport meta element `user-scalable=no` can be mitigated by deleting that element. Sometimes I've found it also useful to force a desktop viewport because the mobile view hides too many controls.

edit any text on the page:

    javascript: (function() {   document.body.contentEditable = true;   document.body.spellcheck = false;  })();

---

Longer bookmarklets: https://github.com/madacol/web-automation/tree/master/bookma...

  - Highlight selected text

  - chatgpt to markdown

  - Convert images to base64 DataURL markdown embedding

the idea of using a bookmarklet to snap the current page was the entire basis of the prototype i built before del.icio.us

pinboard carries on this tradition

The only bookmarklet I use regularly is SciHubIfy:

    javascript:location.href="https://sci-hub.se/"+location.href;

Same, but my version uses a different approach. It takes the selected (or entered via prompt) text, strip spaces and opens the sci-hub in a separate tab.

  javascript:  Qr = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text; if (Qr) {     void(window.open('https://sci-hub.se/' + String(Qr).replace(/^\s+|\s+$/g, ''))); } else {     void(Qr = prompt('Enter URL/DOI to sci-hub it', ''));     location.href = 'https://sci-hub.se/' + String(Qr).replace(/^\s+|\s+$/g, ''); }

The one I use is slightly more advanced, can't copy it for some strange reason, but I use a service that checks for a valid domain first

Archive current page with Internet Archive's The Wayback Machine:

  javascript:void(open("https://web.archive.org/save/" + document.location))

Archive current page with archive.today:

  javascript:void(open("https://archive.ph/?run=1&url=" + encodeURIComponent(document.location)))

Search Google Cache for current page:

  javascript:void(open("https://webcache.googleusercontent.com/search?q=cache:" + document.location))

Open current Reddit post in Reveddit:

  javascript:void(open("https://www.reveddit.com/" + document.location.pathname))

I still regularly use the "Post to HN" bookmarklet. I seem to remember (if memory serves me right) that this used to be in the footer of the actual HN website many years ago. Is anyone else still using it?

EDIT: it can still be accessed from here https://news.ycombinator.com/bookmarklet.html

EDIT 2: the bookmarklet is also linked from HN's "submit" page, just below the form.

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

Few years ago, I created the undefined gooselet.

https://kay-is.github.io/undefined-gooselet/

Quick plug for my HN bm: https://thomas.me/hnb/

Make webpage fullscreen:

`javascript:(()=>{b=document.createElement("button");b.onclick=()=>{document.documentElement.requestFullscreen();b.remove()};b.style="all:reset;position:fixed;z-index:9999;left:0%;top:0%;width:100%;height:100%;background-color:lightpink";b.innerText="Full Screen";document.body.appendChild(b)})()`

It pops up a giant red button, as user interaction is required for fullscreen

Since everyone is sharing, I'm using bookmarklets daily, the main ones being 3x and 2x, which find the video element in the current page and speed it up.

I also made some overlay grid helpers, like 8h and 8v which create some overlay pass through elements and render red grid lines(8px spacing) using css. This is like an alignment tool for every page.

The bad thing is that Chrome and Edge don't highlight bookmarks by default when searching and makes one to type the top arrow key. Firefox used to be better in this regard, with the bookmarklet highlighted and ready to hit. The workaround for Chrome and Edge is to make the bookmarklet a search engine, that makes the bookmarklet selected by default.

Bookmarklets and custom search engines (for various online documentation sites, or plain jira, or aws) can be a productivity booster.

I wouldn't be able to navigate aws ssm without my trusty ssm search engine. Same for the others: EC2, CF, S3.

I should be using bookmarklets more though.

I think it's appropriate to share a small tool I did for creating and sharing bookmarklets

https://bookmarklet.jose.gr

Everything is stored in the URL, actually I am just thinking I should add offline first support.

At work my team uses a bookmarklet I wrote the other day, to be able to add descriptions of Gerrit patchsets (iterations on a changeset for review). This was in response to Gerrit devs deciding, in their infinite wisdom, to just drop ability to set those descriptions from the UI.

A while ago, I came up with a way to use bookmarklets to make bookmarks that open to different pages depending on the order in which you click them.

https://jstrieb.github.io/projects/hidden-bookmarks/

Every clicked bookmarklet concatenates a character to a passphrase used for AES decryption. The encrypted text and current passphrase are stored as intermediate state in the URL hash. When it decrypts, it redirects. If it doesn't decrypt, it goes to a fallback page as if it was a regular bookmark.

It was mostly a fun proof-of-concept, but I am hopeful that the technique has actually been useful to someone.

I use a "Go To Root" bookmarklet for both going to the root url of the current URL; or going to the subreddit if I'm in a reddit story. It's far from perfect, but I use it daily:

```javascript:var url = new String(location.href); var re = new RegExp('(https?:\/\/)([a-zA-Z0-9.]+)((\/r\/.\/)(comments.))?'); var res = url.match(re); // go to the root URL root_url = res[1] + res[2]; // If we are in a subreddit, go to the subreddit

re = new RegExp('.*reddit.com'); if( res[2].match(re)) { if (typeof res[3] !== 'undefined' && typeof res[4] != 'undefined') { root_url = root_url + res[4]; } } location.href=root_url;```

It would be great if snippets could be used in bookmarklets. Instead of:

    javascript:some_code

You would write:

    snippet:name

Snippets are much easier to write because snippets are edited in normal multiline editor with console and stuff.

> Snippets are much easier to write because snippets are edited in normal multiline editor with console and stuff.

Most of my bookmarklets are specific to work projects and I save them in the repo itself in a top-level bookmarklets.js file so I can use VSCode to edit them. (Then I just copy and paste them into the browser bookmark.)

https://bugzilla.mozilla.org/show_bug.cgi?id=1315549

Mhm, snippets seem to be chrome only

I use snippets all the time. When I'm ready to make a bookmarklet, I just add javascript: to the front and then drag them to my toolbar.

The Mouseover DOM Inspector from the early 00s was an awesome dev tool.

http://slayeroffice.com/?c=/content/tools/modi.html

wayback machine for current url:

javascript:window.location='https://web.archive.org/web/*/'+document.location

I use a kinda hacky bit of JS to do a number of actions based on the current URL. I create bookmarks like this, and set a keyword (this one is 'gt', for Google Translate):

  javascript:location="https://translate.google.com/translate?hl=&sl=auto&tl=en&u="+location

On any page, I can type ctrl-L (select address bar), gs, enter, and I get the page translated to English.

A couple more:

  Wayback machine: javascript:location="https://archive.md/submit/?url="+location
  12 foot ladder: javascript:location="https://12ft.io/proxy?q="+location

Here is one of the few I use:

Rotate images 90° clockwise:

    javascript:(()=>{var imgs = document.getElementsByTagName("img");for (var img of imgs){img.setAttribute("style","transform:rotate(90deg);");}})();

This one is a little shorter.

  javascript:document.querySelectorAll('img').forEach(img => img.setAttribute('style','transform:rotate(90deg);'))

I wonder if people use them very often today. Anyway, https://github.com/marcobiedermann/awesome-bookmarklets

Nothing fancy, or special, but I use them so that I don’t have go to a site first and then search.

Over the years I’ve built one up that recognizes various record ID formats or other record numbers and automatically takes you to that record or forwards you to the site if you paste the entire url.

It has a few other keyword shortcuts to save on monotonous clicks.

Nowadays with slack and people being a bit web savvier in general it’s not as useful as it once was, but you’d be surprised how annoying it is to enter jira ticket ids over and over.

I feel like you’re talking about custom site search that the browser search bar supports and not bookmarklets

I’m not, guess it wasn’t clear what I meant.

Missing:

• http://kathack.com/

• https://kay-is.github.io/undefined-gooselet/

ah, kathack is amazing but doesn't work on https sites since it loads a script from an http server. and is broken by CSP too... a real shame. it's really beautiful!

The website Babylist (a baby registry site) uses a bookmarklet for adding things to your registry that they don't sell themselves. It was the first real world use of a bookmarklet I had seen in a loooong time.

I post to Facebook and Twitter using bookmarklets and i just made a bookmarklet to use newsproxy.ca to get around Facebook's news blockade in Canada.

These you posted are really great

I'm a bit confused, does this article just end like this or is there something I'm missing?

"The Bookmarks bar faded to the background more. Bookmarklets are still in use, and still quite useful, but they are …."

They are what?

Reading comments makes me feel that we need a monthly..

"Show HN: All the new bookmarklets."

:-)

Very quick and dirty bookmarklet to highlight the author name in a HN discussion: https://bookmarkl.ink/olejorgenb/ca230bdeb87bb5bc69a8bae3e7d...

My favourites

Speed up video/audio on youtube

  javascript:(function() { (document.querySelector('video') || document.querySelector('audio')).playbackRate = (+prompt('How many times normal speed?') || 1); })();

Bypass paywall

  javascript:location.href='https://archive.is/?run=1&url=%27+encodeURIComponent(document.location.href)

just use video speed controller https://chrome.google.com/webstore/detail/video-speed-contro...

I've used this extension for several years now. I honestly can't imagine browsing without it.

If it ever goes away and the same functionality isn't easily reproducible... a dark, terrible day.

I use an extension that lets me quickly jump to bookmarks and have a bunch of yt speed bookmarklets (named 1.25x, 1x, 2x etc) and it is so nice to quickly change playback speed with the keyboard

There are builtin keyboard shortcuts in the YouTube player.

  Shift+, or . for changing the speed.

They cannot be customized though.

Actually same here. I use vimium for jumping between x1, x2, etc bookmarks

FWIW, javascript:// bookmarklets don't work on the standard Chrome home / new tab page, but data URL bookmarklets work everywhere. Here's my bookmarklet for Day Of Year...

data:text/html,<script>now=new Date();alert(`Today is DOY ${1+Math.floor((now.getTime()-new Date(now.getFullYear(),0,1).getTime())/8.64E7)}`);</script>

I frequently share Google Doc links, and I prefer the toolbar collapsed, which hides the share button (which takes a bit to load anyway). I triple click and Ctrl-C the link that pops up from this bookmarklet:

   javascript:(function(){alert(window.location.href.replace(/\/edit.*$/, '/edit?usp=sharing%27));})()

I use a bookmarklet along with a keyword in Firefox to allow querying a bug number in our internal bugzill db. So I can type 'b <bug #>' in the URL bar and it takes me right to the bug.

Firefox doesn't directly support bookmarklets, IIRC, so instead I use a custom search engine with a bookmarklet for the URL to accomplish the same thing.

Bookmarklets work correctly for me in Firefox on Linux. It may be a site-specific CSP setting?

D'oh, I meant Chrome

Ahh Bookmarklets.. my first love.. Long time ago in about era of 2004-2010 I only knew about html & php. In about 2011 I found the javascript. Next year I found the bookmarklets.

My first Bookmarklet: When is my next payday? My job used to pay salary monthly, on second last working day of month (Sun to Thu was working week). I eagerly used to count the days remaining for next payday. I realized that Javascript can do this for me. PayDay was born. I still have the code at https://gitlab.com/davchana/payday/-/blob/beta/payday_v1_01_... Coincidently this was my first project on Gitlab.

Then, Google Chrome used to remember passwords, but there was no password manager inbuilt to view passwords. I found this View Passwords code at https://ostermiller.org/bookmarklets/viewpass.js & minified it & have been using it since last 12 years, in a mobile with ViewPasswords name. The only change I did was making the div containing found passwords contenteditable to make it easy to copy. I have been using it since 2012. Somewhere in between these years I lost the original code but I came across it again in 2023.

I also made my own version of fancy view passwords, code at https://gitlab.com/davch/bookmarklets/-/blob/master/viewPass... but I tend to use the original one more often.

One of the proudest bookmarklet is CAJobAppsGSV2 (California Job Apps Google Apps Script v2). CA has a standard way of applying for government jobs, where you create templates per position title & then apply it by going through 5 or 6 pages. This BM looks at the address, a switch fires up the function, that function choses the correct dropdown values & clicks appropriate buttons & also saves some data in SessionStorage. After the confirmation it adds a div to the box, which on clicked upon closes itself. The BM prepares data from storage & page, & fires up a POST request to Google Apps Web Script, which saves it as a line item to a sheet. While doing this, it logs the statuses to the div.

I use BMs for fixing up the print layout of TripCase Tickets, to fetch & get data on clipborad about my paystub, quickshortcuts to data at who.is & xe.com.

I use this one on my phone to boost text size when my eyes are tired

javascript:var%20p=document.getElementsByTagName('*');for(i=0;i%3Cp.length;i++)%7Bif(p%5Bi%5D.style.fontSize)%7Bvar%20s=parseInt(p%5Bi%5D.style.fontSize.replace(%22px%22,%22%22));%7Delse%7Bvar%20s=12;%7Ds+=8;p%5Bi%5D.style.fontSize=s+%22px%22%7D

iOS Safari has this in the aA menu inside the address bar.

I haven't used them heavily, but when I was doing user-research for a small startup, I needed to get timestamped links from Google Drive videos to add to interview notes. It was a huge pain in the ass. So I wrote a little bookmarklet to copy the URL with timestamp to clipboard.

Annoyingly Slack refuse to create a link with a bookmarklet as content. They do it on purpose - it's not part of a URL validation.

I guess it IS a security concern to run arbitrary javascript inside the slack app of another user.

But makes sharing bookmarklets that way harder.

It's like browser extensions but not toxic, malware-infected, browser performance destroying, compatibility with websites breaking, killing your web browser with "pluginitis", ...

Sadly bookmarklets do not work in mobile Browsers. Would be great.

Bookmarklets can work in mobile browsers.

For mobile Chrome:

- Create a new bookmark

- Replace the bookmarked link with the bookmarklet javaScript code, e.g., javascript:alert('hello world')

- To use the bookmarklet, start typing the bookmark name in the address bar until the auto-complete displays the bookmark, and then click on it.

For mobile Safari,

- Create a new bookmark and replace the URL with your javaScript code

- To use the bookmarklet, tap on the bookmarklet name from the bookmarks menu

(The edit was to better format my comment)

Hey this is too cool. Thank you

Some do for chrome on android. They have to be named, you can search for the same in omnibar and tap. Works for things like changing playback speed.

I'd like to have a shortcut that appends currently highlighted text, current url and timestamp to a text file on my disk. Can this be done with a bookmarklet?

I've found it really handy to just have a local Python webserver running on my workstation. Then my bookmarklets can just hit eg http://localhost:8000/cgi-bin/script.py to modify a local file or open up my notes for a certain Jira ticket or whatever else I can think of. There are security considerations with that approach though, since any random site you load can start sending requests to your local webserver.

Cannot append. Can do everything else you ask. Either will download that one text content as text file, or can put it in the clipboard, and you manually have to open it & paste it.

Perhaps if the bookmarklet opened a new url containing the text as a query parameter, and the url had a weird protocol instead of https:// — say it was snippy:// … and then you created a protocol handler on your machine for the “snippy” protocol …. And it saved the relevant query param to a file.

I can’t remember if I’ve done this before. It seems like something I’ve done.

I've done that too. I ended up just using a local webserver with some Python cgi scripts instead though. I found it more flexible and easier to remember how things worked that way.

Yes, the other easy way I have used multiple times is, bookmarklet simply sends the text via a POST request to Google Apps Script, which simply appends it to a sheet or doc.

For watching chess I use one on chess24 and lichess that displays the current score and first four characters of the players’ names in the title bar.

click those skip ads buttons on you tube

javascript:eval(atob('c2V0SW50ZXJ2YWwoZnVuY3Rpb24gKCkgewogICAgdmFyIGVsZW0gPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5Q2xhc3NOYW1lKCd5dHAtYWQtc2tpcC1idXR0b24geXRwLWJ1dHRvbicpWzBdOwogICAgaWYgKGVsZW0pIHsKICAgICAgICBlbGVtLmNsaWNrKCk7CiAgICB9Cn0sIDEwMDApOw=='))

setInterval(function () { var elem = document.getElementsByClassName('ytp-ad-skip-button ytp-button')[0]; if (elem) { elem.click(); } }, 1000);

I made one that uses openai api to summarize the current page that I’m on.

Could you post it?

The pinnacle of bookmarklets was Firebug Lite.

I feel very old right now.

Wasn't there some fundamental web/javascript security policy change a decade or so ago that broke many bookmarklets?

The advent of CSP really ruined the bookmarklet party, because the browser would obey the CSP headers, rather than the user whose computer the browser was running on, preventing a slew of bookmarklets from working due to script loading being "forbidden" by the server whose pages you were trying to run your bookmarklet on. By the time browser makers finally tried to address that, the damage was already done.

That's what I was thinking - most bookmarklets I ever wrote one by one stopped working and I got tired of fixing them.

This is probably the post I'm thinking of:

https://medium.com/making-instapaper/bookmarklets-are-dead-d...

https://archive.ph/hDumY

Reply on news.ycombinator.com