New Chrome Extension Development Template with Manifest V3 Support for Beginner Developers

Chrome Extension Development Template with Manifest V3
Chrome Extension Development Template with Manifest V3
Chrome Extension Development Template with Manifest V3

It is October, and the month to build some great new browser extensions. Do you want to become a web developer extension? Here I cover how to get started with writing your first Chrome extension with the latest manifest version 3 in less than 10 minutes. That will add a blue rectangle on the top of the current web page when you click on the browser button.

One of the hardest things to do in technology is disrupt yourself.

Matt Mullenweg

I am the developer of the most popular Turn Off the Lights Chrome extension. And I have very passion for web and browser extensions. Thereby I want to help new beginner developer to follow my steps to build a high-quality and top Chrome extension for the Chrome Web Store. That is why this new modularized tutorial gives you steps to do this in a modern developer environment.


What is a Chrome extension?

A Chrome extension is an application that can be installed in your Chrome browser that enhances the functionality of the web browser. It is only built in modern web technology such as HTML, CSS, and JavaScript. You can create different kinds of experiences. The possibility is infinite from a simple Hello Word to an extension that can dim the web page and show you a realistic atmosphere glow effect around the video player.

Get your Developer environment ready

Building a Chrome extension must be simple and easy for the new developer. That with no bottleneck with how to get code working. Here is my tutorial on how to get started. With a ready-to-use template with no Angular or React, just simple and easy to understand for everyone.

This template work for all web browser such as Google Chrome, Firefox, Opera, Safari, Maxthon, Yandex, Brave, Vivaldi, Cốc Cốc, Microsoft Edge, and Naver Whale.

What is the Terminal (on Mac) and the Command Prompt (Windows)?

The Mac Terminal is a command line interface (CLI) for the macOS operating system (OS). That for want to initiate an action that is not supported by the operating system’s graphical user interface (GUI). In Windows that is the same interface and design and is called the Command Prompt.

What is Node.js?

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on a JavaScript Engine and executes JavaScript code outside a web browser, which was designed to build scalable network applications.

What is NPM?

The npm is a package manager for the JavaScript programming language maintained by npm. That is a command-line utility for interacting with a repository. For example, you can install repositories such as Angular, ESLint, jQuery, React, Vue, etc. And use it in your web project. If there is a new version that you need to use or there is a bug fixed, you can just update it very easily in your project with the command npm update. You do not need to download the files yourself and paste them into the web project.

What is Visual Studio Code?

It is the developer application where you write your code. That is for all files JSON, HTML, JavaScript, and CSS. The web browser is needed to see the rendering of your project.

Setup your first development environment

Step 1

To create a Chrome extension you need to be on a computer such as Windows, or Mac. And install the following applications:

  • Node.js
  • Visual Studio Code
  • Google Chrome

Step 2

Download my starter template to get ready to build some Chrome extensions

https://github.com/stefanvd/browser-extension-starter-template

  1. Open Terminal (on Mac) and Command Prompt (on Windows)
  2. Type git clone, and then paste the URL you copied earlier.
git clone https://github.com/stefanvd/browser-extension-starter-template
  1. Press Enter to create your local clone.

Step 3

Now open that path in your Terminal or Command Prompt. And install dependencies in that folder location:

npm install

The template does not have many dependencies but it provides you with the necessary key point you need to get a helpful writing experience.

Development

Chrome extension development template in Visual Studio Code.
Chrome extension development template in Visual Studio Code.

When you write vanilla JavaScript, ESLint in this Visual Studio Code project provides you the way to write consistency your code. ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. For example, if you use a single quote, and in other javascript files your use a double quote. The ESLint provides you with a way of writing clean code. Furthermore, it helps you with the correct alignment. Together, you write clean code that is the same on all JavaScript files.

Single quote problem that can be resolved with a click on the quick fix link.
Single quote problem that can be resolved with a click on the quick fix link.

Another handy one is pretty, which compresses the stylesheet in a one-liner. That will decrease the file usage of your stylesheet. When your press CMD + S (for Mac) or Ctrl + S (for Windows). It will do these tasks automatically for you.

How to load the Chrome extension in Google Chrome?

When your code is ready, then you can see the final result in your Google Chrome web browser. To load the extension, open the chrome://extensions page. And enable the Developer mode, which is needed to load your own local Chrome extensions file from your computer.

Developer mode switch that is visible on the top right of the Chrome://extensions web page.
Developer mode switch that is visible on the top right of the Chrome://extensions web page.

Next click on the button Load unpacked, and browse to the location of this development Chrome extension template. That is the folder /src/ where you see the manifest.json file inside. And click on the Select button to confirm it. Now you see the Starter Chrome extension in your Google Chrome web browser. That is with the latest Manifest V3 technology that has a service worker in the background. The benefit of a service worker is that it only works when you click and need the Chrome extension. So it saves you huge memory usage on your computer.

The added Starter Chrome extension in the Chrome://extensions web page.
The added Starter Chrome extension in the Chrome://extensions web page.

Then open any website such as www.google.be. And click on the puzzle piece icon, then search for Starter, and click right on the pin icon. Then the ‘S’ Chrome extension icon will be always visible in your Chrome toolbar.

When you click on the S icon, it will add the blue rectangle on the top left of the Google home page website.

Google home page with the blue rectangle that is added by the Chrome extension
Google home page with the blue rectangle that is added by the Chrome extension.

Publishing

When you are ready to package your Chrome extension, you can zip it with just one code line in your Terminal or Command Prompt window:

npm run dist

And at last, upload that zip file to the Chrome Web Store, and you are done. On the Chrome Web Store, it will convert the zip to a CRX file. The CRX meaning is Chromium Extension. That contains the zip content but with a header signature inside.

Addition resource

To learn more about the Chrome extension development and continue to discover new amazing extension features in your web browser:

Final remarks

In this article, you have learned the basics of Chrome extension development, which by how to set up your development environment. And the necessary plugins that help write your seamless and concisely JSON, HTML, JavaScript, and CSS code. Now you can develop and create amazing experiences in your web browser. That I hope you enjoyed reading this post. If you would like to support me, consider a small donation to my work.


2 thoughts on “New Chrome Extension Development Template with Manifest V3 Support for Beginner Developers

Comments are closed.