20.05.2020

Bookmarklets

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.

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

Youtube - Better Livestream-Chat in Cinema-mode

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

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

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.

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