How to create a Chrome Extension in a few steps

To create a chrome extension you need to take care of some simple steps, so before we diving into this I will show you step by step how I created my first chrome extension which is supposed to test the page speed of a website.

Create the manifest

Open your editor and create a manifest.json file.

manifest json
manifest.json
  • Let’s see line by line what we have in the manifest file.
  • manifest_version should be set to 2 because form January 2014 Chrome dropped the support for version 1;
  • name it’s referring to the name of the extension;
  • version is the extension version, if you release something and you do some updates, you need to update the version;
  • description add what is supposed to do your extension;
  • permissions this is an important tag because here we add the most important permissions from chrome API’s, you can see some of them on the official site;
  • background this attribute is referring to the first script which is running in the background when you open or install the extension. I will show you an example later in this tutorial.
  • browser_action is supposed to show you the default extension icon and you also can add a default HTML template, as I added in my case, but you can add more options, check chrome API.
  • icons for this tag, I added a set of images to serve me a good resolution on different devices.

Because we defined some important attributes in our manifest.json file, now we need to create background.js and popup.html files at the root of the project. So before diving further I suppose you created a project folder for your chrome extension and then add the manifest.json file with the required files. Click on Load unpacked button and open your project folder, you will load your first chrome extension.

how to load a chrome extension
chrome-extension

Introduce User Actions

This should be the latest step form creating a basic extension. As I said before we have background.js file witch can be very simple:

background.js

If you click on the background page link from the extension you will have a chrome console open with some messages or the code you need on the first load.

chrome logs

As we can see in the next image, popup.html has some HTML code where we declare a button for user interaction.

html template for extension
HTML template

Now the fun part for this is to add a new file popup.js, where we can add the logic for chrome extension.

page speed API request
  • we start with document.addEventListener('DOMContentLoaded' , callback) , this means when all of the HTML is ready to interact with then we can add our logic
 // create a form 
  const form = document.createElement('form');
  form.action 
  ='https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
  form.method = 'post';
  const input = document.createElement('input');
  input.type = 'hidden';
  input.name = 'url';
  form.appendChild(input);
  document.body.appendChild(form);

We create with javascript a form with a hidden input where we try to append current url tab of the chrome page to the page speed API, on the next step, we get the URL tab on click event.

// on click event
  checkPageButton.addEventListener('click', function () {
    chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
      // set the url of current tab
      input.value = tabs[0].url;
      const newUrl = form.action + '?url='+ tabs[0].url;
      form.action = newUrl;
      form.submit();
    });
  }, false);

As we can see in the above code, on click event we get the URL tab by consuming chrome tabs API and we append it to the form action. When you will click on the “Test btn” from the chrome extension you will send a POST request to page speed API.

This is just an example to see how you can build a simple chrome extension but the logic can be extended and improved by your needs. For example, instead of creating a form and attaching the URL to action you can use XHR request to send and get some responses from page speed API.

Some links that I used to develop a chrome extension:

I will be back with a new article for doing other cool chrome extensions and if you like to read other articles, you can check my blog page

Sharing is caring!


Leave a Reply

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