You'd Be Surprised By What You Can Do With Browser Bookmarklets Now

Image: Iwan Gabovitch / Flickr

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.


Comments

    I thinks it's rather remiss of you not to mention to take due care with installing bookmarklets. Those ones that you've linked to include a script from somewhere else. Someone could very easily, unwittingly, include a script that loads a keylogger into their browser. Bookmarklets might be cool, but there is the potential for them doing a lot of damage to your computer or your life

    Cool, I'm in an article. :D
    But yeah, @denno020 makes a good point. You should probably add a disclaimer about installing bookmarklets that link to external sources.
    If you check the URL in the examples linked in the article, you'll see why I put it in an external source: it's a rather long script. But you'll also notice that the code is unobfuscated, pretty readable, has no additional external links inside, and doesn't include anything shady like XMLHttpRequest or AJAX. So it's safe.
    Facebook and other big sites prevent you from injecting externally sourced JavaScript, so that helps with the safety problem. But still, try to check for that stuff before using a bookmarklet. Or just have trust and hope for the best.

Join the discussion!

Trending Stories Right Now