Getting started with Chrome extension development

In this tutorial we will be creating a basic chrome extension from scratch, this chrome extension will fetch some random inspirational quotes from an api, purpose is to give a basic idea of directory structure of extension and its working.

What Is a Chrome Extension?

A Chrome extension is a combination of HTML, CSS and JavaScript that allows us to add some functionality to Chrome browser through some of the JavaScript APIs provided by Chrome developer community itself. An extension is basically a web page that is hosted within Chrome browser and can access some additional APIs.

Lets get started with creating our extension

Creating a Project

We need to create a project with all the files and folders that we need to get started.
Step 1: creating a folder name it as “displayQuotes”
All the files related to our extension will kept in this folder
Step 2: Creating ‘manifest’ file
All Chrome extensions require a manifest file. The Manifest file tells Chrome everything it needs to know to load up the extension in browser.
This file is basically a json formated file we will be going through different classifications of attributes of the manifest file below

{
// Required
"manifest_version": 2,
"name": "New Quotes",
"version": "0.1",

// Recommended
"description": "This extension shows a Random quotes Every time",

// optional
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "click me"
},
"permissions": [
"tabs",
"http://quotesondesign.com/wp-json/posts"
]
}

Attributes classified as “Required” are must for every extension

manifest_version

has to be 2 always
name attribute gives the name of your extension which will be displayed in the manage extension section of your browser

Version

attribute will specify the version of your extension

Attributes classified as “Recommended” are nice to have attributes

description

is a nice to have attribute which will be displayed to users at the time of downloading the extension from chrome store

Attributes classified as “optional” depend on the functionality of your extension and its upto you what you want the extension to do

browser_action

attribute contains a list of some default attributes which define the display of you extension

We’ll need icon.png for our extension , it will be displayed next to the Omnibox, waiting for user interaction. This can be any 19x19px PNG file. You can either Download a copy of icon.png from our sample repository  or you can use your own.

permissions

attributes defines what all permission you want to give to you extension depends on your requirement and the level of interactivity you desire from your extension

Step 3: Creating the UI

create a file popup.html in root directory itself this file will contain basic html content as any web page it will act as ui for your extension

<!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
 <head>
 <link rel="stylesheet" href="assets/popup.css">
 </head>
 <body>
 <blockquote id= 'status'>
 </blockquote>
 </body>
</html>

for the Html file we will be creating respectful css file as we do for web pages

body{
width: 300px;
height: 100px;
border: #ccc;
background: rgba(239, 179, 184, 0.51);

}
blockquote {
background: rgba(223, 243, 217, 0.87);
border-left: 8px solid #ccc;
margin: 1.5em 10px;
padding: 8% 6% 0% 4%;
quotes: "\201C""\201D""\2018""\2019";
border-bottom-right-radius: 28px;
height: 76px;
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote:after {
color: #ccc;
content: close-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}

Step 4: Writing the Logic

Extension is all about JavaScript calls so now we will be creating js file to handle the interactivity of our extension

document.addEventListener('DOMContentLoaded', function() {

var searchUrl = 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand';
var x = new XMLHttpRequest();
// making api call to fetch data
x.open('GET', searchUrl);
x.responseType = 'json';

x.onload = function() {
var response = x.response;
if (!response || response.length === 0) {
errorCallback('No response from Host');
return;
}

// parsing the response recived
var firstResult = response[0];
var content=firstResult.content

// rendering the response on the html page
renderStatus(content);

};
x.onerror = function() {
errorCallback('Network error.');
renderStatus('Error...');
};
x.send();

});
function renderStatus(statusText) {
document.getElementById('status').innerHTML = statusText;
}

with this step our chrome extension is ready and now we have to test it

Testing it out

step 1: open chrome browser
step 2: in url section type chrome://extensions
you will be landed to manage extensions page
step 3: Once on the manage extensions page, check “Developer mode” to enable loading unpacked extensions. This will allow us to load your extension from folder in your system. Finally, click “Load unpacked extension” or simply drag the “displayQuotes” folder onto the page to load up the extension.

Now we should immediately see the extension show up as a Browser Action with your icon in the toolbar window .

Sample Extension on github

Happy Codding ….!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s