×

Making simple browser bookmarklets for everyday productivity

By  on November 16, 2018

Everyday at work, we do a multitude of tasks with the internet. Some of these tasks tend to be repetitive and tedious. Fortunately, there are easy ways to create simple tools that will help us take care of these mundane work so that we can remain productive and focused.

An introduction to browser bookmarklets

Browser bookmarklets are little pieces of Javascripts that can run simple or fairly complex tasks on a web page you are viewing. Like all your other bookmarks, bookmarklets live in your browser bookmarks bar and can be triggered with a single click.

Bookmarklets can do more than just being a shortcut to your favourite website. Let’s explore more by making one ourselves!

Making a bookmarklet

Follow along with this post and I will show you how to make a simple bookmarklet that will help you check whether the page you are browsing has been indexed by Google, in a single click!

Now, to give you a little context to what I’m getting at, you can find out whether a particular URL is indexed by Google by typing site:[url] in the Google search box. For instance, if I want to find out whether https://www.microsoft.com/en-sg/windows is in Google’s index, I will type in site:https://www.microsoft.com/en-sg/windows. We are going to make the bookmarklet do that for any page you are browsing.

If you have some basic understanding of HTML and Javascript, you will be able to easily grasp this. If you don’t, fret not and just follow along! It’s really simple!

Step 1 : Create a barebone HTML page

This step is really just to help you view your end product and install it with ease!

Copy the HTML template into your favourite text editor and save the file as test-bookmarklet.html on your desktop.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test Bookmarklet</title>
</head>
<body>

</body>
</html>

Step 2 : Make an HTML anchor link

In this step, we will make an anchor link placeholder that will hold the Javascript that we will be creating in a minute. Copy the anchor link HTML below to the <body> of your test-bookmarklet.html file.


<a href="[Javascript here]">My Test Bookmarklet</a>

Your code should now look like this.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test Bookmarklet</title>
</head>
<body>

<a href="[Javascript here]">My Test Bookmarklet</a>

</body>
</html>

Notice the part that says “[Javascript here]“? This is where we will write our Javascript to perform the task that we want the bookmarklet to do. Let’s do that in the next step.

Step 3 : Writing the Javascript

Earlier, we said that we will be make the bookmarklet query Google’s index to check if the URL that you are browsing has been indexed by Google. We will write some simple Javascript to make this happen! Now, open a new file in your text editor and copy the starting template below into it.


javascript:(function(){
  /* Your code starts below this line */

  /* And ends before this line .. */	
})();

A bookmarklet Javascript typically begins with the following boilerplate code. Any customised coding goes in between the two lines marked with the /* ... */.

Next, we are going to write the portion of the code that will retrieve the URL from your browser’s address bar and send it over to Google to determine if it’s been indexed. Google’s query format for checking URLs will look something like this : https://www.google.com.sg/search?q=site:[your URL goes here]. So, by retrieving the URL from the browser’s address bar, we can send it over to Google in this format. See the code below.


javascript:(function(){
  /* Your code starts below this line */
  
  /* Get the browser address */
  var browser_add = window.location.href;

  /* Send it to Google */
  window.location.href = 'https://www.google.com.sg/search?q=site:'+browser_add;

  /* And ends before this line .. */	
})();

Now that your Javascript is ready, we will copy it and paste into the anchor link placeholder to replace the string that reads “[Javascript here]”. Your final code should now look like this.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test Bookmarklet</title>
</head>
<body>

<a href="javascript:(function(){
  /* Your code starts below this line */
  
  /* Get the browser address */
  var browser_add = window.location.href;

  /* Send it to Google */
  window.location.href = 'https://www.google.com.sg/search?q=site:'+browser_add;

  /* And ends before this line .. */	
})();">My Test Bookmarklet</a>

</body>
</html>

Save your test-bookmarklet.html.

Step 4 : Installing the bookmarklet on your browser

To install your new bookmarklet, make sure that you have enabled your browser’s bookmark bar. To do that for Google Chrome, press Command + Shift + B on a Mac and Ctrl + Shift + B on a Windows machine. Firefox users can check this out.

Next, return to your test-bookmarklet.html and open it in a web browser by double-clicking on it. You should see a pretty much blank page with a plain hyperlink that reads “My Test Bookmarklet“.

Here’s the interesting bit : To install the bookmarklet, just click on the hyperlink and drag it to your browser’s bookmark bar and drop it there. You should see it appear as a bookmark item that is labelled “My Test Bookmarklet“. Your bookmarklet is ready!

Step 5 : Using your bookmarklet

To try this out on your web browser, navigate to any website or page, say https://www.microsoft.com/en-sg/windows. Then click on your bookmarklet in the bookmarks bar and watch the magic happen!

That’s it!



Posted in: ,

Leave a Reply

Your email address will not be published. Required fields are marked *