10 min to read

Creating browser extensions

Featured image

Writing extensions is not that difficult, if you had an implementation with you and if you know basic web technologies like html, css and js, it is quiet enough for building a basic extension.

In this tutorial we will build a basic chrome extension that allows the user to change the background color of any page on DevsKrate.com.

Before getting started, know the basic things. When you click on an extension, we get a popup, it is a html file. We need to design the html page and the script behind it.

Create the Manifest file

Every extension start from their manifest file, so create a manifest.json and include the following code.

{
  "name": "dev example",
  "version": "1.0",
  "description": "First extension example!",
  "manifest_version": 2
}

The manifest file is the blueprint for the Extension. It tells the browser engine what version of the Extension API the Extension expects, the name and description of the Extension, and lots of other details.

  1. Now open chrome and enter chrome://extensions in the url bar to open chrome extensions page or it can be opened by clicking on the Chrome menu, hovering over More Tools then selecting Extensions.
  2. Enable Developer Mode by clicking the toggle switch next to Developer mode.
  3. Click the LOAD UNPACKED button and select the extension directory. Ta-da! The extension has been successfully installed. Because no icons were included in the manifest, a generic toolbar icon will be created for the extension.

Add Instruction

Now the second step is to add the instructions(script) what our extension needs to do. Before that we need to include the background script in the manifest file.

Remember Background scripts, and many other important components, must be registered in the manifest. Registering a background script in the manifest tells the extension which file to reference, and how that file should behave.

Update the manifest file with the below code:

{
  "name": "dev example",
  "version": "1.0",
  "description": "First extension example!",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

Now create background.js file and then include the below code. It sets the background color.

chrome.runtime.onInstalled.addListener(function() {
    chrome.storage.sync.set({color: '#3aa757'}, function() {
      console.log("The color is green.");
    });
});

Introduce a User Interface

Extensions can have many forms of a user interface, but this one will use a popup. Create a file named popup.html in the extension directory.

<!DOCTYPE html>
<html>
    <head>
      <style>
        button {
          height: 30px;
          width: 30px;
          outline: none;
        }
      </style>
    </head>
    <body>
      <button id="changeColor"></button>
    </body>
</html>

The browser will now show a full-color page action icon in the browser toolbar when users navigate to a URL that contains DevsKrate.com. When the icon is full-color, users can click it to view popup.html.

Layer Logic

The extension now knows the popup should be only available to website DevsKrate.com and displays a colored button when the website is opened, but needs logic for further user interaction. Update popup.js and include the following code

  changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: 'document.body.style.backgroundColor = "' + color + '";'});
    });
  };

The updated code adds an onclick event the button. This turns the background color of the page the same color as the button.

Users Options

The extension currently only allows users to change the background to green. Including an options page gives users more control over the extension’s functionality, further customizing their browsing experience.

<!DOCTYPE html>
  <html>
    <head>
      <style>
        button {
          height: 30px;
          width: 30px;
          outline: none;
          margin: 10px;
        }
      </style>
    </head>
    <body>
      <div id="buttonDiv">
      </div>
      <div>
        <p>Choose a different background color!</p>
      </div>
    </body>
    <script src="options.js"></script>
</html>

Then register this in the manifest.json page by adding this line, in the middle.

"options_page": "options.html",

Now everything is fine, but if user goes the options.html page and selects the color, we need to change it, so we need a script for it. Create a options.js file in the directory.

let page = document.getElementById('buttonDiv');
  const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
  function constructOptions(kButtonColors) {
    for (let item of kButtonColors) {
      let button = document.createElement('button');
      button.style.backgroundColor = item;
      button.addEventListener('click', function() {
        chrome.storage.sync.set({color: item}, function() {
          console.log('color is ' + item);
        })
      });
      page.appendChild(button);
    }
  }
  constructOptions(kButtonColors);

Just refresh the extension!!, kudos you have built a basic extension. Test by going to DevsKrate.com, it will work for all the pages of the Domain, check it out.

It will not work for the article(posts) pages because we have a dark theme for our articles, so you need to give special permissions to overwrite it and give the background color.