There are chrome extensions for everything, right? Extensions make users’ life easier. If you have been stuck in a repetitive task wishing for a solution, you know what an extension can do. If you spent time searching for an extension and only met silence, don’t worry. You can create a Chrome extension in simple steps as a Chrome user.

In this post, we’ll show you the essential steps to build a Chrome extension, and some tips about its monetization.

What is a Chrome Extension? 

A Chrome extension is a piece of software installed in the Chrome browser that delivers an extra functionality or feature  to the web browser.

Web Technologies to use

To write an extension, you use the same technologies that you need to create a web application. For instance: 

  • HTML- is used to markup the content in the extension
  • JavaScript –  is used to build the scripts and logic of the extension
  • CSS- is used for the extension styling

Requirements for Your Chrome Extension

Two notes before starting:

  1. When you want to build your Chrome extension, it is important to do this in Google Chrome. It may seem obvious, but it is easy to forget if you don’t use Chrome as your default browser.
  2. Test your work as you move through this process. It is easier to fix coding mistakes on the go than go back after you finish.

Before actually building the extension, you need to decide its function. What will the extension do?

Focus on your audience’s interests and problems, so you know what you can offer them.

Once you know what your extension will do, check the design. Every extension uploaded to the Google Chrome store requires an icon. You can create it yourself or outsource the design. Now you can start building the extension.

Steps for learning how to create a Chrome Extension

So, how do you build a chrome extension? We researched the web and came out with the essential steps plus examples.

Step 1: Building Directory & index.html file

Like every piece of software, the extension will consist of several files. So, the first thing you need to do is create a directory that will host all your extension files. 

A directory is a location to store files on your computer. Any operating system with a hierarchical file structure, such as MS-DOS, OS/2, Linux, has a file directory.

A directory is a file that contains the information needed to access other files or other directories. For example, you can have a directory to store all files for your extension.

Why do you need a directory? So when Chrome is loading your extension, you can pull the files from the correct folder.

Start by creating an empty folder where you’ll add all HTML, CSS and JavaScript files for the extension. 

Create an index.html file inside the folder. Here is an example of an index file for an extension that displays COVID-19 Stats:


<!DOCTYPE html>

<html>

<head>

<title>Covid-19 Stats- UK</title>

<meta charset="utf-8">

</head>

<body>

</body>

</html>

Source

Step 2: Using Chrome API

Chrome provides extensions with APIs. For example chrome.action.Most APIs are formed by a namespace and a manifest field.

What is in a manifest field? Frequently, they contain permissions or actions. For example, the chrome.action requires an action present in the manifest.json file.

Extensions can use JavaScript APIs present in the Chrome browser, and also access the Chrome APIs. Extensions can add features to Chrome tools, add a functionality to a website, and more.

Step 3:  The Building Blocks of a Chrome Browser Extension

The manifest.json file

Next, you need to create your extension’s manifest file. 

A manifest is a file that informs the OS how to start a program. Settings in a manifest file are always specified using XML language. Manifests are often used to include settings like privileges, inform the OS which version of a DLL the program will use.

In the case of your extension, the manifest file will give Chrome the instructions to load the extension.

Creating your manifest file

In Chrome, create a file named manifest.json and add it to your directory. Add the code you need to your manifest file. Then add the following code:

{

 "name": "Getting Started Example",

 "description": "Build an Extension!",

 "version": "1.0",

 "manifest_version": 3

 “author”: “John Foster”,

 “action”:{

      “default_popup”: “index.html”,

      “default_title”: “Build an Extension”

}

Manifest.json

The permissions of the extension depend on the extension function. You can find a list of all the permissions and their meaning in the Chrome extension docs.

Pop-Up Page

If your site needs a popup, you should add it to your code.

  1. Assign the name of the file with browser_action in the manifest file.
  2. Build the popup page with HTML or CSS. You can add images with SVG.
  3. Use JavaScript to add functionality to the popup. Designate the JavaScript file and link it in your popup file. For example:
    <script src="background.js"></script>
    
  4. You can create functionality and have access to the popup DOM. Here’s an example of how to do it.
document.addEventListener("DOMContentLoaded", () => {

var button = document.getElementById("submit")

button.addEventListener("click", (e) => {

console.log(e)

})

})

Content script – Content.js

Content scripts are JavaScript files that are part of browser extensions. Content scripts have more privileges than regular javascript. These scripts execute the JavaScript code in the web page, read and modify the DOM (Document Object Model) in the page.

In Chrome, the content script can only use a limited number of Chrome APIs, but can access the rest via the extension’s service worker.

The content_script section defines where the extension should work. If you want the extension to work on all sites, you should write:


"content_scripts": [

{

"matches": ["<all_urls>"],

"css": ["background.css"],

"js": ["background.js"]

}

],

If you want the extension to work on a single site, like Facebook, for example, you should add  [“https://facebook.com/*”]

Service worker

This feature is in charge of handling browser events. An event can be navigating to a new page, or closing a tab. The service worker can access and use all the Chrome APIs but cannot interact with the content on web pages, that’s what content scripts do.

Events page

An Event is an object that enables you to be notified with something interesting happens. For example, you can use the chrome.alarms.onAlarm event to be notified when an alarm is due.

chrome.alarms.onAlarm.addListener(function(alarm) {

appendToLog('alarms.onAlarm --'

+ ' name: '          + alarm.name

+ ' scheduledTime: ' + alarm.scheduledTime);

});

You can learn more about event pages in the Chrome documents

Step 4: Open a popup HTML file from the Chrome extension popup

If you place a button in your native chrome extension, then, when you click on this button, you can make another HTML popup in different content. Here’s an example on StackOverflow:

The manifest.json:


{

"name": "CheatSheets",

"description": "cheatsheet extension",

"version": "1.0",

"manifest_version": 3,

"background": {

"service_worker": "background.js"

},

"permissions": ["storage", "activeTab", "scripting","tabs"],

"action": {

"default_popup": "popup.html",

"default_icon": {

"16": "/images/get_started16.png",

"32": "/images/get_started32.png",

"48": "/images/get_started48.png",

"128": "/images/get_started128.png"

}

},

"icons": {

"16": "/images/get_started16.png",

"32": "/images/get_started32.png",

"48": "/images/get_started48.png",

"128": "/images/get_started128.png"

}

}

The popup.html:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="style.css">

</head>

<body>

<button id="git_Sheet">git sheet</button>

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

</body>

</html>

And the popup.js file:


let gitSheet = document.getElementById("git_Sheet");
gitSheet.addEventListener("click", async () => { let 
		
= await chrome.tabs.query({ active: true, currentWindow: true }); chrome.scripting.executeScript({ target: { tabId: tab.id }, function: ShowGitSheet, }); }); function ShowGitSheet() { chrome.browserAction.openPopup({ popup: "git_popup.html" }); }

Tip:  use chrome.windows.create({url: ‘…’, type: ‘popup’})  instead of chrome.browserAction.openPopup if you want other browser than firefox to run your extension.

Do all extensions have a popup?

Popups are optional. While most manifest.js files have a default_popup property, you can use the extension without opening an empty browser popup.

Step 4: Check for Errors After Installing Your Extension in Chrome

Once you finish the building stage, it is time to test the extension to ensure Chrome will run it. To load your extension and start debugging, follow these steps:

  • Open chrome://extensions in your Google Chrome browser.
  • Set the developer mode by checking the Developer box in the top-right corner.
  • Click “Load unpacked extension,” and you will see your file with an option to select it.
  • If your extension is valid, it should load immediately when you select it.
  • If it is invalid, you will see an error message.

How to Build a Chrome Extension

When writing code, the most common mistakes are syntax errors. So, the first thing is to check again that all your commas and brackets are in the right place and the right format.

Then, make sure you check the “enabled” box so you can see it running.

Step 5: Add logic into action.

A good rule of thumb is to place the API calls in the background script and DOM manipulation in the content script. Let’s see an example of adding a background script:

  1. Create the file called background.js inside the extensions directory
  2. Register the background script in the manifest
{

"name": "Getting Started Example",

"description": "Build an Extension!",

"version": "1.0",

"manifest_version": 3,

"background": {

"service_worker": "background.js"

}

}

Chrome can scan the file for extra instructions when you reload the extension, such as events.

3. Add the script. It will be different according to the purpose of your extension. To help your extension get information when installed, you should include a listening event for runtime.onInstalled in the background script. Then, the onInstalled listener st a value using the storage API, so the extension components can access the value and update it.

// background.js

let color = '#3aa757';

 

chrome.runtime.onInstalled.addListener(() => {

chrome.storage.sync.set({ color });

console.log('Default background color set to %cgreen', `color: ${color}`);

});

Learn more about the next steps on the Google Chrome developer site.  This includes how to create your user interface and icon and establishing some layer logic to enhance the user interaction.

As usual, to begin designing your interface, you need to register a browser action in your manifest file. For example, if you use a pop-up, the code could look like this:

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” href=”button.css”>

</head>

<body>

<button id=”changeColor”></button>

</body>

</html>

What are the requirements of an icon? For images, 16×16 and 32×32 pixels. All icons should be square.

Don’t forget to add your logic scripts so your extension will know what to do. For example, you can add it at the end of the popup.js script.

// When the button is clicked, inject setPageBackgroundColor into current page

changeColor.addEventListener(“click”, async () => {

  let 
		
= await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({     target: { tabId: tab.id },     function: setPageBackgroundColor,   }); }); // The body of this function will be executed as a content script inside the // current page function setPageBackgroundColor() {   chrome.storage.sync.get(“color”, ({ color }) => {     document.body.style.backgroundColor = color;   }); } function setPageBackgroundColor() { chrome.storage.sync.get(“color”, ({ color }) => { document.body.style.backgroundColor = color; });

Step 6: Try Out Your Extension

The next step is logically, continuously testing the extension so you can ensure everything is running as it should. If you outsource the testing, take the opportunity to check how intuitive is the interface. According to the test results, adjust your scripts, then test again.

Step 7: Submit your Extention to the Chrome Web Store

Once you are happy with your extension, you can head over to the Chrome web store and submit it.

In the Chrome developer store, click New item, then drop the project file into the uploader.

Drop or browse file

Chrome will ask some questions to request information about its permissions and why are they needed.

Google Chrome extensions examples

There seems to be an extension for everything. Here are some of the most useful:

  • Save to Drive
    This extension installs a little icon at the top of the browser. It will send whatever you are browsing to your drive account so you can look at it later. It works by taking screenshots, saving images, audio, or video.
  • Sortd
    This plugin gives users a way to organize their inboxes and prioritize what matters most to them. It integrates with Gmail and enables you to drag and drop messages into custom columns.
  • HTTPS everywhere
    This extension enhances the security of your browsing by changing any website from http to secure HTTPS, therefore it is encrypted and secure.
  • I don’t care about cookies
    With every website asking you to agree with the cookies, this extension is a lifesaver. It may not seem much but will hit the agree button on cookie pop-ups. It will save you time and speed up your productivity.
  • Speedtest
    Speedtest
    This useful extension lets you check your connection speed on the go. With a desktop and mobile version, you can ensure your connection is top before downloading a big attachment or streaming a video.
    With one click, Speedtest will perform a fast connection test on the network you are using.

What can your Chrome extension do?

Custom-built extensions are software programs that perform a single task. That being said, you can include more than one functionality, but keep in mind that everything needs to operate to achieve the same purpose.

A Chrome extension works by using page actions or browser actions:

Page action: this is an action specific to certain pages.

Browser action: is relevant regardless of which page you are on.

Ensure the user interface is user-friendly and simple to understand. The final deliverable will be a package user can download and install.

5 tried and tested ways to make money from your extension

The main goal of your extension is to generate revenue. Once you have defined your target audience, and how they will use the extension, you can strategize how you can make money from it. We wrote an extensive guide on extension monetization. Here are some highlights:

1. In-App Ads

In-app advertising is one of the most common ways to monetize your extension. These are ads that appear to a user when they are using your extension. When you monetize via in-app advertising via a programmatic solution, it rotates the ads. Unlike static ads, this technique helps you maximize your potential. By using display advertising, you can mix different types of ads.

CodeFuel users maximize their yield and simplify their monetization because the service displays ads relevant to the user intent.

2. Search Ads

This is a strategy where ads are placed on a search engine results page. Because the ads appear when the person is looking for something, it doesn’t disturb the user experience. You can customize search ads according to the user intent, so it enhances the user experience.

3. In-App Payments and Purchases

In this model, the extension is free but there are inside features you charge for. In-app purchases are common among game applications and extensions. The user chooses if they want to add the extra paid features.

4. Paid Upgrades

Similarly, in this model, the basic extension is offered for free, but if the user wants a premium version, they need are required to pay for the upgraded version. This is an extremely common model, used by popular extensions like Grammarly.

5. Freemium

This is probably the most popular model of monetization for extensions and applications. With freemium, you offer the extension for free. How do you earn money from it? You have a couple of options:

  1. You can offer a free trial for a limited period of time.
  2. You can offer a free, basic version with limited features.

If you choose this model, consider its limitations since Google discontinued paid extensions.

The Best Security Extensions Google Chrome:

Most people use Chrome for everything from shopping, and searching to managing their financial accounts. All this sensitive data needs to be protected. There are several extensions that can make that information stay safe.

1. Avast Online Security

This extension will cover the security of your web browsing with multiple features. Its phishing attack protection scans the elements of any web page and detects if the page is fake or suspicious. Other valuable features include using a community rating system to detect dangerous sites.

2. Blur

Blur -  Chrome Security Extension

There are a number of password managers available, which is a must to ensure all your credentials stay safe. Blur is one of the most secure, because of its additional security features.

Blur encrypts, saves, and manages your passwords. It also hides your credit card information from shopping sites and blocks all types of trackers, including non-cookie ones.

3. Click and Clean

Click and Clean

It is a cleaning tool that clears all traces of your online activity with a single click. The extension button will clear all online history, cookies, cache, saved URLs, web SQL databases, and even temporary files. Click and Clean has a built-in anti-malware and it can even get customized to delete certain types of data.

4. Panic Button

This extension helps you close everything you have open with a single click. This is helpful if you are working on something sensitive and a non-authorized person gets near. When clicking the panic button, all tabs will close immediately and be stored in the bookmarks folder.

5. Ghostery

Ghostery Chrome Security Extension

If you want to protect your online privacy or get control over trackers, this extension can be the solution. Ghostery gives you control over trackers so you can decide which ones to block or unblock. It also enables you to block tracking of a specific type.

How CodeFuel can help you maximize the yield of your extension

Take your extension monetization to the next level with CodeFuel. Our complete monetization platform provides intent-based monetization for your digital properties, including browser extensions.

The solution leverages machine learning to serve users highly relevant shopping and text ads, customized according to intent. Unlike other solutions, CodeFuel enables you the flexibility to work with multiple ad networks such as Bing and GoogleAdSense. Start maximizing your extension yield with CodeFuel today.

How to restart the Chrome extension if it freezes?

You are working with your Chrome extension and suddenly the browser freezes. How frustrating. It is not common, but it happens. If Chrome crashes, or freezes, you will get an error message stating the type of error, for example, a proxy error, or the web page is not available.

Chrome help lists a number of troubleshooting tips:

  • Close other tabs and apps
  • Restart the browser
  • Check for malware
  • Test the network for issues
  • If your extension is causing a conflict with Chrome, follow these instructions:
  1. At the top right, click More More button Instruction Arrow Settings.
  2. At the bottom, click Advanced.
  3. Click Reset and clean up  Instruction Arrow  Update or remove incompatible applications.
    If you don’t see this option, there isn’t a problem application.
  4. Decide if you want to update or remove each app from the list.
    Open your computer’s app store and check for an update.

FAQ

  • Do Chrome extensions get paid?

In 2020, Google shut down paid Chrome extensions on the Chrome Web Store. This means you no longer can charge for your extensions in the web store. You can use other platforms.

  • How do I publish a Chrome extension?

Once you have your extension ready, follow these instructions to publish it on the Chrome Store:

  1. Create your zip file
  2. Create and set up a developer account
  3. Upload the extension
  4. Add assets for your listing
  5. Submit your item for publishing
  • How to Improve User Experience and Get More Conversions

This is a broad subject far from the scope of this question but here are some basic principles:

  1. Keep the navigation of your extension simple
  2. Offer good customer support
  3. Make your extension easy to use
  4. Ensure it doesn’t increase browser memory consumption.
  5. Simplify login for Google users
  • What technologies are used to write extensions for Chrome?

Extensions are made of different components, created with multiple web development technologies. The most popular are HTML, CSS, and JavaScript.

  • Can extensions create UI outside of the rendered web page?

According to the Chrome developer’s page, yes, the extension may add buttons to the browser interface. Extensions can also create popup notifications.

  • Can extensions modify chrome:// URLs?

Extensions, by definition, expand the browser by using APIs to modify browser behavior. Since they are built on web technologies, they run on separate, execution environments and interact with the Chrome browser.

  • How do I build a UI for my extension?

An extension UI needs to be as minimal as possible. You can find the detailed instructions in the Developer section of Chrome. Here are some basic steps:

  1. Allow the extension on all pages by registering a browser action in the manifest. Add a badge to identify the extension.
  2. Define the rules for activating the extension.
  3. Provide the icons.
  4. You can add other features such as pop-ups, tooltips, and more.

So, You Built Your Extension, Now How Do You Make Money From It?

Usually, the goal of building an extension is to monetize it. How do you do that? Here at CodeFuel we are experts in extension monetization as part of our all in one monetization platform for digital properties.

Monetization strategies for extensions may include:

  • Advertising
  • Charging for the Extension
  • Work on a subscription basis

And more.

You can learn more about strategies, how-tos and tips about extension monetization in our guide: How to Monetize your Browser Extension. Search the CodeFuel blog for lots of practical knowledge about monetizing apps, websites, search and extensions.