It is October, and the Chrome extension development 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.
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. The start of your first Chrome extension development project.
What is a Chrome extension?
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?
What is NPM?
What is Visual Studio Code?
Setup your first development environment
To create a Chrome extension you need to be on a computer such as Windows, or Mac. And install the following applications:
- Visual Studio Code
- Google Chrome
Download my starter template to get ready to build some Chrome extensions
- Open Terminal (on Mac) and Command Prompt (on Windows)
git clone, and then paste the URL you copied earlier.
git clone https://github.com/stefanvd/browser-extension-starter-template
Enterto create your local clone.
Now open that path in your Terminal or Command Prompt. And install dependencies in that folder location:
The template does not have many dependencies but it provides you with the necessary key point you need to get a helpful writing experience.
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.
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.
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.
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.
To learn more about the Chrome extension development and continue to discover new amazing extension features in your web browser: