The number of Chrome users is increasing day by day, and it is not surprising given the benefits it provides over other browsers. Apart from faster surfing, easy to use interface, and better security, Chrome provides its users with a chance to develop extensions to help them with different repetitive tasks. If you are tired of performing the same steps over and over again to have a simple task done, get ready for the ultimate Chrome extension development guide.

 

Step by Step Guide to Chrome Extension Development

Let’s leverage Google’s amazing Chrome Extension Development feature and boost your everyday productivity! Here are 8 simple steps used by experts to develop Chrome extensions for various tasks:

 

• Understand the Need for a Chrome Extension Development

It all begins with you finding the need for your extension. Look at the tasks you are performing every day. Write those tasks down and see the effort and time you spend on each one of them. Once done, you can easily identify one task that is very important to you, is performed every day, takes the most time of your day, and has started becoming hectic. This is one task you must build a Chrome extension for.

 

• Decide on the Features and Functionality

Make a rough sketch of the extension in your mind. Think about all the possible tasks you can use it for and plan a user journey in your head. Go as imaginative and creative as you can. Writing down all of those ideas will help you shape your project later. Now, read through all of your ideas and decide the final features of your project. You will need an icon for your extension for sure. Either design it yourself or outsource it at the beginning of your project to save yourself some time.

 

• Gather all the Tools and Technologies

Now that you have an idea about what you want to develop, it is time to look into the ways you can develop it. You must look at the tools and technologies used for Chrome extension development. This will give you an idea about the tools that are trending and are easy to use. Read the features of the available tools, the pricing plans, and reviews. Do thorough research for finalizing tools as they can either make or break your extension. Some of the famous ones include Chrome Dev Editor, Grunt, and Google Chrome.

 

• Start Creating a Directory

With all the groundwork ready, it is time for you to get into the real game – development of your extension. Start by creating a new directory that will contain all the extension files for the new Chrome extension. Shift all the files you will be needing for Chrome extension development into this directory. If you are wondering about the need for thisf step, we are here to clear your doubts. It is important to have a separate directory as Chrome needs to be pointed to this directory for loading your plugin.

 

• Develop a Manifest File

To get a taste of some more serious work, make a manifest file for your extension. It will include all the steps Chrome will take to load your extension in the right way. It is suggested to name it manifest.json. Place this file into your directory created in the last step. If you are unsure how the code will look like, here is an example:

 

{

“name”: “Here is how to load”,

“description”: “Load My Extension!”,

“version”: “1.0”,

“manifest_version”: 2

}

 

• Time for Loading the Extension

It can be termed as the most exciting step in Chrome extension development. You need to load your extension onto Chrome and test how it’s working. Follow these steps to do so:

 

1. Use your Chrome browser to open chrome://extensions
2. Select the Developer mode from the top right corner using the checkbox
3. Click Load Unpacked and you will see a dialog for selecting your file
4. Choose your extension directory

You can have an error message if your extension is not valid. Read errors and fix them to return to step 1.

 

• Write Background Script for the Extension

A background script is necessary as it tells the extension what to do exactly. Start writing your background script by creating a new file in your directory and naming it background.js. You can add whatever you want your extension to do in the script of this file. For example, if you want your extension to change colors, here is the code for it:

 

{

“name”: “Here is how to load”,

“description”: “Load My Extension!”,

“version”: “1.0”,

“manifest_version”: 2,

“background1”: {

“service_worker”: “background.js”

}

}

 

Chrome will scan for more instructions after reading this file. You can also create a listening event in the background script if wanted. This event will use storage API to set a value allowing 

multiple components of the extension to be executed and edit value. For this, you will also have to register the storage in the manifest file as well. Reload your extension management page and a new field for Inspect views will appear. Click on the background page link to see your code in action.

 

• Add Some UI Elements

An extension is of no good to the users without a friendly user interface. This step focuses on the design of the user interface for your Chrome extension development. The first icon you need to make is the one that will be displayed on the top of the browser for the user to click. You can include more user interface elements including buttons, pop-ups, toggles, and fields. The number of UI elements depends on the complexity and functionality of your extension.

Start by declaring and registering a browser action in your manifest file for your user interface. Make another file in your directory with the same name declared in the manifest file. This file must contain all the details about the browser action you want. A huge number of developers like to use browser_action to develop and add an icon to their extension. It is a piece of HTML code. If you want to include it in your manifest file, below is the code for your ease.

 

“browser_action”: {

“extension_icon”: {

     “17”: “icons/18×18.png”,

     “37”: “icons/37×37.png”

},

“title”: “This is my main icon”,

“my_popup”: “popup.html”

}

 

The text written against the title will show up whenever the user will hover over the icon of your extension. my_popup is the name of the HTML file loaded inside your pop-up. Here is an example for popup.html which includes some text and a button. 

 

<!DOCTYPE html>

<html lang=”en”>

<body>

   <h5>Developing my first Chrome extension</h5>

   <button id=”buttonOne”> Click Button </button>  

<script src=”popup.js”></script>  

</body>

</html>

 

You can also place a badge over your icon if desired. To do so, you need to add the following script in your background file:

 

chrome.browserAction.setBadgeText({text: “You did it!”});

 

• Add a Page Action

Telling the difference between a page action and browser action can be really tough as they are similar. The key difference is that a page action is an icon that exists inside the search bar. Moreover, it does not have any badges to add. When added to the extension, your icon would not show up until you decide to make it visible. It usually shows up when the current page has a link to the extension.

A lot of developers decide whether to have a page action or not at later stages of their Chrome extension development but we would suggest you decide it from the beginning. In case you want to see the icon at all times, you can add the page action in your manifest file as follows:

 

“page_action”: {

” icon”: {

     “18”: “images/icon18.png”,

     “37”: “images/icon37.png”

},

“title”: “Google Mail”,

“my_popup”: “popup.html”

}

 

• Add the Much Needed Logic

Now that you are in the final stages of Chrome extension development, you must ensure that your scripts show logic. Connect all of your user interface elements and backend code with logic. This will guide your extension every step of the way and the steps will be performed just as you wished. Moreover, it will also help your users to understand why you want them to perform a certain action. Let’s have a look at an example.

 

// Change color of the background as the button is pressed

<script>

const buttonElement = document.getElementById(“buttonOne”);

buttonElement.addEventListener(“click”, function() {

  document.body.style.backgroundColor = “green”;

});

</script>

 

The code above will change the color of the background screen when a certain button is clicked. You can follow this example and add logic to other elements of your extension as well.

 

• Test and Wrap It Up

Now that you are done with Chrome extension development, you might be eager to launch it in the market for others to use as well. However, you are forgetting one crucial step that is testing the extension to figure out any bugs or errors. Start by running it on your computer. See if it is giving you the results you expected, write down delays, and find any bugs in execution. Sometimes an extension works fine on one machine but faces issues on another machine. It is suggested that you test it on multiple machines to be sure about its functionality.

It is even better if you test it in the developer mode. Copy “chrome://extensions” and paste it into a Chrome tab. Then press Enter to load the extensions page. Click on the checkbox given for Developer mode to load unpacked extensions. Proceed to click on the Load unpacked extension and click on your folder from the desktop browser for loading your extension. If everything is alright with your Chrome extension, your toolbar window will show it up as a browser action. Click on the icon as well to ensure that it is working fine.

The next step in testing should include your friends, family, or colleagues. Ask them to add the extension and perform the same steps as you. This will help you get feedback from the user’s perspective as well. With this feedback, you can identify any bugs, fix them, and make your extension even better.

Related Article: Benefits of Custom Chrome Extension Development

 

Need Help With Custom Chrome Extension Development?

 

If you are planning to get a custom Chrome extension developed for your personal or commercial use, contact pubGENIUS. We are a leading US software development firm offering consultation, design, and development services. Our team of design and development experts has helped several businesses to transform and scale their organizations through our tailored solutions. To schedule a consultation, please click on the Contact Us button below.