Rick Blyth Logo

The Ultimate Guide To Developing Chrome Extensions

In this guide, I will run you through everything you need to know at a high level in order to develop, test and release Chrome Extensions 🌐


I have developed several chrome extensions in my time, the biggest of which were Merch Wizard and KDP Wizard which were made for sellers on Amazon. By working hard on these extensions, I was able to quit my crappy day job and work on my apps full time! 🙌


Eventually, I sold and exited from these apps for a life-changing sum of money, making well over $500,000 in total from my Chrome Extensions! 💸


Now I'm passionate about helping other developers get started on their own Chrome Extensions 🚀


So without further ado, let's get started!

What Are Chrome Extensions?

Chrome Extensions are small add-ons that can modify and enhance the functionality of the Google Chrome web browser. They are written in HTML, CSS, and JavaScript, and they can do things such as enhance websites, block ads and automate tedious tasks. Chrome Extensions can do many different things, but they all have one thing in common: they make your life easier by adding features and functionality to the Chrome browser that you wouldn't otherwise have.


They are distributed through the Chrome Web Store and can be installed on any computer with the Chrome browser. When you install an extension, it will appear as a button or icon in the Chrome toolbar, and you can click on it to access its functionality.


They are generally created by developers who want to add new features to the browser or modify how existing features work. Chrome extensions are part of the browser extensions ecosystem, which includes extensions for other browsers such as Firefox, Safari, and Edge.

Examples Of Popular Chrome Extensions

Let's start with some ultra-popular chrome extensions you may have heard of:

  • AdBlock: This ad blocker is one of the most popular extensions available on the Chrome Web Store, with over 50 million users.
  • Amazon Assistant: This extension allows you to compare prices on Amazon and other eCommerce websites.
  • LastPass: This is a password manager that stores passwords in a secure database, making it easier to log in to websites.
  • Grammarly: This extension checks your grammar and spelling as you type and helps you to write more effectively.
  • Jungle Scout: This extension is a research tool for Amazon sellers that allows you to find profitable products to sell on Amazon.
  • Hola VPN: This extension is free VPN inside a chrome extension so users can mask their real IP addresses without needing a separate VPN.

Examples of Micro SaaS Chrome Extensions

And now for some chrome extensions that are popular in their own micro niches. Otherwise referred to as Micro SaaS apps, built by a solo developer or small team.

  • Closet Tools: This extension allows you to share and sell clothes, shoes, and other fashion items with other users on the Poshmark platform. This chrome extension is run by just one guy and has monthly recurring revenue of over $35k!
  • PrettyMerch: This is a chrome extension for Amazon Merch creators sellers that gives users pretty sales charts and notifications when they make a sale. This chrome extension has over 50,000 users some of which are on the Pro paid plan.
  • Merch Wizard: This is the chrome extension I developed for Merch By Amazon creators to be more efficient when managing their product portfolio. It earnt me multiple six figures in subscription income and even more when I sold and exited from the business. You can find out more about my story here.

What are the Benefits of Developing Chrome Extensions

Chrome extensions are an excellent way for software developers to reach a vast audience of users. In this section of the article, I'll outline some of the benefits of developing chrome extensions from a software developer's perspective.

Benefit #1 - Make Money From Chrome Extensions

First and foremost, developing chrome extensions can be significantly profitable work. If you can develop a popular extension, you can make money through subscription income, advertising and premium features.One of the great things about chrome extensions is that you build them once and then sell them to many people. This leveraging of your time alters your development time at the keyboard from active income to passive income. You can charge a one-off fee or, even better, charge a recurring monthly or annual subscription.


Benefit #2 - Improve Your Development Skills

Building Chrome extensions is a great way to improve your technical skills. It requires a reasonable understanding of HTML, CSS, and JavaScript but if you're able to successfully develop a chrome extension, it will definitely look good on your resume.You can also use chrome extensions as a way to learn new development frameworks and libraries. For example, you can build a chrome extension using a framework such as React, Vue or Angular to become more familiar with it. My extensions were built using Angular JS, mainly because I had experience in it and prioritized faster delivery than experimenting with new frameworks.


Benefit #3 - Ability To Reach A Huge Audience

As of June 2021, there were 3.6 million apps in the Apple App Store which has an audience of around 1 billion users.When it comes to Chrome, the contrast is striking. The audience is enormous at 3.2 billion users but critically there are only 200,000 Chrome extensions in the chrome store 🤯

Therefore, the chrome web store offers a much greater opportunity than the iPhone app store because there are far fewer apps per user. If you can create a decent chrome extension, you'll have a far higher chance of standing out in the chrome web store than you do in Apple's App Store.


Benefit #4 - Portability To Other Browser's Stores

When you develop a chrome extension, you're not just restricted to the Chrome Web Store. You can also submit your extension to other browser's stores such as Opera, Edge & Mozilla.


While the number of users on these other browsers is significantly lower than Chrome, it's still an option worth considering. In my case, I decided not to submit my extensions to any other browser's stores because my users were generally all on chrome anyway.

That said, thanks to the browser extension standardization efforts of the W3C, it's now possible to write a single extension that can be installed on all major browsers with just a few minor changes.


Benefit #5 - Low Running Costs

Another great benefit of developing chrome extensions is that they run locally client-side, meaning there's very little server maintenance and costs to worry about. This is in contrast to apps which require a backend server to function.

While this doesn't mean that developing chrome extensions is cheap or free, it does mean that the costs are significantly lower than developing apps.In my chrome extensions, I hosted the user's data within their own private Airtable base which was on the free tier 99% of the time.


Thus, the monthly server costs were negligible compared to the cost of provisioning and maintaining multiple backend servers.

How I Made Money From My Chrome Extensions

In my case, I decided to sell my chrome extensions via a SaaS monthly recurring subscription plan with an annual membership option too (2 months free). I've also offered my chrome extensions as one-time lifetime purchases ranging from $9.99 to $699 (yes, you read that correctly, people have paid $699 for a chrome extension!).

That said, the lump sum payment I received when I sold and exited from my chrome extensions overshadowed all of my subscription income. It was multiple six-figures and life-changing for my family and me.


The great thing about selling chrome extensions on the chrome store is that there is no limit to how much money you can make. The more popular your extension becomes, the more money you will make. And since there are billions of Chrome users, there is a lot of potential for making sales.

Other Methods Of Making Money Creating Chrome Extensions

You can also use a few alternative methods to monetize chrome extensions. Your chosen method will depend on your goals for the extension and your target market but you can make money from chrome extensions by:


Developing Chrome Extensions for Others

One way to make money with chrome extensions is to develop them for others. There is a considerable demand for chrome extensions, and many people are willing to pay good money for quality extensions.


If you have the development skills necessary to create chrome extensions, there is no reason why you can't start making money by developing them for others.


Add Advertisements to Your Chrome Extension

If you don't want to sell your extension outright, you can also add advertisements to it and make money that way. This strategy works best if your extension is popular and gets a lot of downloads. You can simply add ad banners or links to your extension and earn money every time someone clicks on them.


Create Chrome Extensions for Brands and Businesses

Another great opportunity for chrome extension developers is to create custom extensions for brands and businesses. Many businesses are looking for ways to improve their online presence, and chrome extensions can be a great way to do that.

Generating Chrome Extension Ideas

Whilst it's relatively straightforward to cobble together a basic Chrome Extension, actually generating ideas for useful Chrome Extensions can be a real challenge.


Here are some tips and techniques to help you get started:


1. Look at what's popular on the Chrome Web Store and try to reverse engineer why they're so successful. What features do they have that users want? How did they market their Extension effectively? What design elements does it use that make it easy to use?


2. Consider what problems you regularly encounter when using the web, and think about how Chrome Extensions could help solve these issues. Are there particular websites or online services that are causing headaches for you or your friends and family? Could a simple extension help with this?


3. Get creative! Don't limit yourself to purely utilitarian ideas - think about how Chrome Extensions can help improve your life unexpected and enjoyable ways. Do you struggle with your to-do list? Maybe a productivity extension could be the solution! Have you always wanted a way to quickly view upcoming events on your calendar? A Chrome Extension could provide this feature.


4. Look at different platforms and services that could benefit from Chrome Extensions. For example, are there any apps or games do you play through your web browser that could be enhanced via a Chrome Extension?


5. Don't be afraid to experiment! The beauty of Chrome Extensions is that they're quick to build, so don't be afraid to try out different ideas and see what works. If an idea doesn't seem to be panning out, keep experimenting - you may hit on something great in the process!


If you want some further inspiration, then take a look at my page on 9 Chrome Extension Ideas you could build or download my list of 23 Chrome Extension Ideas below!

If you're liking these ideas then you'll want to download my free PDF containing 23 Chrome Extension ideas to inspire you to develop your own Chrome Extensions.

How To Develop a Chrome Extension

Making a simple chrome extension is not as difficult as you might think. In fact, with a little bit of HTML, CSS and Javascript knowledge you can have your own chrome extension up and running in no time.


In the sections below, I will give you an overview of the core concepts of chrome extension development. I'll discuss how to set up your development environment, add the required files, the different scripts and how to debug, test and release your chrome extension.

Setting Up Your Development Environment

If you want to develop Chrome extensions, you'll need a development environment. This is a place where you can write code, test it and publish it. There are a number of different development environments that you could use, but I'm going to focus on two of the most popular ones: Visual Studio Code and Rider.


Visual Studio Code is a free, open-source development environment that was created by Microsoft. It's popular among developers because it's lightweight and easy to use, and it has a massive library of extensions that you can use to add features and functionality.


Rider is a paid development environment from JetBrains, and it's popular among .NET developers. It has all the features you would expect from a professional development environment and support for debugging chrome extensions. Both of these environments are great for developing chrome extensions, so choose the one that best suits your needs.


Personally, I use Visual Studio Code, but any decent editor will do the job.

Create a Folder For Your Extension

To build your extension, you'll need a separate folder to store everything needed to run your chrome extension. This folder can be called anything you want, but generally will be the name of the extension.


The first thing you need to do is create a file named manifest.json in your extension's folder. This file is required for every chrome extension and contains important information about your extension such as its name, version, description, permissions, and so on.

Creating An Extension Manifest

Now that your development environment is set up, let's start creating our extension! The first thing we need to do is create an extension manifest file.The manifest.json file is written in JSON (JavaScript Object Notation) and contains a lot of information about your chrome extension.


There are lots of properties but I'll just cover the main ones below:

Name - The name property is the name of your chrome extension. This is what will be displayed in the Chrome extensions list, so make sure it's something catchy and memorable.


Description - The description property is a brief summary of your chrome extension. Users will see this when they browse the Chrome Web Store, so make sure it's informative and interesting.


Version - The version property specifies the version number of your chrome extension. This is used to track changes to your extension and is required for publishing extensions to the Chrome Web Store.


Publisher - The publisher property is used to specify the publisher name for your chrome extension. This can be anything you want, but it's generally a good idea to use your name or company name.


Icons - The icons property allows you to specify a set of icons for your chrome extension. These icons will be displayed in various places such as the Chrome Web Store and in the Extensions tab. The icons are specified as a set of URLs, one for each icon size that you want to use.


Content Scripts -The content_scripts property is used to specify JavaScript files that should be injected into web pages. This is how chrome extensions add functionality to web pages, and we'll be using this property later on in this article.


Background Scripts - What used to be the background_scripts property is now the service_worker property and is used to specify JavaScript files that should be run in the background. These scripts are usually used for tasks such as monitoring web pages or interacting with chrome's API.


Permissions - The permissions property is used to specify the permissions that your chrome extension requests from the user. You want to ask for the bare minimum to avoid putting users off from installing your app.


There are other properties that you can include in your manifest file, but these are the most important ones. For a complete list of all available properties, check out the official chrome extension documentation.

Adding Functionality to your Chrome Extension

Now that we've defined our manifest file, it's time to start adding some functionality to our chrome extension.


Creating the HTML & CSS

The first step for creating scripts is to develop an initial user interface using HTML and CSS. You might want to use CSS libraries like Tailwind or Bootstrap to save time.


Creating the JavaScript

To enhance the user interface, you'll need to write some JavaScript code to add functionality to your extension. This code will interact with the chrome extension API to access data and perform actions.


The chrome extension messaging layout and API is extensive, and it would be impossible to cover everything in this guide. However, here are a few of the key components:


Background Scripts

These are the scripts that run in the background and perform long-running tasks such as fetching data from an external API or storing data in chrome's local storage.


Content Scripts

Content scripts are injected into web pages that you visit, and they have access to the DOM of those pages. They can be used to modify the content of the page, or to interact with chrome extension APIs.


Popup Scripts

Popup scripts are used to create the HTML & CSS for chrome extension popups. These are small windows that open when you click on the chrome extension icon. Popup scripts have access to chrome extension APIs and can also communicate with background scripts.


Options Scripts

Options scripts are used to create the HTML & CSS for chrome extension options pages. These are larger windows that open when you click on the chrome extension icon, and they're generally used to configure extension settings. Options scripts have access to chrome extension APIs and can also communicate with background scripts.


Event Pages

Event pages are background scripts that only run when needed. They're used to perform lightweight tasks such as monitoring chrome extension API events or responding to user interaction in the chrome extension popup.

Debugging your Chrome Extension

In this section, we'll look at some of the tools and techniques you can use to debug your chrome extension.


When things go wrong with your chrome extension, you should first check the console for errors in the Console Panel in Developer Tools. This is where Chrome logs all of the errors that occur while your extension is running.


To open the Console Panel, press CTRL+SHIFT+J on Windows or CMD+OPTION+J on Mac. The Console Panel is split into two sections - the top section contains information about the page that is currently open, while the bottom section contains the console log. The console log is where Chrome logs all of the errors that occur while your extension is running. You can also filter the console log by type - just click on one of the buttons in the toolbar at the top of the panel. The filters are errors, warnings, messages, and chromeLogs.


You can use the chrome developer tools to debug your chrome extension. The debugger is located in the Console Panel, and you can access it by clicking on the arrow next to the console log. The debugger looks like this:

As you can see, the debugger consists of two sections - the source code section and the console area.


The source code section shows the current line of code that is being executed, while the console area displays all of the errors and messages that occur during debugging.To start debugging your chrome extension, click on the "Step Over" button in the toolbar.


This will execute one line of code and then stop again. You can also use the "Step In" and "Step Out" buttons to control how deep you want to debug into your code.Another helpful feature of the debugger is the ability to set breakpoints.


A breakpoint is a point in your code where the debugger will pause execution so that you can examine the state of your extension. To set a breakpoint, just click on the line number in the source code section. The debugger will then turn red, and execution will pause when it reaches that line.

Source Control For Your Chrome Extension

When you're developing chrome extensions, you should use source control to track changes and revert back if needed. I recommend using Git for this, but any source control system will do the job.


To set up Git for your chrome extension, create a new repository in your development environment and add all of the files in your extension's folder. Once you've done this, you can commit your changes and push them to the remote repository.

Personally, I use GitHub or BitBucket for my chrome extension repositories, but any Git hosting service will work fine.

Testing Your Chrome Extension

It's essential to test your chrome extension before you release it to the public. As a minimum, I suggest finding several beta testers who can help you test your extension. Once you've found some beta testers, give them access to an unlisted version of your chrome extension so they can install it.

When testing your chrome extension, also remember that it's crucial to test it on multiple operating systems and several chromium compatible browsers.


For example, from my own chrome extensions, I discovered a few differences in the way how chrome extensions work on Linux vs Windows, specifically around case sensitivity in file paths. As such, it's definitely well worth testing your chrome extension on multiple platforms.



How to Publish Your Chrome Extension to the Chrome Web Store

Firstly, you need to register for a chrome web store developer account. It costs a mere 5 USD to register, but this one-time fee allows you to publish up to 20 extensions 🙌


Then you simply need to upload your extension files as a single zipped folder to the developer dashboard and complete all the relevant information on the listing. You'll need to fill in details such as description and summary, upload promotional materials (promo tiles, logo icon, demo video etc.), and justify user permissions you request within the extension.

Then you simply click on "Submit" to send the extension to Google for their review and approval.

Tips On Marketing Your Chrome Extension

Now that you've published your chrome extension, it's time to start marketing it! Here are a few tips:


- Use social media to get the word out. Twitter, Facebook, LinkedIn and YouTube are all great places to start.

- Create a website for your extension and utilise it to showcase screenshots, videos and testimonials.

- Write blog posts about your extension to bring in relevant organic traffic from potential users via search engines.

- Reach out to bloggers and journalists who write about chrome extensions and see if they're interested in writing a review of your extension.


With a little bit of effort, you should be able to get your chrome extension in front of a decent number of potential users.

The Future Of Chrome Extensions

Simply put, the future of developing chrome extensions is looking bright! With the release of chrome extension manifest version 3, extension's capabilities are becoming more and more powerful and versatile.

Here are a few things to look forward to:


1. Native Extensions

Chrome extension version 3 includes support for native extensions, which means that we can now interact with native desktop applications (such as Slack, Spotify, Office etc). This opens up a whole world of possibilities for chrome extension development, and we can expect to see some amazing extensions in the future.


2. More powerful APIs

The chrome extension SDK has also been enhanced with new APIs that allow us to do more with our extensions. We can now access some of chrome's underlying functionality, enabling us to create much more sophisticated extensions.


3. Improved security

One of the main concerns around chrome extensions has always been security. With manifest version 3, Google has introduced a number of improvements that make chrome extensions more secure.


So what does this all mean for chrome extension developers? It means that we have even more power, flexibility and security than ever before, and we can expect to develop some amazing extensions in the near future!

Kickstart Your Chrome Extension Development

I've been asked by several people on the best way to get started developing chrome extensions. I know it can be a bit overwhelming and daunting, as it's easy to make plenty of mistakes and to even get your extension suspended or removed from the chrome store as a result 😱


So, in this article, I've given you a crash course in chrome extension development but to truly accelerate your learning, I'm putting together a step-by-step course on developing Chrome Extensions. This course will teach you everything you need to know about chrome extension development, straight from myself who has been successfully developing chrome extensions for over 5 years.


In the course you will be learning:

  • How to Find Opportunities to build cash-flowing chrome extensions.
  • How to technically Build, Debug, Test and Release Chrome Extensions.
  • How to Monetise your chrome extension.
  • How to Scale Up your chrome extension.
  • How to Engineer a Successful Cash Exit from your chrome extension.
  • Best Practices & Tips From My Years In The Trenches As A Chrome Extension Developer.

As a result, it is the best and most complete Chrome Extension Development course on the internet.


Find out more on the dedicated course information page

Cashflowing Chrome Extensions

Download this entire article as a PDF for free so you can read it where you want, when you want.

Chrome Extension Development FAQs

Here are the answers to some commonly asked questions relating to Chrome Extension Development:

Is It Easy To Make a Chrome Extension?

Yes and no. It's easy to get started, but there is a lot to learn if you want to create sophisticated extensions. You can create a simple chrome extension in under 10 minutes, but a more sophisticated one can take 10 weeks or even 10 months as it's continually enhanced.


However, to get started you only need to have basic knowledge of HTML, CSS, JavaScript and an understanding of the APIs that Chrome offers.


Do Chrome Extensions Make Money?

Whilst some extensions are free, most offer a paid version with premium features or they are monetized in other ways such as adding advertisements or affiliate links to the chrome extension.


What is a Content Script In a Chrome Extension?

A content script is a JavaScript file that runs in the context of a web page. That means that it has access to the DOM of the page, and you can use it to manipulate the contents of that page. Content scripts are used to add functionality to a web page or to interact with the user. For example, you could use a content script to add an extra button to a page, or to display a notification when the user clicks on a certain element.


What Language Are Chrome Extensions Written?

Chrome Extensions are written in web technologies including HTML, CSS, JavaScript, and jQuery. Some extensions also use extra libraries such as React or Angular. Additionally, commonly used CSS frameworks like Tailwind or Bootstrap can be helpful too.


Are Chrome Extensions Actually Browser Extensions?

Chrome extensions are a subset of browser extensions. While all chrome extensions are browser extensions, not all browser extensions are chrome extensions. This is because chrome extensions are specifically designed to work with the Chrome web browser, while other browsers such as Firefox and Edge have their own extension stores and APIs. Chrome extensions can usually be ported to work with Firefox and Chromium-based browsers' extension API (like Edge, Opera & Vivaldi) with just a few minor adjustments.


Should Your Port Your Chrome Extension To Firefox & Edge?

If you've developed a chrome extension that's doing well, you might be wondering if you should port it to other browsers such as Firefox or Edge. The answer to this question depends on a few factors. If your chrome extension is doing well and it has a loyal user base, then it might not make sense to port it to another browser.


However, if your chrome extension is struggling to find users, then porting it to another browser might be a good way to get more exposure.


How Long Does It Take For a Chrome Extension To Be Reviewed?

The first time you create a listing for your chrome extension and upload the zip file, it will likely take a few days for Google to review it. Depending on the size and complexity of the code base, how many permissions you're requesting and what you've entered in the extension's details page it can take even longer for that first approval.


Then dependent on the scale of subsequent updates, you will likely to be looking at anything from a few hours to a few days.


How Do I Publish a Private Chrome Extension?

If you want to publish your chrome extension privately, you'll need to create a chrome web store account and register as a developer. Once you're registered as a developer, you can create your extension and publish it to the chrome store. Once your extension is published, you can set its visibility to "private" in the chrome web store.


This will prevent it from being listed in the chrome web store's search results and will only be visible to users with whom you share the link with.


Is It Free To Publish a Chrome Extension?

When you're ready to publish your chrome extension, you'll need to create a chrome web store account and register as a developer. The registration process costs $5, but you can publish up to 20 extensions for free once you're registered. It doesn't cost anything to update your extensions so basically, it's just a one-off registration fee of $5.


This is an absolute bargain in my eyes, as Google could easily charge a monthly fee to earn more income from the Chrome Extension ecosystem. Having earnt multiple six-figures from Chrome Extensions myself, the $5 registration fee is a tiny price to pay to gain access to over 3 billion Chrome users!


What is a Chrome Extension ID?

A chrome extension ID is a unique identifier that is assigned to your chrome extension when it is first installed. This ID is used by chrome to keep track of your extension and its data. You can find your chrome extension's ID by going to chrome://extensions/ and looking under the "Extensions" tab. Once published on the store, your chrome extension ID remains the same throughout the lifetime of the extension, regardless of how many updates you make.


What Are Chrome Extension Permissions?

Chrome extension permissions are the set of permissions that you grant to a chrome extension when you install it. These permissions allow the extension to access certain data and perform certain actions in your browser. Some examples of chrome extensions permissions include: - Read and change your browsing history - Read and change your chrome extension settings - Read and change your bookmarks - Access your tabs and browsing activity

About the Author

Hi, my name is Rick and I help unfulfilled software developers quit their 9-5 jobs, with minimal risk by creating their own cash-flowing Micro SaaS businesses.


I have been on the journey myself, starting as a nobody; finding a niche; establishing credibility; building up multiple Micro SaaS apps to the point that I could quit my (well paid) Technical Director job and work on my apps full time.


I then scaled the apps up and eventually sold and exited them for a life changing amount of money. You can read my full story on my about page.


I am passionate about sharing the knowledge I’ve gained from this journey, welcome to my site 👋

Related Articles

The Micro SaaS Handbook

The Micro SaaS hub containing all the links to the individual Micro SaaS chapters you'll need to go from zero to hero.


You can download all my Micro SaaS articles in a free ebook PDF so you can read it anywhere, any time.







Micro SaaS Handbook

Cashflowing Chrome Extensions Course

I have developed several chrome extensions over several years, the biggest of which were Merch Wizard and KDP Wizard, which made me over $500,000.




Now I'm rolling up all my knowledge on developing successful Chrome Extensions into a comprehensive course so you can build your own cashflowing Chrome Extensions too 🚀


Cashflowing Chrome Extensions

9 Chrome Extension Ideas

Here's a list of Chrome Extension ideas that you could use as inspiration when coming up with your own. I have selected various niches for these examples so that you would have plenty of options to choose from.


Some of them may exist, some may be technically challenging but hey, they're just ideas at this point so I'd recommend you put your own spin on them rather than sticking to the exact same format.


Chrome Extension Ideas