Bookmarklets were all the rage years ago and although they might have been left by the wayside, they’re more powerful than ever. Essentially a browser bookmark the runs Javascript, bookmarklets can act as shortcuts for helpful code snippets, saving the hassle of using the developer console or writing an extension.
I got back into bookmarklets recently, when I needed a way to hide YouTube’s full-screen UI. Normally, it slides out of view a few seconds after you hit play, but that makes it difficult to take screenshots at precise times.
A quick Google search turned up this bookmarklet:
javascript:(function(){var goaway=".ytp-gradient-bottom,.ytp-gradient-top,.ytp-chrome-top,.ytp-chrome-bottom{display:none;}";if("\v"=="v"){document.createStyleSheet().cssText=goaway}else{var tag=document.createElement("style");tag.type="text/css";document.getElementsByTagName("head")[0].appendChild(tag);tag[(typeof document.body.style.WebkitAppearance=="string")?"innerText":"innerHTML"]=goaway}})();
Transforming a code snippet into a bookmarklet in Chrome is incredibly easy — just highlight the script’s text and drag it onto the bookmarks bar (after which, you’ll want to rename it to something descriptive).
But bookmarklets don’t have to be straightforward; you can do some pretty complex stuff with them these days. Here’s one that lets you examine the layers of a webpage in 3D, courtesy of developer Ted Michael Celis:
javascript:(function(){var js=document.body.appendChild(document.createElement("script"));js.onerror=function(){alert("Sorry, the script could not be loaded.")};js.src="https://rawgit.com/Krazete/bookmarklets/master/tri.js"})();
How about an interactive piano? Celis has you covered there as well:
javascript:(function(){var js=document.body.appendChild(document.createElement("script"));js.onerror=function(){alert("Sorry, the script could not be loaded.")};js.src="https://rawgit.com/Krazete/bookmarklets/master/piano.js"})();
Bookmarklets can even let you extend the functionality of built-in features. Case in point: Brendan Sechter created a few to alter the playback speed of YouTube videos beyond what the UI allows.
If you’re interested in learning more about bookmarklets, Mozilla has a great article that explains the ins and outs.
Leave a Reply
You must be logged in to post a comment.