You’re certainly no stranger to bookmarks. The flexibility to favourite, save, or “bookmark” internet pages has been a staple browser characteristic for many years. Browsers don’t simply allow you to bookmark internet pages, although. You can even bookmark JavaScript, permitting you to take action rather more than merely save pages.
A JavaScript script saved as a bookmark is named a “bookmarklet,” though some folks 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 in the present day. They’re easy and versatile, a reality evidenced by many of the bookmarklets listed on the aforementioned website are nonetheless working in the present day regardless of being untouched for over 20 years.
Whereas bookmarklets have fallen a bit to the wayside in more moderen years as browsers have grown extra succesful and dev instruments have matured, they’re nonetheless a precious instrument in any internet developer’s arsenal. They’re easy however succesful, and no extra software program is required to create or use them. In case you 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 option to facilitate such a factor.
Making a Bookmarklet
Bookmarklets are extraordinarily simple to make. You write a script in precisely the identical method you’d 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 via making a brilliant primary bookmarklet, one which sends a easy alert. We’ll take the beneath code, which triggers a message utilizing the alert() technique, and bookmarklet-ify it.
alert("Hey, World!");Subsequent, we’ll flip it into an Instantly Invoked Perform Expression (IIFE), which has a number of 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 operate (lambda) (e.g., (() => {})) and suffixing it with ();, which can execute our operate.
(() => {
alert("Hey, 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 obligatory with a easy bookmarklet like this, it will probably forestall a whole lot of bother that will come up with extra complexity. You possibly can encode your bookmarklet your self utilizing JavaScript’s encodeURIComponent() operate, or you should utilize one among a variety 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 typical 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 may count on, that is extraordinarily depending on the browser you’re utilizing.
In Safari on macOS, the simplest manner is to bookmark a webpage after which edit that bookmark right into a bookmarklet:
In Firefox on desktop, the simplest manner is to secondary click on on the bookmark toolbar after which “Add Bookmark…”:
In Chrome on desktop, the simplest 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 precious, as browser dev instruments are sometimes unavailable on cellular.
CSS Bookmarklets
You’ve little question been trying on the phrase “JavaScript” above with a glance of disdain. That is CSS-Methods in any case. Worry not, as a result of we will make bookmarklets that apply CSS to our web page in a plethora of how.
My private favourite technique from an authoring perspective is to create a component with my chosen content material:
javascript: (() => {
var fashion = doc.createElement("fashion");
fashion.innerHTML = "physique{background:#000;colour:rebeccapurple}";
doc.head.appendChild(fashion);
})();The rather more swish strategy is to make use of the CSSStyleSheet interface. This strategy permits for incremental updates and allows you to instantly 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 forestall you from inputting damaged CSS. It’s extra complicated but additionally provides you higher management.
javascript: (() => {
const sheet = new CSSStyleSheet();
doc.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
sheet.insertRule("physique { border: 5px strong rebeccapurple !vital; }", 0);
sheet.insertRule("img { filter: distinction(10); }", 1);
})();As we’re writing CSS for normal utilization throughout no matter web page we want to use our bookmarklet on, you will need to stay conscious that we might run into points with specificity or conflicts with the web page’s present stylesheets. Utilizing !vital is often thought of a foul code odor, however within the context of overriding unknown present kinds, it’s a cheap option to handle our wants.
Limitations
Sadly, there are a number of 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, similar to cross-site scripting assaults, by permitting web sites to manage what will be loaded. You wouldn’t need 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 often blocked. For that reason, a bookmarklet ought to ideally be self-contained, moderately than reliant on something exterior. In case you’re suspicious a bookmarklet is being blocked by an internet site’s safety insurance policies, you possibly can verify 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 increased than you’ll encounter most often. In my very own testing (which can differ by model and platform), listed here are the higher limits I discovered: The most important bookmarklet I might create in each Firefox and Safari was 65536 bytes. Firefox wouldn’t let me create a bookmarklet of any higher size, and Safari would let me create a bookmarklet, however it could do nothing when triggered. The most important bookmarklet I might create in Chrome was 9999999 characters lengthy, and I began having points interacting with the textbox after that time. In case you want one thing longer, you may contemplate loading a script from an exterior location, retaining 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 may contemplate a userscript instrument 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 simply’ve acquired a gauge on what bookmarklets are and, to an extent, what they’re able to, we will check out some helpful ones. Nonetheless, earlier than we do, I want to stress that you have to be cautious operating bookmarklets you discover on-line. Bookmarklets you discover on-line are code written by another person. As at all times, you have to be cautious, cautious, and discerning. Folks can and have written malicious bookmarklets that steal account credentials or worse.
For that reason, when you paste code beginning with javascript: into the handle bar, browsers mechanically strip the javascript: prefix to stop folks from unwittingly triggering bookmarklets. You’ll have to 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-Methods earlier than. Given the evolution of browsers and the online platform, a lot has been obsoleted now, however some extra modern articles embrace:
You should definitely 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:
In case you’ve acquired any golden bookmarklets that you simply discover precious, you should definitely share them within the feedback.
