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.
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.
> 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.)
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:(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
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.
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.
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();
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.
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.
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.
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.
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.
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. The Bookmarks bar faded to the background more. Bookmarklets are still in use, and still quite useful, but they are ….
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.
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 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.
187 comments
[ 3.6 ms ] story [ 239 ms ] threadOver 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.
• http://kathack.com/
• https://kay-is.github.io/undefined-gooselet/
These you posted are really great
Almost as old as when I started singing The Wreck of the Edmund Fitzgerald when asked if I could name all the Great Lakes.
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.
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 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 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
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.)
Mhm, snippets seem to be chrome only
Speed up video/audio on youtube
Bypass paywallhttps://darekkay.com/blog/debugging-dynamic-content/
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
http://slayeroffice.com/?c=/content/tools/modi.html
"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();
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.
Unless the bookmarklet updates itself by loading code from another URL. This is blocked by some websites but not all.
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/
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_...
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(); })();
You are my hero
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.
``` 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"})(); ```
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 =)
It worked gloriously for a year or two, and then the internet decided to stop using structure and broke everything.
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.
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 changes the current page into a blank rich text editor where you can paste the recipe instead, which eliminates the Google Docs dependency.
Rotate images 90° clockwise:
`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
Is this article not finished?
https://www.squarefree.com/bookmarklets/zap.html
They had a simple wysiwyg in the browser html editor, in the pre-Ajax era.
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
I'm still not bored of it.
https://medium.com/making-instapaper/bookmarklets-are-dead-d...
https://archive.ph/hDumY