You’re absolutely no stranger to bookmarks. The power to favourite, save, or “bookmark” net pages has been a staple browser characteristic for many years. Browsers don’t simply allow you to bookmark net pages, although. You too can bookmark JavaScript, permitting you to take action far more than merely save pages.
A JavaScript script saved as a bookmark is named a “bookmarklet,” though some individuals additionally use the time period “favelet” or “favlet.” Bookmarklets have been round for the reason that late 90s. The location that coined them, bookmarklets.com, even stays round at present. They’re easy and versatile, a truth evidenced by a lot of the bookmarklets listed on the aforementioned web site are nonetheless working at present regardless of being untouched for over 20 years.
Whereas bookmarklets have fallen a bit to the wayside in newer years as browsers have grown extra succesful and dev instruments have matured, they’re nonetheless a useful software in any net developer’s arsenal. They’re easy however succesful, and no further software program is required to create or use them. For those who watch any good machinist or engineer at work, they’re continuously constructing instruments and utilities, even one-off contraptions, to handle issues or come to a extra swish answer as they work. As builders, we must always endeavor to do the identical, and bookmarklets are an ideal strategy to facilitate such a factor.
Making a Bookmarklet
Bookmarklets are extraordinarily simple to make. You write a script in precisely the identical method you’ll if writing it for the browser console. You then put it aside as a bookmark, prefixing it with javascript: which designates it to be used within the browser URL bar.
Let’s work by making an excellent primary bookmarklet, one which sends a easy alert. We’ll take the under code, which triggers a message utilizing the alert() methodology, and bookmarklet-ify it.
alert("Hi there, World!");Subsequent, we are going to flip it into an Instantly Invoked Perform Expression (IIFE), which has just a few advantages. Firstly, it creates a brand new scope to keep away from polluting the worldwide namespace and prevents our bookmarklet from interfering with JavaScript already on the web page, or vice versa. Secondly, it’ll trigger the bookmarklet to set off upon click on.
We’ll obtain this by enclosing it inside an nameless perform (lambda) (e.g., (() => {})) and suffixing it with ();, which can execute our perform.
(() => {
alert("Hi there, World!");
})();For reliability throughout browsers, it’s to our profit to URL-encode our bookmarklet to flee particular characters. With out doing so, browsers can go awry and misread our code. Even when it isn’t totally vital with a easy bookmarklet like this, it could actually stop a whole lot of bother which will come up with extra complexity. You possibly can encode your bookmarklet your self utilizing JavaScript’s encodeURIComponent() perform, or you should utilize one among quite a lot of present instruments. We’ll additionally cut back it to a single line.
(()%3Dpercent3Epercent7Balert(%22Hellopercent2Cpercent20World!%22)%3Bpercent7D)()%3BWe should prefix javascript: in order that our browser is aware of this isn’t a normal URL to a webpage however as a substitute a JavaScript bookmarklet.
javascript:(()%3Dpercent3Epercent7Balert(%22Hellopercent2Cpercent20World!%22)%3Bpercent7D)()%3BPutting in a Bookmarklet
Lastly, we should add it to our browser as a bookmarklet. As you would possibly count on, that is extraordinarily depending on the browser you’re utilizing.
In Safari on macOS, the best manner is to bookmark a webpage after which edit that bookmark right into a bookmarklet:
In Firefox on desktop, the best manner is to secondary click on on the bookmark toolbar after which “Add Bookmark…”:
In Chrome on desktop, the best manner is to secondary click on on the bookmark toolbar after which “Add web page…”:
Many cellular browsers additionally permit the creation and utilization of bookmarks. This may be particularly useful, as browser dev instruments are sometimes unavailable on cellular.
CSS Bookmarklets
You’ve little doubt been trying on the phrase “JavaScript” above with a glance of disdain. That is CSS-Tips in any case. Worry not, as a result of we are able to make bookmarklets that apply CSS to our web page in a plethora of the way.
My private favourite methodology from an authoring perspective is to create a factor with my chosen content material:
javascript: (() => {
var fashion = doc.createElement("fashion");
fashion.innerHTML = "physique{background:#000;colour:rebeccapurple}";
doc.head.appendChild(fashion);
})();The far more swish method is to make use of the CSSStyleSheet interface. This method permits for incremental updates and allows you to immediately entry the CSS Object Mannequin (CSSOM) to learn selectors, modify present properties, take away or reorder guidelines, and examine computed construction. The browser additionally validates values enter this fashion, which helps stop you from inputting damaged CSS. It’s extra complicated but in addition provides you better management.
javascript: (() => {
const sheet = new CSSStyleSheet();
doc.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
sheet.insertRule("physique { border: 5px stable rebeccapurple !necessary; }", 0);
sheet.insertRule("img { filter: distinction(10); }", 1);
})();As we’re writing CSS for basic utilization throughout no matter web page we want to use our bookmarklet on, you will need to stay conscious that we could run into points with specificity or conflicts with the web page’s present stylesheets. Utilizing !necessary is normally thought of a foul code scent, however within the context of overriding unknown present kinds, it’s a affordable strategy to deal with our wants.
Limitations
Sadly, there are just a few roadblocks that may hinder our utilization of bookmarklets. Essentially the most pervasive are Content material Safety Insurance policies (CSP). A CSP is a safety characteristic that makes an attempt to stop malicious actions, corresponding to cross-site scripting assaults, by permitting web sites to control what will be loaded. You wouldn’t wish to permit scripts to run in your financial institution’s web site, as an example. A bookmarklet that depends on cross-origin requests (requests from exterior the present web site) may be very ceaselessly blocked. Because of this, a bookmarklet ought to ideally be self-contained, somewhat than reliant on something exterior. For those who’re suspicious a bookmarklet is being blocked by a web site’s safety insurance policies, you’ll be able to examine the console in your browser’s developer instruments for an error.
As bookmarklets are simply URLs, there isn’t any strict restrict to the size specified. In utilization, browsers do impose limits, although they’re greater than you’ll encounter usually. In my very own testing (which can range by model and platform), listed below are the higher limits I discovered: The biggest bookmarklet I may create in each Firefox and Safari was 65536 bytes. Firefox wouldn’t let me create a bookmarklet of any better size, and Safari would let me create a bookmarklet, however it could do nothing when triggered. The biggest bookmarklet I may create in Chrome was 9999999 characters lengthy, and I began having points interacting with the textbox after that time. For those who want one thing longer, you would possibly take into account loading a script from an exterior location, holding in thoughts the aforementioned CSP limitations:
javascript:(() => {
var script=doc.createElement('script');
script.src="https://instance.com/bookmarklet-script.js";
doc.physique.appendChild(script);
})();In any other case, you would possibly take into account a userscript software like TamperMonkey, or, for one thing extra superior, creating your personal browser extension. An alternative choice is making a snippet in your browser developer instruments. Bookmarklets are greatest for small snippets.
Cool Bookmarklets
Now that you just’ve obtained a gauge on what bookmarklets are and, to an extent, what they’re able to, we are able to check out some helpful ones. Nonetheless, earlier than we do, I want to stress that try to be cautious working bookmarklets you discover on-line. Bookmarklets you discover on-line are code written by another person. As all the time, try to be cautious, cautious, and discerning. Individuals can and have written malicious bookmarklets that steal account credentials or worse.
Because of this, when you paste code beginning with javascript: into the deal with bar, browsers mechanically strip the javascript: prefix to stop individuals from unwittingly triggering bookmarklets. You’ll must reintroduce the prefix. To get across the javascript: stripping, bookmarklets are sometimes distributed as hyperlinks on a web page, which you’re anticipated to tug and drop into your bookmarks.
Particular bookmarklets have been talked about on CSS-Tips earlier than. Given the evolution of browsers and the net platform, a lot has been obsoleted now, however some extra up to date articles embrace:
Be sure you take a look at the feedback of these posts, for they’re full of numerous nice bookmarklets from the group. Talking of bookmarklets from the group:
For those who’ve obtained any golden bookmarklets that you just discover useful, make sure you share them within the feedback.
