Build your first Chrome Extension

Avatar

I've been thinking about how chrome extensions work, after a few hours of digging into docs & tutorials then i realized that's the easiest thing, following this article will help you to build your first chrome extension.

Prerequisites : 

  • Basic familiarity with HTML & CSS
  • Basic knowledge of Javascript and programming. 

 

Before diving into technical details let's get an overview of chrome extensions and why we use them.

"Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS".

 I'll cover the basics with our famous example 'To do list'.

 

basic structure

  • index.html
  • minfest.json
  • script.js
  • style.css

 

manifest.json: it's a simple JSON contains information like permissions, author version, etc ...

 

{
"manifest_version":2,
"name": "Test App",
"version": "1.0.0",
"browser_action": {
"default_popup" : "index.html",
"default_title" : "My first Chrome Extension"
},
"permissions":[
"storage"
],
"author": "khalid skiod"
}

 

fields chrome doc manifest.json

index.html: contains layout of the extension 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="myDIV" class="header">
<h2 style="margin:5px">To do List</h2>
<input type="text" id="myInput" placeholder="to do...">
<span id="btn" class="addBtn">Add</span>
</div>
<ul id="myUL">
</ul>
<script src="script.js"></script>
</body>
</html>

 

style.css:  regular CSS file 

body {
margin: 0;
min-width: 250px;
}
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
}
 
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: none;
background: #eee;
font-size: 18px;
transition: 0.2s;
 
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
 
ul li:nth-child(odd) {
background: #f9f9f9;
}
 
ul li:hover {
background: #ddd;
}
 
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
 
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
 
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
 
.close:hover {
background-color: #f44336;
color: white;
}
 
.header {
background-color: #075c83;
padding: 30px 5px;
color: white;
text-align: center;
}
 
.header:after {
content: "";
display: table;
clear: both;
}
 
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
 
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
 
.addBtn:hover {
background-color: #bbb;
}

 

script.js: here we define the logic of our example.

var myNodelist = document.getElementsByTagName("LI");
var btn = document.getElementById('btn');
let todo =[]
//get data from storage
chrome.storage.sync.get("todo", function(item){
todo = item.todo
 
//loop inside items
for(let i = 0 ; i < todo.length ; i++){
var li = document.createElement("li");
var t = document.createTextNode(todo[i].title);
li.appendChild(t);
if(todo[i].checked === true){
li.className = "checked"
}
li.setAttribute('data-id',i)

//add delete button
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
document.getElementById("myUL").appendChild(li);
}

//trigger delete item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
todo.splice(div.getAttribute('data-id'),1);
chrome.storage.sync.set({ "todo": todo }, function(){});
}
}
 
//check the item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
todo[ev.target.getAttribute('data-id')].checked = !todo[ev.target.getAttribute('data-id')].checked
ev.target.classList.toggle('checked');
chrome.storage.sync.set({ "todo": todo }, function(){});
}
}, false);
 
// add todo
btn.onclick = function(){
let inputVal = document.getElementById('myInput').value;
todo.push({title : inputVal , checked : false})
var li = document.createElement("li");
var t = document.createTextNode(inputVal);
li.appendChild(t);
li.setAttribute('data-id',todo.length - 1)
document.getElementById("myUL").appendChild(li);
document.getElementById('myInput').value = '';
chrome.storage.sync.set({ "todo": todo }, function(){});
}
})

 

If you are familiar with javascript you probably get an idea of this code, the only thing added here is dealing with chrome API especially storage object.

We set & get  todo list into browser storage in order to keep it even after reloading the browser

set :  chrome.storage.sync.set({ "todo": todo }, function(){});

get : chrome.storage.sync.get("todo", function(item){

One last step to test our extension, let's upload it into the browser,

Go to settings > more tools > Extensions

 1. enable developer mode 

 2. upload you app

after these steps, you will able to see your extension added and guess what you built your first chrome extension

 

 

github repo

https://github.com/skiod/todo-extension

conclusion 

an extension's just a web app + manifest.json, we use them to automate things in our browser.