10-21-2015, 01:43 PM
Google has a detail documentation on how to build a chrome extension from scratch.
But if you are looking for a quick overview, then this guide will help.
What is chrome extension?
It is a small program that add an extra functionality to your chrome browser.
Usually, chrome extensions appear in the right side of your omnibox and shows a popup when clicked.
What should you know before we start?
If you can write a web page, you can make a chrome extension under 5 minutes.
However, to make something useful, you should know the basic of HTML, CSS, JavaScript and how to use chrome’s API.
Though i.e. easy.
How much time does it take?
It can take anything from few hours to few days, depending on the complexity of your extension.
What is a chrome extension made up of?
A simple chrome extension comprises of a manifest file, few HTML/CSS files, few javascript files, and some png images for screenshots and icons.
You put all these files in a zip folder and upload it to chrome store.
A simple chrome extension consist of four files:
1.Manifest.json: Consider it as an index of a book.
This manifest file tells chrome the details of your extension, like its name, description, version number etc.
It is written in JSON notation – a simple language that can be pick up under 5 minutes.
2.HTML file defines the layout of your page.
Usually, when you press the extension button, you see a popup.
This popup is written in HTML and you can also add some CSS to make it look better.
3.Icon (preferably a png) gives identity to your extension.
It’s like how your extension look.
If you do not add an icon then chrome will use a default icon.
4.JavaScript file does all the magic.
It contains the main logic that tell the browser what to do when the user clicks on the extension.
How to make a Chrome Extension
#1 Identify the problem find out what problem you want to solve with your chrome extension.
For instance, I want to open my frequently visited websites with a single click.
But I couldn’t find any relevant extension which does that.
So I decided to write one.
Similarly, it’s better if you have your own problem.
This will keep you motivated.
#2 Write code once you figure out the problem
Its time to write some code.
Here, we will analyze the code used in chrome extension.
Obviously it will different for your extension, this will give you a good idea.
So open your favorite text editor, create a new folder.
Let’s called it ‘chrome extension’.
In this folder, we will add 4 files i.e. manifest.json, HTML file, icon.png and the javascript file.
So let’s see the code of each one of them.
2.1 Manifest.json
{ "manifest_version": 2, "name": "Open Multiple links", "description": "This extension enables you to open pre defined links in new tabs", "version": "1.0", "browser_action": {
"default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [
"tabs", "storage" ]
Apparently, chrome uses version ‘2’.
This is fixed.
Next is the name, description and version of your extension.
To understand browser action and permission, you will have to go through the documentation.
However, you can copy paste the above code and change values accordingly.
2.2 popup.html
Open Multiple links
<script type="text/javascript" src ="popup.js"></script> Paste the links below
Here is the simple HTML for popup.
It has a text area where the user will enter all the URLs and a submit button.
Notice that we have also used id tag here so that we can access these elements from anywhere.
2.3icon.png
Use photoshop or online tool to create a custom png icon for your extension.
32*32 or 64*64 pixel are recommended.
2.4 popup.js
// open pages in new tabs function load URLs() {
// fetch urls from text area and split it var urls = document.getElementById('urls').value.split('n');
// run a loop on the fetched urls for(var i=0; i
// remove the white space from the url cleanUrl = urls[i].replace(/s/g, '');
// if user input valid urls then open pages if(cleanUrl != '') {
chrome.tabs.create({"url": cleanUrl,"selected": false}); }
// if user input no url else {
document.getElementById('urls').innerHTML = "No value spec ified"; } }}
// Save url in chrome storagefunction saveUrls() {
// Fetch urls from textarea and splititvar urls = document.getElementById('urls').value.split('n'); var urlsContainer = "";
// run a loop on the fetched urls for (i=0; i
// if the user input valid urls, save it in local chrome storage if(urls[i] != ' ') {
urlsContainer += urls[i] + 'n'; localStorage['urls'] = urlsContainer; } } }
document.addEventListener('DOMContentLoaded', function () {
// add an event listener to load url when button is clicked document.getElementById('button').addEventListener('click', loadUrls);
// add an event listener to save url when button is clicked document.getElementById('button').addEventListener('click', saveUrls);
// reload the urls in the browser var urls = localStorage['urls']; if (!urls) {
return; } document.getElementById('urls').value = urls;});
The above code is self-explanatory with the help of comments.
Basically what we are doing here is, we are using two function one ‘saveUrl’ this will store all the user input in the chrome storage and ‘loadUrl’ will launch them in new tab when the button is clicked.
#3 Publish the extension
To test your extension in chrome locally, turn on developer mode on chrome extensions page, then drag and drop this ‘chrome extension’ there.
Once you are done troubleshooting, you can upload your extension to chrome store so that everyone can see it.
To do this head over to chrome developers dashboard and create an account.
You will have to give one-time $5 fees to chrome.
Then upload your chrome extension and enter details and few screenshots.
And that’s it.
Hit the publish button and your extension will be live.
But if you are looking for a quick overview, then this guide will help.
What is chrome extension?
It is a small program that add an extra functionality to your chrome browser.
Usually, chrome extensions appear in the right side of your omnibox and shows a popup when clicked.
What should you know before we start?
If you can write a web page, you can make a chrome extension under 5 minutes.
However, to make something useful, you should know the basic of HTML, CSS, JavaScript and how to use chrome’s API.
Though i.e. easy.
How much time does it take?
It can take anything from few hours to few days, depending on the complexity of your extension.
What is a chrome extension made up of?
A simple chrome extension comprises of a manifest file, few HTML/CSS files, few javascript files, and some png images for screenshots and icons.
You put all these files in a zip folder and upload it to chrome store.
A simple chrome extension consist of four files:
1.Manifest.json: Consider it as an index of a book.
This manifest file tells chrome the details of your extension, like its name, description, version number etc.
It is written in JSON notation – a simple language that can be pick up under 5 minutes.
2.HTML file defines the layout of your page.
Usually, when you press the extension button, you see a popup.
This popup is written in HTML and you can also add some CSS to make it look better.
3.Icon (preferably a png) gives identity to your extension.
It’s like how your extension look.
If you do not add an icon then chrome will use a default icon.
4.JavaScript file does all the magic.
It contains the main logic that tell the browser what to do when the user clicks on the extension.
How to make a Chrome Extension
#1 Identify the problem find out what problem you want to solve with your chrome extension.
For instance, I want to open my frequently visited websites with a single click.
But I couldn’t find any relevant extension which does that.
So I decided to write one.
Similarly, it’s better if you have your own problem.
This will keep you motivated.
#2 Write code once you figure out the problem
Its time to write some code.
Here, we will analyze the code used in chrome extension.
Obviously it will different for your extension, this will give you a good idea.
So open your favorite text editor, create a new folder.
Let’s called it ‘chrome extension’.
In this folder, we will add 4 files i.e. manifest.json, HTML file, icon.png and the javascript file.
So let’s see the code of each one of them.
2.1 Manifest.json
{ "manifest_version": 2, "name": "Open Multiple links", "description": "This extension enables you to open pre defined links in new tabs", "version": "1.0", "browser_action": {
"default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [
"tabs", "storage" ]
Apparently, chrome uses version ‘2’.
This is fixed.
Next is the name, description and version of your extension.
To understand browser action and permission, you will have to go through the documentation.
However, you can copy paste the above code and change values accordingly.
2.2 popup.html
Here is the simple HTML for popup.
It has a text area where the user will enter all the URLs and a submit button.
Notice that we have also used id tag here so that we can access these elements from anywhere.
2.3icon.png
Use photoshop or online tool to create a custom png icon for your extension.
32*32 or 64*64 pixel are recommended.
2.4 popup.js
// open pages in new tabs function load URLs() {
// fetch urls from text area and split it var urls = document.getElementById('urls').value.split('n');
// run a loop on the fetched urls for(var i=0; i
// remove the white space from the url cleanUrl = urls[i].replace(/s/g, '');
// if user input valid urls then open pages if(cleanUrl != '') {
chrome.tabs.create({"url": cleanUrl,"selected": false}); }
// if user input no url else {
document.getElementById('urls').innerHTML = "No value spec ified"; } }}
// Save url in chrome storagefunction saveUrls() {
// Fetch urls from textarea and splititvar urls = document.getElementById('urls').value.split('n'); var urlsContainer = "";
// run a loop on the fetched urls for (i=0; i
// if the user input valid urls, save it in local chrome storage if(urls[i] != ' ') {
urlsContainer += urls[i] + 'n'; localStorage['urls'] = urlsContainer; } } }
document.addEventListener('DOMContentLoaded', function () {
// add an event listener to load url when button is clicked document.getElementById('button').addEventListener('click', loadUrls);
// add an event listener to save url when button is clicked document.getElementById('button').addEventListener('click', saveUrls);
// reload the urls in the browser var urls = localStorage['urls']; if (!urls) {
return; } document.getElementById('urls').value = urls;});
The above code is self-explanatory with the help of comments.
Basically what we are doing here is, we are using two function one ‘saveUrl’ this will store all the user input in the chrome storage and ‘loadUrl’ will launch them in new tab when the button is clicked.
#3 Publish the extension
To test your extension in chrome locally, turn on developer mode on chrome extensions page, then drag and drop this ‘chrome extension’ there.
Once you are done troubleshooting, you can upload your extension to chrome store so that everyone can see it.
To do this head over to chrome developers dashboard and create an account.
You will have to give one-time $5 fees to chrome.
Then upload your chrome extension and enter details and few screenshots.
And that’s it.
Hit the publish button and your extension will be live.