How to make your first Chrome extension in 4 Steps.

What we are going to build.

In this tutorial I am going to show you how to create a Chrome extension that tints images on our web page in 4 steps — no joke! So we can specify min width and min height for image to tint, also we can specify opacity for tinting image. So, after clicking a “Tint” button all images on the website should be tinted. So let’s start.

What is a Chrome extension?

Before we get started building our extension, it’s probably a good idea to have a basic understanding of what a Chrome extension is and how Chrome extensions work.

At a very basic level, a Chrome extension is just some HTML, CSS and JavaScript that allows you to add some functionality to Chrome through some of the JavaScript APIs Chrome exposes. An extension is basically just a web page that is hosted within Chrome and can access some additional APIs.

In this tutorial, I’m going to show you how to create a Chrome extension called a Browser Actionextension. This kind of extension puts a button in the Chrome toolbar that will show an HTML page when clicked and optionally execute some JavaScript.

Chrome extensions can also be created to work only on certain pages through the use of Page Actions, they can run code in the background using Background Pages, and they can even modify an existing page loaded in the browser using Content Scripts. But for this tutorial we are going to keep things simple.

If you are interested in learning more about Chrome extensions in general, check out Chrome’s extensions documentation.

Step 1: Create the project

At first we need to create the project and all the files we need for our extension. Let’s start by creating a new directory that we will call “Tinter.” We’ll put all the files we need for our extension in this new folder. Chrome allows us to load up a plugin by pointing it at a folder that contains the extension files.

All Chrome extensions require a manifest file. The Manifest file tells Chrome everything it needs to know to properly load up the extension in Chrome. So we’ll create a manifest.json file and put it into the folder we created.

Next we’ll need an icon for our extension. This just any simple PNG file you like. You can take it there.

Next we’ll need an HTML page to show when a user clicks our Browser Action, so we’ll create a popup.html file and a popup.js file in our “Tinter” directory.

Step 2: Modify manifest.json file

Now we have our basic project structure, we need to add the code to our manifest file to describe our extension to Chrome.

Open the manifest.json file and enter the following code:

{
"manifest_version": 2,
"name": "Images tinter",
"description": "This extension will tint images on web page",
"version": "1.0",

"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}

So i think most of lines in code are self explonatory, so i will not waste our time explaining them. But look on line with the browser_action section where we specify what the default icon is and what HTML page should be displayed when the Browser Action button is clicked.

Also I’ve added “permissions” section that specifies that we need to have permission to access the activeTab.

Step 3: Modify popup.html file

The next step is to create UI for out “Tinter” extesion.

So it is going to have 3 input fields, some text and button.

Open the popup.html file and enter the following code:

<!doctype html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<script src="popup.js"></script>
</head>
<body bgcolor="#1EBFEB">
<h1 style="text-align:center; color:#656F72">Tinter setup</h1>
<fieldset class="fieldset">
<label class="lbl">Width</label>
<input type="text" class="form-control" id="width" placeholder="Width" value="50">
</fieldset>
<fieldset class="fieldset">
<label class="lbl">Heght</label>
<input type="text" class="form-control" id="height" placeholder="Height" value="50">
</fieldset>
<fieldset class="fieldset">
<label class="lbl">Opacity</label>
<input type="text" class="form-control" id="opacity" placeholder="Opacity" value="50">
</fieldset>
<button style="width:100%" class="btn" id="tint">Tint</button>
</body>
</html>

Here we created out UI. Here we make link to popup.js that will be called when we click to Tint button. Then create a main.css file to make our extension to look better and enter the following code:

body {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.fieldset {
border:none;
}
.lbl {
color:#656F72;
margin-bottom:10px;
font-family: ‘Times New Roman’, Times, serif;
font-size:16px;
width: 100%;
margin: 5px 0;
display: inline-block;
box-sizing: border-box;
}
.form-control{
border: 1px solid #ccc;
border-radius: 4px;
padding:5px;
}
.btn{
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn:hover {
background-color: #45a049;
}

I will not explain all this code, cause this tutorial is not about it, if you are interested, you can read it here. So now we created our nice UI.

Step 4: Modify popup.js

Here is the last thing we should do is to implement the logic that should execute when the user click Tint button.

We’ll want to add an event listener to listen for the click event on the Tint button. When it is clicked, a tinterFucntion is called that gets values from popup.html input fields(width, height and opacity). Then the scirpt will execute which will tint images on our page. So how it is get tinted, we get all images and compare them for width and height if image is bigger than that values, then it will be tinted on given opacity.

Open the popup.js file and add the following code:

document.getElementById('tint').addEventListener('click', tinterFunction);
function tinterFunction() {
var width = document.getElementById('width').value;
var height = document.getElementById('height').value;
var opacity = document.getElementById('opacity').value;

var execCode = ' \
var imgs = document.getElementsByTagName("img"); \
for (var i = 0; i < imgs.length; i++) { \
if (imgs[i].height > '+ height +' && \
imgs[i].width > '+ width +') { \
imgs[i].setAttribute("style", "opacity: ' + opacity / 100 +'");\
} \
}';
chrome.tabs.executeScript({
code: execCode
});
};

Test your extension

Now it’s time to test your own extension on your browser. It is really easy test extension on Chrome, you just should type “chrome://extensions” :

Check “Developer mode” to enable loading unpacked extensions. This will allow you to load your extension from a folder. Finally, click “Load unpacked extension” and then load directory with your extension.

To test the extension open any page with images for example open it. Then click extensions icon, when the HTML page comes up push the Tint button and “VUALYA”.

So that’s it! If you have any problems or questions, feel free to ask questions in comments. I hope this introduction to creating Chrome extensions has been sufficient to get you started.