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();
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.
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.
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.
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.
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.
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.
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.
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.
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/
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.
> 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
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].
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.
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.
> 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 ….
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
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"
> 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.
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.
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.
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]
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.
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.
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.
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.
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?
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.
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.
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;```
> 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.)
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):
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.
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.
javascript:(function() { (document.querySelector('video') || document.querySelector('audio')).playbackRate = (+prompt('How many times normal speed?') || 1); })();
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
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:
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.
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.
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 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.
It's like browser extensions but not toxic, malware-infected, browser performance destroying, compatibility with websites breaking, killing your web browser with "pluginitis", ...
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.
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.
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.
"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();