Did you know you can improve your (and your colleagues’) life by developing chrome extensions? Keren Kenzi showed how to do it in Fullstack Exchange 2022
In Fullstack Exchange 2022, Keren Kenzi gave an excellent talk about a chrome extension she built. What I like in Kenzi’s talk is that it doesn’t really matter what the extension is doing – what matters is that in less than fifteen minutes, Keren live-coded a fully working chrome extension.
I love demos like these. You can take this demo, and because getting something up and running is so fast, you can start playing with it.
Table of Contents
What are the Steps Needed to Build a Chrome Extension?
Create a Folder and Git Project
That’s easy… I’ll create a folder and call it – the-best-extension:
`mkdir the-best-extension && cd the-best-extension && git init`
The Chrome Extension manifest.json
File
The first file in a chrome extension is the manifest.json
file. Let’s create this file with the following content:
{
"name": "The Best Extension",
"version": "0.1",
"manifest_version": 3
}
The name
field is quite self explanatory.
The version
field states the version of the extension. This way, chrome will know when to update the extension for users when you update your extension’s code.
The manifest_version
states how chrome should parse the file. We will focus on version 3 – the latest version at the time of writing this post.
And… that’s kind of it. We created an extension š
How to Run Your Extension Locally
Browse to the extension manager in chrome:
chrome://extensions/
If you are using the Brave brave browser, just replace chrome
with brave
:
brave://extensions/
(You can copy the relevant URL to your browser)
On this page, you have a switch to activate Developer mode at the top right of the screen. Activate it.

You will have several new options to manage your extensions when you do that. We will now use the Load unpacked
button.

When you click the Load unpacked
button, you will be prompted to browse for the extension’s folder. Once you select the folder, if the manifest.json
is correct, you should see the extension in the list of extensions:

How to Set Chrome Extension Icons?
Our extension, despite being the best, is rather boring. If I stick it to the extensions list on the toolbar:

But that’s rather boring. We want to add our own icon. Keren shows us how to do it in her video. We should add an image to our repository and add a reference to it from our manifest.json
:
{
"name": "The Best Extension",
"version": "0.1",
"manifest_version": 3,
"action": {
"default_icon": "coffee_mug.png"
},
"icons": {
"128": "coffee_mug.png"
}
}
Two things were added to the manifest
file:
action.default_icon
– this changes the icon in the tool bar.
icons.128
– this changes the icon in the extensions manager.

You can add more icon sizes for various screen resolutions. You can read more about it here.
How to Add a Description to a Chrome Extension?
Extensions also have descriptions in the extension manager:

In order to add a description we will add the description
property to our manifest.json
file:
{
"name": "The Best Extension",
"version": "0.1",
"manifest_version": 3,
"action": {
"default_icon": "coffee_mug.png"
},
"icons": {
"128": "coffee_mug.png"
},
"description": "This is the best extension! Ever!"
}
The description property accepts a string that will be displayed in our extension:

How to Add a Popup to a Chrome Extension?
Our extension sure looks awesome – but it does nothing… we’d like to create some friendly UI for its control screen like other extensions have:
The first thing to do is to create an HTML
file. Let’s create the popup.html
file with the following content:
<html>
<head>
<link rel="stylesheet" href="vivid/styles/themes/light.css"/>
<link rel="stylesheet" href="vivid/styles/fonts/spezia.css"/>
<script src="vivid/index.js" type="module"></script>
<style>
body {
width: 250px;
height: 125px;
text-align: center;
}
vwc-textfield {
text-align: left;
}
</style>
</head>
<body>
<vwc-layout column-basis="block">
<vwc-text-field max-length="4" appearance="filled" label="name"></vwc-text-field>
<vwc-button appearance="filled" label="Submit"></vwc-button>
</vwc-layout>
</body>
</html>
In this file, I import our UI components library vivid
(I copied it to our folder after installing it using npm i @vonage/vivid@next
). The great thing about vivid
is that it is a web components library – so it adds custom DOM elements without needing a framework like React, Angular, or Vue.
I also set some styles to the page and then in the body add the HTML of a text-field and a button.
Now we need to set our popup in the manifest.json
:
{
"name": "The Best Extension",
"version": "0.1",
"manifest_version": 3,
"action": {
"default_icon": "coffee_mug.png",
"default_popup": "popup.html"
},
"icons": {
"128": "coffee_mug.png"
},
"description": "This is the best extension! Ever!"
}
Notice the default_popup
that was added to the action
property.
It now looks like this:

Use the Chrome API to Change the Extension’s Badge
We can add and change the extension’s icon badge using the extensions API. We already know how to add JavaScript to the popup (using a simple script
tag). Let’s add a new JavaScript file popup.js
:
const button = document.querySelector('vwc-button');
const textField = document.querySelector('vwc-text-field');
button.addEventListener('click', () => {
const textValue = textField.value ? textField.value : 'NONE';
chrome.action.setBadgeText({
text: textValue.toUpperCase()
});
chrome.action.setBadgeBackgroundColor({
color: 'green'
});
});
This script works as follows:
- Get handles to the button and the text-field.
- Set an event listener on the button click
- On click
- get the value from the text field or set the default “NONE”
- Set the badge text to
textValue
- Change the badge background to green
Note that the badge text is limited to 4 characters. We’ve set the max-length
property of the text-field
to 4 so that users will not enter more than four characters (if there are more, only the first four will be shown in the badge).
In order to use the file, we will add the following line before the closing </body>
of our popup.html
file:
<script src="popup.js"></script>
Now the badge will show when we click on the submit button:

Where to go from here?
We now have our extension with its popup and changing badge. That’s awesome!
But extensions can do so much more. Here are some useful examples:
- You can inject scripts to a page or a frame inside a page using the
scripting
API - You can create alarms(timers) that will trigger listeners in service workers (watch Keren’s talk to see her live example)
- Add options to the chrome context menu
And so much more. I urge you to watch Keren’s talk for a great live explanation.
Summary
Creating a chrome extension is easy and can be fun. If you have an idea that can better your or some else’s life – just do it.
If you are interested in some inspiration and haven’t already, watch Keren’s talk now.
If you want to browse the extensions’ docs, click here.
If you build anything nice – I’d love to see it.