Bookmarklets: JavaScript in your bookmarks
Bookmarklets are JavaScript programs that can be stored in your browser’s bookmarks. Unlike regular bookmarks, they don’t lead to websites but instead execute code on the page you’re currently viewing. They have a wide range of applications, but they’re often used to automate tedious tasks on a webpage. In this way, they’re somewhat similar to browser extensions, but are generally intended for simpler uses. In this article, I’ll show you how to use bookmarklets and then how to easily create your own.
Saving and Using Bookmarklets: How to Do It
It’s not very complicated. Just take the link below and click on it.
There you go, you’ve just used your first bookmarklet. As with any regular link, you can save it to your bookmarks bar. Now, if you go to another site and click on it, you’ll get the exact same effect as before.
Installing a Bookmarklet You’ve Coded
For bookmarklets that you create yourself, here’s how you should proceed:
- Right-click in the bookmarks bar.
- Select ‘Add page.’
- Enter the name that makes the most sense to you.
- Paste the source code in place of the URL.
How to Program a Bookmarklet Yourself
Using the Browser’s Developer Tools
Ideally, you have some basic knowledge of JavaScript. Turning your code into a bookmarklet is very easy; what’s likely more challenging is creating the script itself. You’ll need to be familiar with manipulating the DOM and the window object.
Here’s how I suggest you proceed:
- Open your browser’s developer console. On most browsers, you can use the F12 key.
- On a Chromium-based browser like Google Chrome or Brave, click on Sources, then Snippets. Firefox has a similar feature.
- Create a New snippet.
- Write your code and test it with CTRL + Enter.
This way, you can refine your program at your own pace and save it as a bookmarklet when you’re fully satisfied with it.
A Concrete Example of a JavaScript Program
With the following example, I’ll try to show you some concepts that will be useful for most applications. Let’s say you want to create a small bookmarklet to quickly retrieve and display SEO information on a page:
- The content of the
<title>tag, - The important
<meta>tags for SEO, - The
<hn>hierarchy of the page, - The number of links.
The goal of the program is to fetch all these elements through basic DOM manipulations and display them in a new tab, which you’ll open using the window object.
For DOM manipulation, I recommend getting familiar with the querySelector and querySelectorAll methods of the document object. You’ll frequently need them to access elements on the page.
/* Retrieve title content */
let title = document.querySelector("title").innerHTML
/* Retrieve all meta tags */
let metas = document.querySelectorAll("meta")
/* Find the relevant meta values */
let metaDescription = ""
let metaRobots = ""
metas.forEach(function(meta){
if(meta.name){
switch(meta.name){
case "description":
metaDescription = meta.content
break
case "robots":
metaRobots = meta.content
break
}
}
})
/* Count all links */
let nLinks = document.querySelectorAll("a").length
/* Get all header tags */
let hns = document.querySelectorAll("h1,h2,h3,h4,h5,h6")Often, the easiest way to display the data you’re interested in is to open a new tab using window.open("","_blank") and write directly in HTML with document.write(). In our example, it looks like this:
/* Open new tab*/
let tab = window.open("","_blank")
/* Write information in new tab */
tab.document.write("<p><b>Title:</b> "+ title +"</p>")
tab.document.write("<p><b>Meta description:</b> "+ metaDescription +"</p>")
tab.document.write("<p><b>Meta robots:</b> "+ metaRobots +"</p>")
tab.document.write("<p><b>Number of links:</b> "+ nLinks +"</p>")
/* Write each header */
hns.forEach(function(hn){
tab.document.write("<" + hn.tagName + ">")
tab.document.write(hn.tagName + ": " + hn.innerHTML)
tab.document.write("</" + hn.tagName + ">")
})
Turn Your Code into a Bookmark
However, you can’t save your script as-is into your bookmarks:
- A bookmarklet always starts with
javascript: - Then, your code must be enclosed in a self-invoking anonymous function
(function(){})() - Finally, it’s best to encode everything in URI syntax.
Of course, you won’t do this manually—there are specialized online tools for this, such as Bookmarklet Maker.
What Are Bookmarklets Used For in Practice?
Examples of Bookmarklet Use
Bookmarklets can save you a lot of time on tedious tasks. For example, you can use them to:
- Click buttons for you using JavaScript events.
- Display DOM information in an HTML table for easy copy-pasting into Excel.
- Open tabs to various tools, passing parameters in the URL.
- And so on.
As we’ve seen earlier, bookmarklets are handy in SEO for quickly displaying metadata. They also allow you to quickly access URLs by passing parameters. For instance, you can perform a quick site search with Google operators like site:, or get insights from PageSpeed Insights. There are plenty of SEO bookmarklets available online.
In any case, if you have more specific needs, you now have the skills to create your own custom bookmarklets!