Bookmarklets
Introduction
Bookmarklets are bookmarks with special powers. Effectively, they let you run JavaScript in a browser, which means you can inject JavaScript into a webpage.
The first code block is the bookmarklet itself; create a new bookmark and use this code as the URL. The second code block is the unencoded naked JavaScript; this can be edited then put through the bookmarklet creator found in Useful tools.
Reload webpage on timer
Useful for stopping a webpage timing out, which may also log you out.
In the case of this bookmarklet, it reloads a fixed URL (i.e. it doesn’t reload the current URL). It has to be activated from a different tab (a “control” tab), which must be kept open. The new tab (the “refresh” tab) it will create will refresh as per the timer, so if you intend to use the target website, I prefer to open another tab (the “active” tab) and use that one, as that one won’t refresh. I pin the first two in the browser to keep them out of the way and avoid accidentally closing them.
This bookmarklet uses prompts. If you want a bookmarklet with a fixed URL and/or time, change the code below (e.g. u="https://www.google.com"
or m=5
) and recreate the bookmarklet using the bookmarklet creator in Useful tools below.
javascript:(function()%7Bu%3Dprompt(%22URL%3A%20%22)%3B%0Am%3Dprompt(%22Minutes%3A%20%22)%3B%0Aw%3Dwindow.open(u)%3B%0Ai%3DsetInterval(function()%7Bw.location.href%3Du%3B%7D%2Cm*60*1000)%3B%7D)()%3B
u=prompt("URL: ");
m=prompt("Minutes: ");
w=window.open(u);
i=setInterval(function(){w.location.href=u;},m*60*1000);
Video playback speed
Useful for videos where controls are disabled.
Speed via prompt
javascript:(function()%7Bx%3Dprompt(%27Select%20Playback%20Rate:%27)%3Bdocument.querySelector(%27video%27).playbackRate%3Dx%3B%7D)()%3B
x=prompt('Select Playback Rate:');
document.querySelector('video').playbackRate=x;
Double / 2x
javascript:(function()%7Bdocument.querySelector('video').playbackRate%3D2%7D)()
document.querySelector('video').playbackRate=2
Page title
Copy
javascript:(function()%7Bvar%20dummy%20%3D%20document.createElement(%22textarea%22)%3B%0Adocument.body.appendChild(dummy)%3B%0Adummy.value%20%3D%20document.title%3B%0Adummy.select()%3B%0Adocument.execCommand(%22copy%22)%3B%0Adocument.body.removeChild(dummy)%3B%7D)()%3B
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = document.title;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
Rename via prompt
javascript:(function()%7Bvar%20title%3Dprompt(%22Title%3A%20%22)%3B%0Adocument.title%3Dtitle%3B%7D)()%3B
var title=prompt("Title: ");
document.title=title;
Rename to element text
In this case, I used the innerText
of the first h1
tag.
javascript:(function()%7Bdocument.title%3Ddocument.getElementsByTagName('h1')%5B0%5D.innerText%7D)()%3B
document.title=document.getElementsByTagName('h1')[0].innerText
Prefix tab title with word count
Word count gives you a rough indication of reading time. It’s not perfect, just a quick hack.
Add
This is also available as a userscript, available on Greasy Fork.
javascript:(function()%7Bwc%3Ddocument.body.innerText.match(%2F%5B%5Cw%5Cd%5D%2B%2Fgi).length%3B%0Atitle%3Ddocument.title%3B%0Adocument.title%3D%22%5B%22%2Bwc%2B%22%5D%20%22%2Btitle%3B%7D)()%3B
wc=document.body.innerText.match(/[\w\d]+/gi).length;
title=document.title;
document.title="["+wc+"] "+title;
Remove
Simply removes the first “word” in the title.
javascript:(function()%7Bdocument.title%3Ddocument.title.split('%20').slice(1).join('%20')%7D)()%3B
document.title=document.title.split(' ').slice(1).join(' ')
Prefix tab title with scroll percentage
I actually used an AI/LLM (Poe) to create this one:
Create a bookmarklet that prefixes the tab title with the % of page scrolled that updates on scroll
javascript:(function() {
var originalTitle = document.title;
function updateTitle() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
var percentScrolled = Math.round((scrollTop / scrollHeight) * 100);
document.title = '[' + percentScrolled + '%] ' + originalTitle;
}
window.addEventListener('scroll', updateTitle);
})();
And instead of using CyberChef, I simply asked the LLM to minify and encode it:
javascript:(function(){var%20e=document.title;function%20t(){var%20t=document.documentElement.scrollTop||document.body.scrollTop,n=document.documentElement.scrollHeight||document.body.scrollHeight,r=Math.round(t/n*100);document.title='['+r+'%] '+e}window.addEventListener('scroll',t)})();
Which actually does a better job, as it replaces the variable names etc too.
Scroll to bottom of a page
javascript:window.scrollTo(0,document.documentElement.scrollHeight)
window.scrollTo(0,document.documentElement.scrollHeight)
Summarise YouTube videos
In a new tab. Don’t always work.
Summarize.tech
javascript:(function()%7Bwindow.open('https%3A%2F%2Fwww.summarize.tech%2Fyoutu.be%2F'%2Bwindow.location.href.split('v%3D')%5B1%5D.split('%26')%5B0%5D)%7D)()%3B
window.open('https://www.summarize.tech/youtu.be/'+window.location.href.split('v=')[1].split('&')[0])
Tammy AI
javascript:(function()%7Bwindow.open('https%3A%2F%2Ftammy.ai%2Fe%2F'%2Bwindow.location.href.split('v%3D')%5B1%5D.split('%26')%5B0%5D)%7D)()%3B
window.open('https://www.summarize.tech/youtu.be/'+window.location.href.split('v=')[1].split('&')[0])
Useful tools
Bookmarklet maker
https://caiorss.github.io/bookmarklet-maker/
Enter your JavaScript, it creates a bookmarklet you can drag-and-drop to your bookmarks.
CyberChef
https://gchq.github.io/CyberChef/
An incredibly powerful tool for a host of data manipulations. In this case, you can use it to encode or decode URLs i.e. change a space
to %20
or change {
to %7B
as you can see in the bookmarklet code above.