return to homepage
May 20, 20

Some Bookmarklets I use

A bookmarklet is like a tiny Add-on for your browser. You drag it into your bookmark-bar and when you click it, it does something.

Install a bookmarklet by
dragging it into your bookmarks.

If you are using Firefox and a script-blocking Add-on (NoScript, uMatrix, ...) you will notice that bookmarklets do not work if scripts are disabled for the domain, the website is on. This is a bug in Firefox, but there is an Add-on to work arround the issue: Bookmarklets context menu.

This Add-on requiers your bookmarklets to be HTML-URL-decodable. If you are writing bookmarklets for your self, be aware that copy-n-pasting your code into a new bookmark does not fully URL-encode your code. The %-sign for example stays unencoded and has to be replaced manually by %25. You can use the encodeURIComponent function to fully URL-encode your snippet. But note: The colon in javascript: must be plaintext so that the bookmark is able to function.

Remove Sticky

Removes all sticky elements from the page.

Bookmarklet: Remove sticky (drag into bookmark bar)

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]);
}
}
})()

Scroll Better with the Space-Bar

When scrolling with the space-bar sticky headers can be annoying as they cover up text that scrolles underneath them.

This bookmarklet removes sticky content and adds a red indicator-line that shows, where the bottom of the page was, when you pressed space to scroll.

Bookmarklet: Space-scroll (drag into bookmark bar)
Source


A gif showing the use of a bookmarklet that removes sticky website
elements and adds a red indicator when scrolling with the space
bar.

Youtube - Better Livestream-Chat in Cinema-mode

Arranges the video and the chat side by side. Currently only working with screensizes arround 1920x1080.

A gif showing the use of a
bookmarklet that realigns the chat on YouTube livestreams to be in
sight in cinema mode.

Bookmarklet: Better YT-Chat (drag into bookmark bar)

javascript:(function(){
let video = Array.from(document.getElementsByClassName("video-stream html5-main-video"))[0];
let chat = document.getElementById("chat");
chat.style.position = 'fixed';
chat.style.top = '60px';
chat.style.right = '5px';
chat.style.height = '754.1px';
video.style.left = '57.889px';
})()

HTML5-Speed

Regulates the playback-speed of all video elements on the page. Works on HTML5-Videos (e.g. Youtube).

Faster

Bookmarklet: + (drag into bookmark bar)

javascript:(function(){
Array.from(document.getElementsByTagName('video'))
.forEach(vid => vid.playbackRate *= 1.25);
}())

Slower

Bookmarklet: - (drag into bookmark bar)

javascript:(function(){
Array.from(document.getElementsByTagName('video'))
.forEach(vid => vid.playbackRate *= 0.8);
}())

Reset

Bookmarklet: 0 (drag into bookmark bar)

javascript:(function(){
Array.from(document.getElementsByTagName('video'))
.forEach(vid => vid.playbackRate = 1);
}())

Speedread

After activating the bookmarklet one can select text on the page and it will be displayed word by word (roughly). The bookmarklet uses the "Optimal Recognition Point" for displaying the words at the right position.

A gif showing the use of a bookmarklet that let's the user spead
read text that they select with their mouse.

Bookmarklet: Speedread (drag into bookmark bar)
Source

Archive.li

This bookmarklet makes it trivial to look up something on archive.li.

Bookmarklet: archive.li (drag into bookmark bar)

javascript:(function(){
window.location = "https://archive.li/" + window.location;
})()

Wayback Machine

This bookmarklet makes it trivial to look up something on archive.org.

Bookmarklet: archive.org (drag into bookmark bar)

javascript:(function(){
window.location = "https://web.archive.org/web/*/" + window.location;
})()
subscribe to blog
find me on
2023
30 Aug Can You Customize my Startup's Login Page?
06 Jul Internet Rabbit Holes
19 Apr Access Your Password-Manager from Emacs on Linux
07 Feb Websites I might need to steel ideas from
05 Feb Webdesign Resources
2020
20 May Some Bookmarklets I use
24 Feb "What music do you like?"
2019
06 Jun SAYM
06 May Linsenssuppe
2018
21 Dec Deadd Notification Center
2017
26 Sep Mallorca 2017
12 Aug Made with love
10 Aug Color Theme Generator
2016
31 Jul Burger
30 Jun Philipp Uhl
© Philipp Uhl 2020
Hmmm...