How to create a Google Chrome extention - simple tutorial With Screenshots and examples

Published



So, you want to create a google chrome chrome Extension! here we go.
As we all know , google chrome is the leading web browser in world, because of its modern rendering features and speed.
Extensions are programs that we can add to google chrome utilizing its features.
There are many extensions out there in web store of google chrome, sometimes we wonder that how they build.
Actually its is easy like anything even if you don't have any programming skills or webdesign or web development knowledge.
All you have to do is read this article and follow instructions on how to build a Chrome extension in easy steps.

If you are a beginner, lets begin with a hello world program,
which adds a extension icon to Chrome's toolbar and when we click on it, it will show a hello world writing just like in the figure below.



So here we start:

1  Create a folder on your desktop (or elsewhere) and name it "Hello World" .


2 Open your Text editor(Notepad or which you prefer) and Copy below code into that and save it as "Manifest.json" (Note that the extension should .json and not .json.txt, i was confused first about this when i started developing one.)


{
  "manifest_version": 2,   "name": "Hello World",   "description": "Your Description about Extension goes here",   "version": "1.0",   "browser_action": {     "default_icon": "icon.png",     "default_popup": "popup.html"   } }

All the codes are self explanatory.

  • We should include " "manifest_version": 2," in every extension else it wont work.
  • "name" in this code means our extensions name is equal to Hello World.
  • "Description" is the description for our chrome extension.
  • version is the version number of our extension.
  • browser action is where we call browser to do something and this is where the core of our extension.
  • browser action > "default_icon" is for our icon for the extension.
  • browser action > "default_popup" is for the popup html where the our program includes.


3 After Copying the above code to manifest json file and saving, now we have to select our icon and copy that to our directory where manifest.json includes.
Here is an icon for demo purpose. right click on it and select save as icon.png . (Be sure that your icon has the same name as you wrote in manifest.json file.)



4 Now create a hello file named popup.html in same directory.and write "hello world" in that file. (open text editor, write "hello world", save as popup.html)
Now we have all the resources for our hello world extension in that hello world directory.


Okay, lets come into action.

Open Chrome extensions page.
To do so, just copy paste this line to chrome's address bar
chrome://extensions/ Or
Click on settings button on top right side of browser.
select tools -> extensions

It will open up Extension's page.


Now tick on Developer mode
It will show you advanced controls



Click on Load Unpacked Extension button.
Browse for your hello world directory and click ok.


Haven't you noticed that there is an icon appeared on chrome toolbar?just like in the figure below.if its not, Dont worry, start again.


Yup, you have made your first chrome extension from scratch!



you may be thinking This is so simple , if you do, it is the time to go ahead and change contents of your popup.html file and experiment with it.

Hope this tutorial helps you!

Comments

  1. What if you wanted to create an options page in order to change the text from "hello world" to something else (user defined)? Can you provide a tutorial on how to do that?

    ReplyDelete