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
scriptingAPI - 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.