In this Build with chrome extensions tutorial:

I will list all the steps that are very important to implement for a beginner for extensions.

Using this Build with Chrome tutorial  you  will find all the informations that are important to create extensions for chrome.

1) Let us check the architecture of the google chrome extension

a) Page action

b) browser action

c) background script

d) content script

e) developer script

f) manifest.json
Let us discuss this step by step

All the above property are described in the manifest.json file



The below two properties page_action and browser_action are basically used to control the user interface of the chrome extension.

a) Page_action : This property is similar to browser_action property that is described in the manifest.json file

in page_action , the icon is shown inside the browser bar.

In order to add this in the manifest file

“page_action”: {
“default_icon”: {
“19”: “images/icon19.png”,
“38”: “images/icon38.png”
“default_title”: “Testing Mail”,
“default_popup”: “testpopup.html”

2) Browser action(browser_action):

In brower action the icon is displayed outside the brower bar. User can click on that icon and open a new popup. The
popup is basically controlled by the html that you control.
“browser_action”: {
“default_icon”: {
“19”: “img/19×19.png”,
“38”: “img/38×38.png”
“default_title”:”my tooltip”,
“default_popup”: “popup.html”
Browser action and page action are basically used to design the interface in chrome extension.
3) Coding files for chrome extension

Background : The background property consists of the code that is running all the time during the execution of the extension code. This page is persistent. We can make it on/off so that it does not run persistently

“background”: {
“scripts”: [“background.js”],
“persistent”: false/true

When we put persistent property to false then it becomes event page. Event pages are very important as they save memory.
4) Content script:

Content script property is basically used when we want to check the dom of the current page. So it runs on every page refresh

“content_scripts”: [
“matches”: [“http://*/*”, “https://*/*”],
“js”: [“content.js”]

5)manifest.json file

Based upon our discussion about google chrome extension creation , when we put all these in one file, our manifest.json file shows like below

“name”: “BrowserExtension”,
“version”: “0.0.1”,
“manifest_version”: 2,
“description” : “Description …”,
“icons”: { “16”: “icons/16×16.png”, “48”: “icons/48×48.png”, “128”: “icons/128×128.png” },

“browser_action”: {
“default_icon”: { “19”: “icons/19×19.png”, “38”: “icons/38×38.png” },
“default_title”: “That’s the tool tip”,
“default_popup”: “browseraction/popup.html”
“background”: {
“scripts”: [“background.js”],
“persistent”: false
“chrome_url_overrides” : {
“newtab”: “newtab/newtab.html”
“content_scripts”: [{
“matches”: [“http://*/*”, “https://*/*”],
“js”: [“content.js”]
“devtools_page”: “devtools/devtools.html”

6) Testing and developing

you can test your application once it is created on the chrome browser. You don’t need to upload it on the chrome webstore.

In order to test your chrome extension

write chrome://extensions in the browser

This will open list of all the extensions installed in your browser. Click on “load unpacked extension” and upload your extension that you have just created.

The above post for chrome extension tutorial is for the beginners who want to build with chrome and want to create extensions.

This Build with chrome tutorial is just brief overview for the developers how to start chrome extensions .