TL;DR
In the age of browser extensions, bookmarklets often go overlooked. However, bookmarklets provide an awesome opportunity to enhance the functionality of websites without the overhead or potential privacy concerns (data collection / browser fingerprinting) of an extension.
What is a Bookmarklet you ask?
A Bookmarklet is a bit of JavaScript code formatted in a way that can be pasted inside a Browser Bookmark URL field. When clicked, it enhances the page in some way.
The bookmarklets in this post for example, change the playback speed which the media inside the page is played at.
Set Speed to Normal (1.0)
// find all video & audio elements in the current page
document.querySelectorAll('audio,video')
// loop over each element found
.forEach(function(a){
let b = a.playbackRate; // store current playbackRate
a.playbackRate = 1; // change playbackRate to 1
console.log(
`changed media playback rate from ${b} to ${a.playbackRate}`
);
})Given the above code, if you take that to a site such as https://chriszarate.github.io/bookmarkleter/ or use the utility that site or others provide, you would get some code like the snippet below.
javascript:void%20function(){document.querySelectorAll(%22audio,video%22).forEach(function(c){let%20a=c.playbackRate;c.playbackRate=1,console.log(`changed%20media%20playback%20rate%20from%20${a}%20to%20${c.playbackRate}`)})}();Increase Speed by +0.5
On its own, the normal speed bookmarklet may not be very useful, but with this one, it becomes much more valuable.
This bookmarklet increases by +0.5 speed up to and including 4x faster. After 4x it will reset back to normal speed (1.0)
// find all video & audio elements
document.querySelectorAll('audio,video')
// loop over each element found
.forEach(a => {
let b = a.playbackRate; // store current playbackRate
// if playbackRate is less than 4
if (4 > a.playbackRate) {
a.playbackRate += .5 // increase playbackRate by .5
} else {
a.playbackRate = 1 // otherwise reset to normal speed (1)
}
console.log(
`changed media playback rate from ${b} to ${a.playbackRate}`
);
})Using the same utility gives us this code
javascript:void%20function(){document.querySelectorAll(%22audio,video%22).forEach(c=%3E{let%20a=c.playbackRate;4%3Ec.playbackRate%3Fc.playbackRate+=.5:c.playbackRate=1,console.log(`changed%20media%20playback%20rate%20from%20${a}%20to%20${c.playbackRate}`)})}();Maximum Speed (4.0)
The last, but not least, bookmarklet is 4 times speed. It is essentially the same as the first, just with playbackRate = 1 changed to playbackRate = 4.
// find all video & audio elements
document.querySelectorAll('audio,video')
// loop over each element found
.forEach(function(a){
let b = a.playbackRate; // store current playbackRate
a.playbackRate = 4; // change playbackRate to 4
console.log(
`changed media playback rate from ${b} to ${a.playbackRate}`
);
})And the URL encoded version
javascript:void%20function(){document.querySelectorAll(%22audio,video%22).forEach(function(c){let%20a=c.playbackRate;c.playbackRate=4,console.log(`changed%20media%20playback%20rate%20from%20${a}%20to%20${c.playbackRate}`)})}();