In this post

While these days there seems to be an extension for everything, it’s not impossible for one to struggle to find a browser extension for a particular purpose or need. How complicated is it to build one? Below you’ll find a step-by-step guide on how to create a Chrome extension:

Step 1: Requirements

Two notes before starting:

  • While this may seem obvious to most, it is important to build your extension within Google Chrome itself.
  • Test your work as you move through this process. It is easier to fix coding mistakes as you go than turn back once you’ve finished.

Before you get started, you will need to decide the extension’s function. What purpose will it serve? Focus on your audience’s interests and problems, so you can clearly define what kind of solution you can offer.

Once you have this covered, check the design. Every extension uploaded to the Google Chrome store requires an icon. You can create it yourself or outsource the design. Once you have your icon you can get started building your extension.

Step 2: Building Blocks

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, or Linux, has a file directory.

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

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

}

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:
  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

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/*”]

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

Content.js

Content scripts are JavaScript files that are part of browser extensions. Content scripts have more privileges than regular javascript.

Step 3: 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.

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.

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.

  1. 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.

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

    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

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

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

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 fix a 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 Settings.
  2. At the bottom, click Advanced.
  3. Click Reset and clean up   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

  • Can you charge users for a Chrome extension?

    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 Chrome Store. You can use other platforms.

  • 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?