In this detailed guide, we will walk you through the whole process to create and publish a Google Chrome Extension. The chrome extension is very extensible and it seems like there is a plugin for everything you want with the browser’s functionality. You can also create your own Chrome extension to add specific functionality, as long as everything directs towards a singular function. Don’t forget to upload your extension on Chrome Store or add them to GitHub Repository Portfolio to win some brownie points from your recruiters. 

As a blogger, It was exhausting to ensure manually one by one which links are redirecting to the preferred page and which links are dead-end. I was stuck doing a repetitive task and I wished I could automate this process. Unless I came across a Chrome Extension known as Link Checker, which runs through every webpage and displays a detailed overview of completed links, the number of good, bad, and warning links. Google Chrome Extensions are made of different cohesive components, to be installed on your Chrome browser. They help to automate certain functions, tweak existing behavior and improve performance.

There are thousands of Chrome extensions like Link Checker that execute a simple functionality and enhance the User Experience not only limited to blogging. If you are a Shopify Store Developer, you can install the Koala Inspector, to see what themes were used, if any new updates have been released, and product statistics. Similarly, Whatruns lets you discover every technology that runs on a website, frameworks, web technology, themes, CMS, and even the Font.  

What’s Chrome Extension?

From a technical perspective, a Chrome Extension is just some CSS, HTML, and JavaScript that enables the user to add functionality into the Chrome Browser through some API. The extension components include content scripts, background scripts, an options page, Logic files, and various UI elements. An extension’s component relies on its functionality and may or may not require every option. 

The difference between a Chrome Extension and an application is that they are often easier to build & deploy as they are centered around a singular function. The following tutorial will guide you to create a beginner’s level- Chrome Extension that changes the background color of a paragraph. Before dwelling into all technical nitty-gritty jargon, here are some prerequisites: 

  • Prior basic understanding of HTML and JavaScript. 
  • Experience with IDE. ( I suggest Visual Studio Code) 
  • A folder in your system space to store Chrome Extension files like manifest.json, background.js, popup.html, logic files, and so on. 

To generate a foundational understanding of HTML, CSS, and JavaScript, head over to GUVI’s web development learning path.

Uncovering Google Chrome Extension Architecture

An extension’s architecture will depend on its functionality, Although robust extensions like Grammarly, Evernote requires all the components to create their extension.

  • Manifest
  • Background script
  • Content script
  • Options page
  • UI Elements

Manifest

Every extension contains a JSON-formatted manifest file, named manifest.json. Google uses this file to acquire certain pieces of information about the extension you are going to develop.  

Background Script

It is also known as extension’s event handler. The background.js contains listeners for browser events that are important to the extension. It lies dormant until an event is fired then performs the instructed logic. An effective background script is only executed when it is needed and unloaded when it goes idle.

Content Script

Extensions that read or write to web pages utilize a content script. The content script contains JavaScript that executes in the context of your current webpage.

Content scripts can communicate with their parent extensions by exchanging messages and storing values using storage API.

Options page

Just as extensions allow users to customize the Chrome browser, the options page enables customization of the extension. Options enable features and allow developers to pick the relevant functionality for their users.

UI Elements

An extension’s user interface should be minimal and purposeful. The UI should customize or enhance the browsing experience without distracting from it. Most extensions have a browser action or page action but can contain other forms of UI, such as context menus, use of the Omnibox, or creation of a keyboard shortcut.

Extension UI pages, such as a popup, can contain ordinary HTML pages with JavaScript logic. Extensions can also call tabs.create our window.open() to display additional HTML files present in the extension.

Creating your first project 

The first thing we need to do is create the project folder and all the files we need for our extension. Let’s start by creating a new directory that we’ll call “Color Shuffle Demo Extension.” Chrome allows us to load up the plugin by pointing it at a folder that contains all files such as manifest.json and additional HTML files. 

Now we will create a manifest file and later append it with Background and Content Script. 

{
 "manifest_version": 2,
 "name": "Color Shuffle Demo Extension",
 "version": "1.0.0",
 "description": "Sample description",
 "short_name": "Colours",
 "permissions": ["activeTab", "declarativeContent", "storage", "<all_urls>"],
 },
  • Description and name can be anything you’d like.
  • Version is your Chrome Extension Version
  • Short_Name is a short version of your extension’s name. It is optional.
  • The permissions depend on what extension needs to do, and what are its parameters. A list of all permissions is available on Chrome’s extension docs. I suggest you give it a read.

Creating Content.Js

Content scripts are files that run in the context of your web pages. It uses DOM (Document Object Model), which is able to discover the webpage that the browser visits, modify them, and pass the information to their parent extension. Content scripts read and modify the DOM of web pages the browser visits.

chrome.runtime.onMessage.addListener(gotMessage);
function gotMessage(message,sender,sendresponse)
{
	console.log(message.txt);
	let paragraphs = document.getElementsByTagName("p");
	for(elt of paragraphs)
	{
		elt.style['background-color'] = '#228B22';
	}
}

You are free to pick any colour you’d like. We have picked “Forest Green.”

Creating Background.Js

Background.js will overcome the limitations of Content Script. A content script has access to the current webpage but it is limited to only one API. That’s why we need diff type of script that has access to all chrome APIs.

console.log("Background running");
chrome.browserAction.onClicked.addListener(IconClicked);
function IconClicked(tab)
{
	let msg = {
		txt : "Hello"
	}
	chrome.tabs.sendMessage(tab.id,msg);
}

Content Scripts have some limitations. They can’t use several API’s such as chrome* with the exception of extension, runtime, i18n and storage.

Nevertheless, they can communicate with their parent extension by exchanging messages with a background script and storing certain values using storage APIs.

Browser Action

The browser Action function adds a little icon next to your chrome address bar, your browser can listen for the clicks and perform the single function. Having a popup & title is completely at the developer’s discretion. The browser action icons in Chrome are 16 dips in width and height. However, Chrome will automatically select and scale it to fill the 16 dip space.

"browser_action": {
   "default_title": "Change the color of the paragraph",
   "default_popup": "popup.html",
   "default_icon": {
     "16": "icons/icon16.png",
     "32": "icons/icon32.png"
   }
 },
 "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"

Appending

Now open the mensifest.json and append the content and background script.

{
 "manifest_version": 2,
 "name": "Color Shuffle Demo Extension",
 "version": "1.0.0",
 "description": "Sample description",
 "short_name": "Colours",
 "permissions": ["activeTab", "declarativeContent", "storage", "<all_urls>"],
"content_scripts" : [
		{
			"matches" : [
				"<all_urls>"
                 ],
                  "js" : ["content.js"]
        }
    ],
    "background" : {
                  "scripts" : ["background.js"]
    },
    "browser_action" : {
   "default_title": "Change the color of the paragraph",
   "default_popup": "popup.html",
   "default_icon": {
     "16": "icons/icon16.png",
     "32": "icons/icon32.png"
   }
 },
 "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
    }
}
      

Testing & Initializing

Once the scripts are ready with the codes, let’s test and add them to the Chrome extension. Head over to chrome.//extensions and perform the following steps.

  • Enable Developer mode option on the top right side corner of the page.
  • Click the load unpacked button.
  • Select the folder directory, where we have written the code and open it.

After this, the Chrome extension is loaded into your browser. For debugging you can visit Chrome Documentation.

After the installation, run your Extension and you will have an output like this.

Publish your Chrome Extension

For publishing the extension in Chrome Web Store, one needs to have a developer account. There is a one-time sign up fee of $5 to publish your extensions. With this account, you can publish as much as 20 extension in Chrome Store. After successful sign up, next step is to log in to your developer’s account and go to your developer’s dashboard.

There you will come across the “Add New Button” button which will redirect you to a page to upload a ZIP file. Don’t forget to create a Zip file beforehand of your folder directory comprising of JSON and JavaScript files.

Upload your Zip package, and give a relevant description of your extension. Please make sure that you clearly explain the singular function of your extension. Moreover, you can also Screenshots and a YouTube tutorial video to guide your users, on how to interact with your plugin.

You can also edit the icons of your extension and configure your extension at any point of time. To see how everything you configured will look on Chrome Web store, preview the changes. If everything goes smoothly, hit “Publish.”

Congratulations, you have just uploaded your first Google Chrome Extension.

Summing up

It may has a bit of learning curve, but creating an Google Chrome Extension from scratch is a great way to create optimal user experience and tweak your browser functionality. What’s more is that you can showcase your new features to your colleagues and prospective recruiters.

In case you need help with any of the programming curves, head over to GUVI. We host 100+ premium tech courses ranging from web development, data science to testing and cloud computing for one’n all subscription price. Most of the courses are curated under the guidance of IIT-M professors and industry leaders who have built disruptive tech from ground up.