Mar 15, 2020
Bookmarklet
There are many great things of being a Frontend Developer. One of it is your knowledge of DOM API able to “unlock” features that is not provided by your site.
For instance, one of the things I do the most is to speed up video play speed, by using the following script in browser console:
js
document.querySelector('video').playbackRate = 2;
js
document.querySelector('video').playbackRate = 2;
However, being a lazy programmer, how do you able to make that snippets just one click away?
One way is to write a browser extension, which one day, you will have time to learn how to write.
Another way is to write a bookmarklet.
Bookmarklet is simply saving your JS code in a bookmark so you can execute it.
For example, the bookmarklet-ized script of that previous script will be:
js
javascript: (function () {document.querySelector('video').playbackRate = 2;})();
js
javascript: (function () {document.querySelector('video').playbackRate = 2;})();
And how you use that is to add a bookmark in your browser, by setting the script as the URL.
Now faster video is just a click a way!
You can even parameterized your bookmarklet with the prompt
function:
js
javascript: (function () {const playRate = prompt('How fast you want the video to be? (e.g. 2)');if (playRate) {document.querySelector('video').playbackRate = Number(playRate);}})();
js
javascript: (function () {const playRate = prompt('How fast you want the video to be? (e.g. 2)');if (playRate) {document.querySelector('video').playbackRate = Number(playRate);}})();