With a Chrome extension you can expand the capabilities of your browser with all kinds of cool features. This article describes what parts an extension consists of and how you can create your own extension. An extension that you can use locally in your browser and upload to the chrome web store for others.
An extension consists of several files containing JSON, JavaScript, HTML and CSS. If you have a good foundation in Front-end Development, this means that you can easily start writing extensions.
Manifesto
The main file of your extension is the manifest.json, this is the starting point for your browser to interpret your extension. It shows, among other things, what your extension is called, which other files it uses and the manifest version. At the time of writing, the most recent manifest version is version 3. When you use version 3, your extension can use Service Workers, among other things.
To start with an extension, create a folder and place a manifest.json file in it.
// manifest.json{"name": "MyExtension","description": "MyExtension is amazing!","version": "1.0","manifest_version": 3}
Loading your extension
To test or use your extension locally in your browser, you need to do the following steps:
- Open your browser and go to chrome://extensions
- Turn on developer mode
- Click on the Load unpacked button
- Select your folder
- You've created your own extension!
- Add functionality
To make your extension actually do something, you can add different files. Content scripts are JavaScript files that access your browser tabs and execute logic there. Service Workers run in the background of your browser and can perform tasks such as influencing network requests or providing offline support. You also have the option to add different types of UI and an options page. The latter files are simply HTML files to which you can add JavaScript and CSS. The different files live in their own context and do not communicate directly with each other. If you still want to exchange data between, for example, your UI and your Service Worker, you can use Chrome message APIs for this.
Add a popup
To add a popup, create an HTML file in your folder. You must register this in your manifest.json so that your browser knows that this is a popup.
// manifest.json{..."action": {"default_popup": "popup.html"}}
There are a few things that are useful to know about a popup. For example, you cannot use inline JavaScript between script tags. If you want to add extra JavaScript to the popup, you must link to an external file. You can use inline CSS or you can load CSS via a stylesheet link.
Furthermore, it is important to understand that a popup has its own context. This is therefore not the same as that of your open browser tab. You can see this, for example, if you put logic in your popup that changes the background color of your document. Only the background color in the popup changes. You can influence your browser tab via a Content script.
<!-- popup.html --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="popup.css" /><title>MyExtension</title></head><body><div class="container"><button>Click me!</button><script src="popup.js"></script></div></body></html>
/* popup.css */.container {width: 100px;height: 100px;}
// popup.jsconst button = document.querySelector('button');button.addEventListener('click', () => {document.body.style.backgroundColor = ‘hotpink';});
If you refresh your extension, the content in your HTML file will be displayed when you click on your extension icon at the top right of your browser.
You can learn more about how to extend this simple extension with Content Scripts, Service Workers, and using the Chrome API in our Developers Guide. You can also check out my sample extension on my GitHub.