Tutorial: How to make a simple pop-up extension for chrome .

Danny on Fri Jan 06, 2012 5:25 am

Hello people,

I decided to make a how to make an google chrome extension tutorial.

we are going to make a hello world popup extension.
first you need to make the hello world page with html, javascript, php or what else you like.
I choose the html version and call it popup.html:

the source I used:

Code:: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Hello world</title> <style type="text/css"> a {color:#009DFF} body {background-color:#E6E6E6;font-family: "Century Gothic",Arial, Helvetica, Sans-Serif; font-style: normal; font-weight: normal; font-size: 13px; min-width:300px;} h1 { font-size:24px;#E6E6E6;font-family: "Century Gothic",Arial, Helvetica, Sans-Serif; font-style: normal; font-weight: normal;} </style> </head> <body> <h1>Hello world</h1> </body> </html>

after that you need to make the manifest.json
that includes the function of the extension but also the description and version.
it will be look like this:

Code:: { "name": "ExTENSION NAME", "description": "DESCRIPTION.", "version": "1", "icons": { "32": "icon.png" }, "permissions": [ "tabs", "http://*/*", "https://*/*" ], "browser_action": { "default_icon": "icon.png", "popup": "popup.html" } }

after you're done with that you need to save it as manifest.json <- very important otherwise it won't work

you think you are done, don't you? well we are almost done!
every extension need an icon, in this tutorial we will call it icon.png.
this is a quick draw in Ms paint, you can do it much beter if you take more time.

so, now you are finally done with the code work etc. But you need to pack it as a .crx file.
first open google chrome -> then go to extra's -> go to extensions -> and turn the development mode on.
you will see this:

click on the second button I have the dutch version so it will say extensie inpakken but I don't know how it is in English.
it ask to upload the map we're we have those files, so we click on browse and select the map.

after that google chrome have packed the files into a .crx file

drag it into the chrome window and you are done!
this is the result!

I hope this tutorial will help you a bit with creating chrome extensions..
~Danny