Building a Chrome extension involves several key components. Here are the main ones:

Popup UI (web):

Think of it as a mini website running within the extension’s popup. The popup runs an HTML file, so you can use frameworks like React, Solid, and Vue to build the UI for the popup, and simply use index.html as the popup UI.

Content Scripts:

Simply put, these are JavaScript files that run on other people’s websites. Think of content scripts as JavaScript files that are included alongside the website’s own JavaScript files. Therefore, anything you can do with JavaScript files on your website, you can do with content scripts on other people’s webpages.

Background Script:

These are JavaScript files that run globally in the background, independent of any webpage being open. These scripts are usually used to display web push notifications, send and receive data to and from the server, and run code when a user installs or uninstalls the extension.

Manifest.json:

This is a JSON file that tells the browser details about the extension, the features it will be using, and links to the files that will be used as background scripts, content scripts, and for the popup UI.

We’ve written an article on how to build your first extension here. If you want to use a Node JS framework you can read the following articles.

Google Chrome Team has provided source code for example projects that you can clone and test for yourself here: https://github.com/GoogleChrome/chrome-extensions-samples/