Have you ever wondered how to create extension for chrome? Is it easy? I recently created my first version of the chrome extension myself. It’s called Catify, and it can replace every image on your page with cat-like images.
This is also my first time trying to build a chrome extension and it’s very interesting. Would you like to create a Chrome extension like that? I will show you how to build a chrome extension.
Table of Contents
What do we do?
I think you probably already have a lot of ideas in mind for building your first extension, we need to take a look at the basics at the beginning. For the sake of convenience, let’s take a look at one of Google’s basic examples, the page redder, and add some spice to it. We create an extension that turns the background color of the page to any color every time you click the extension icon.
Step 1: Create manifest.json file
Make sure you have a power control set up and let your favorite editor point to the correct position. Let’s start by creating the manifest, which tells Chrome everything it needs about your extension. Things like names and icons also need permission and confirm where it’s coded. Let’s create a file called manifest.json and fill it like this:
{
"name": "Make it rain(bow)",
"description": "Embrace the inner unicorn and reflect on the page background.",
"version": "0.0.1",
"manifest_version": 2
}So what do we see here? The first is the name. This is how the widget will appear in the store, in the widget overview, and unless otherwise stated what you see when you hover your mouse over the icon in the browser. Then there’s the description, this is just a title, a description to display in the store, and an overview of the widget. Next is the version of the utility.
Change the title when hovering over the icon
By default shows the name of the add-on, but it is not necessarily the same. Let’s change it! Add the following commands to the root of manifest.json as follows:
"browser_action": {
"default_title": "Unleash the unicorn dust!"
},Now when the user mouse over the icon, it will display the words “Unleash the unicorn dust!”
Permissions and Script
Before we can actually code our add-ons, we should add two more things to the manifest. First, we need to define the necessary permissions. In case we don’t only need 1 permission, then access the current tab. Let’s define this. Add the following commands to the root of manifest.json
"permissions": [
"activeTab"
],Next, we need a few scripts to run. We will do this in the background script, which is also what we need to define in manifest.json. Add root as follows:
"background": {
"scripts": ["background.js"],
"persistent": false
},We’ll define the logic in a file called background.js. Besides, it won’t last long, you should only maintain it persistently if the extension uses chrome.webRequest API to block or modify network requests. Time to build real logic!
Step 2: Change the background color
Since we told Chrome that the logic is located in background.js, use this file and build the logic.
chrome.browserAction.onClicked.addListener(function(tab) {
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'violet'];
const colorPicker = () => {
const randomIndex = Math.floor(Math.random() * colors.length);
return colors[randomIndex];
}
chrome.tabs.executeScript({
code: 'document.body.style.backgroundColor="' + colorPicker() + '"',
});
});
});Take a look at the lines of code. The first line indicates that we have added a listener to the browserAction’s onClick. What? BrowserAction is a button you will see in Chrome when you add an add-on, onClick happens when you click on that button and adds a Listener, which means it only activates when you click it. So this method is executed when you click the button inside Chrome.
The code itself has escaped. We have a color list, a method of picking a random color from that list, and executing the script to change the background color. We do this by executing a javascript snippet inside the browser tab that renders in the actual page.
Step 3: Add icon
Before trying out the add-on, we should make it a little nicer. We will define an icon that is displayed on top of the browser for our widget. Start by creating any 128 × 128 shapes you want. Now you will save this image in some of the following formats:
To add these images let’s make some changes to the manifest.json as shown below, adding to the browser_action section:
"default_icon": "icon16.png"We only need to specify 16 × 16 here, because the icon is always 16 × 16 on all devices. And add this part to root:
"icons": {
"16": "icon16.png",
"32": "icon32.png",
"48": "icon48.png",
"128": "icon128.png"
},These are icons that are usable from your applications and available in sizes on request.
Let’s try!
Are you excited? Sure, because we will prepare to test our add-ons on the browser. Launch your browser and open your add-on by clicking the menu button and choosing More Tools -> Extensions. The first thing you do is enable Developer mode.
You should now see the first three buttons on the left side of the page. Allows you to download the unzipped utility, compress the utility, or force the update. Click the first button to upload the extracted utility.
Now go to the folder where you created the utility and click Select folder. Your add-on will be installed immediately, great! Once it’s installed, you’ll see it on your add-ons page at the top of your browser.
Now try it open! Open a new tab, go to dev.to and click on the rainbow icon. Then press it, again and again, to see the rainbow appear.
It’s work!
