Technology

How to Create a Chrome Extension in 11 Steps

Planning to build your first Chrome extension? In this quick-start guide, you'll find instructions to create one in just 11 steps.

Introduction

A Chrome extension can be an independent product or a great addition to your SaaS web application. 

For example, these Chrome extensions — that every team has on their toolbar — are built by SaaS companies to create seamless product experiences:

Scribe is process documentation software for teams that value their time. Scribe offers a Chrome extension to enable professionals to record and document digital processes while they work. Install it for free to start sharing your knowledge effortlessly.

Yet you can also choose to build a Chrome extension as an alternative to a full-blown SaaS app. It’s a way to start off with a relatively small investment and build the necessary tech and business skills in the beginning.

Whatever the case may be, you’re stepping into the process of building your own extension and need guidance to get started. In this article, we’ve provided step-by-step instructions to assist you through the process.

What is a Chrome extension?

A Chrome extension is a software program that’s installed into Chrome to modify the browser’s functionality. It pops up (on demand) on the right side of the browser and has a minimal user interface (UI).

Oftentimes, a Chrome extension has only several buttons that enable the product’s functionality. Once the job is done, a user is redirected to a full-blown web application to see the results.

Users can find relevant extensions in Chrome’s web store.

5 Reasons to build a Chrome extension

Extensions enrich the user experience and increase productivity. Users love extensions. But it’s not the only reason to build a Chrome extension.

Low barrier to entry

For developers, creating a Chrome extension can be the first baby step into the startup world. You don’t need as much time, money, and skills to get started. You don’t even need a team of developers and designers to build your first Chrome extension.

Starting your own product with a Chrome extension gives you an opportunity to learn and practice the skills needed to build a fully-fledged product.

Quick to develop & release

Due to lower complexity, it takes less time to plan and build a Chrome extension. You can build it on your own and start monetizing it way faster than it would take you to start driving revenue with a full-fledged SaaS application.

Test product-market fit

If you have an idea for a comprehensive product, you can use a Chrome extension to see if you can find a product-market fit with a full-blown app.

When you start building your product, you assume what your customer's pain points are. With a Chrome extension, you can check whether your assumptions were right. If you can validate user interest in your extension, it’s a signal you can invest more time and money to create a more sophisticated solution. If not, you should consider revisiting your unique selling proposition (USP).

A way to market your product

Already have a product? Building a Chrome extension that complements your main product gives you just one more channel to promote your brand. 

First of all, the Chrome store is like the Amazon marketplace in the world of extensions — you can get traction by simply being listed there. Toggl’s extension gets around 40% of users right through a discovery in the Chrome store (without even being featured) and so can you.

Secondly, offering a Chrome extension in addition to your main product can become a significant competitive advantage. If your competitors don’t have any, you can stress it in your marketing messaging.

Fast access to your product functionality

A Chrome extension as an add-on makes your product more accessible and integrated with other systems, which is helpful for increasing user engagement and retention. 

The drawbacks of building a Chrome extension

Of course, building an extension isn’t all butterflies and daisies. There are also cons to developing a browser extension.

You depend on the Chrome store

When you build an independent app, you’re its legitimate owner. When you build a Chrome extension, you’re at Google’s mercy. 

Your code can be decrypted

A Chrome extension poses a genuinely high security risk. Your competitors can decrypt your code easily and replicate it to build their own products. Also, your extension may be subject to malicious activities. 

You don’t reach mobile users

If you want to reach desktop and mobile users alike, a Chrome extension isn’t the right choice for you. 

How to build a Chrome extension in 11 steps

Here’s your step-by-step guide to creating your first Chrome extension. Some of these steps are optional, so you should be ready to adjust the process based on your project needs.

Step 1: Define your extension functionality 

Before you start developing your extension, you need to decide what exactly it will do. You should focus on narrowly defined functionality so that the Chrome Web Store can easily categorize and promote your extension. 

Step 2: Read the documentation

Once you’ve decided what you want your extension to do, it’s time to read Google’s documentation for Chrome extension developers. Here you’ll find development basics, design guidelines, debugging instructions, and other information that will guide you through the process.

Step 3: Create a developer account

In order to create an extension, you’ll need to create a developer account. This is a Google account that is specifically used for Chrome extension development. This account will allow you to publish your extension to the Chrome Web Store. 

The process of creating a developer account.

Step 4: Create a project directory

Now you’re ready to start developing your extension. You’ll need to create a project directory to store all the files that will be a part of your extension. 

There are different ways to structure your project. However, you should always place your manifest file in the root directory (the top-most directory in a hierarchy). Here’s a suggested structure example by Google’s developers:

The manifest file structure.

You can also download the full source code example template by Google from GitHub.

Step 5: Create a manifest file

The manifest file is the most important part of your extension. It contains all the information that Chrome needs to know in order to install and run your extension. It includes the name and version of your extension, what permissions it needs, and what scripts it should run. 

Mind that V2 manifests are the earlier version of Chrome Extension manifests, while V3 manifests are the newer version. V3 manifests have more features and capabilities than V2 manifests. V2 manifests are deprecated, so you’ll need to define a V3 manifest.

Here’s how your manifest may look:

// manifest.json

{

  "manifest_version": 3,

  "name": "My Extension",

  "version": "1.0",

  "description": "My awesome Chrome extension!",

  "permissions": [

    "activeTab"

  ],

  "background": {

    "service_worker": "sw.js",

    "persistent": false

  },

  "browser_action": {

    "default_popup": "popup.html"

  },

 "content_scripts": [

   {

     "matches": ["https://*.your-website.com/*"],

     "css": ["my-styles.css"],

     "js": ["content-script.js"]

   }

 ],




}


Step 6: Load your unpacked extension into Chrome

Now that you have a directory and a manifest file, you’re ready to install your extension into Chrome. You can do this by navigating to chrome://extensions in your browser and then clicking the ‘Load Unpacked’ button. This will open a file browser, and you can select the directory you created for your extension. 

At this stage, you don’t publish your extension yet. You can upload your extension later, when the code is ready. But If you need to access the item ID to complete your item's code, then you should the unpacked extension now. 

The process of loading an unpacked extension.


Also, if you upload the extension before it’s ready, you have a chance to test it in each stage of the development process.

Step 7: Create a user interface (Popup)

When working on the extension’s user interface (UI), remember to keep it purposeful and minimal. You can create it using HTML, CSS, and JavaScript. The user interface should be stored in a file referenced in the manifest file and should be located in the same directory as your manifest file. 

You also need to create an icon that will represent your extension. You can provide icons in PNG, BMP, GIF, ICO, and JPEG format. SVG isn’t supported for any icons declared in the manifest.

Consider localizing your extension for audiences from different countries. You can use the I18n API to implement internationalization. 

Step 8: Create a background script (Service Worker) – Optional

Your extension may also need a background script, which is a code that runs in the background and doesn’t require any user interaction. This script can be used to perform tasks, such as making API calls or checking for changes in the page. The background script should be stored in a file referenced in the manifest file and should be located in the same directory as your manifest file. 

Step 9: Add content scripts – Optional

Content scripts are scripts that are injected into web pages. These scripts can access the document object model (DOM) of the page and interact with it. 

Content scripts can be used to add new features to existing websites, or to modify the behavior of existing features. If you want to add content scripts to your extension, you will need to add them to the manifest file. Like a background script, content scripts should be stored in the same directory as your manifest file.

Step 10: Package the extension

Once you’ve finished developing your extension, you’ll need to package it so that it’s ready to be uploaded to the Chrome Web Store. To do it, you’ll need to zip the directory containing your manifest file and all of your other files. Your manifest file should include at least the following fields:

  • "name": — this name will appear in the Chrome Web Store listing and in the browser.
  • "version": — the current version of your extension. 
  • "icons": — a field specifying the style of your item’s icons.
  • "description": — a brief description of your extension that will be displayed below your extension name and icon.

Your zip file may also include other files — its contents depend on the specifics of your software.

Step 11: Launch the extension

Finally, you can launch your extension. 

Start by uploading your packaged extension to the Chrome Web Store. Next, fill out additional listing information such as title, category, detailed description, language, etc. This information will determine your extension’s appearance in the listing.

When you've completed all the details, you can press the ‘Submit For Review’ button. Once your extension is reviewed and approved, it will be available for people to download and use. 

Chrome extension FAQs

Can I create my own Chrome extension?

Yes, you can create a Chrome extension on your own. 

How do I create my first Chrome extension?

The process of building a Chrome extension highly depends on the complexity of the software you want to create. But typically, you would take the following steps:

  1. Define your extension functionality.
  2. Read the documentation.
  3. Create a developer account.
  4. Create a project directory.
  5. Create a manifest file.
  6. Load your extension into Chrome.
  7. Create a user interface (Popup).
  8. Create a background script (Service Worker).
  9. Add content scripts.
  10. Package the extension.
  11. Launch the extension.

Is it free to publish a Chrome extension?

Not exactly. To publish items on the Chrome Web Store, you should create a developer account and pay a one-time $5 registration fee. 

How long does it take to get a Chrome extension approved?

Ninety percent of reviews are completed within three days, with the majority of submissions being reviewed in less than 24 hours.  

What language are Chrome extensions written in?

Similarly to web applications, Chrome extensions are built on web technology like HTML, CSS, and JavaScript.