How To Create A Simple Chrome Addon
Creating A Chrome Addon Is Really easy...
Start of with making a manifest.json file:
manifest.json
and create the above icons in correct sizes (icon.png is 19x19, icon16.png is 16x16 etc)
Next Create a simple html file called popup.html
and put all files in a folder eg: myfirstaddon
Next Goto Chrome and right click on an addon already installed and goto "manage extentions"
if you havent got an addon already installed click on the spanner icon and goto "options" and then "extentions"
Now tick the box that says "Developer Mode" and then click on "Load unpacked extentions" and find your folder you created earlier eg: myfirstaddon and push "ok"
Now you should see your Addon button on the toolbar :D
now because you have selected "Load unpacked extentions" you can carry on editing your popup.html and it will automatically change when you click the addon button
- you can create style.css files if you want to or put images in your folder also
html to link to the file will look like this:
now when you have finished editing your html file and you want to release it to the public you now do the same as before and goto the "manage extentions" but this time click on "pack extention" - Find your folder again. eg: myfirstaddon ... you will also see below the option to find a key also ... dont worry about doing this as it is your first addon chrome will automatically create a key for you (this is so you can edit your addon later if you need to) .... push ok and it will create your first addon for you
(you can always delete the key if you need to edit it again (quicker))
Your newly created addon will be in the folder before myfirstaddon (will be called myfirstaddon.crx)
The key will be called myfirstaddon.perm
You can now test your myfirstaddon.crx out by dragging it across on to your browser
if you have any questions feel free to ask in this topic
INSTRUCTIONS NEED UPDATING TO V2 MANIFEST
Start of with making a manifest.json file:
manifest.json
PHP Code:
{
"name": "My First Addon",
"version": "1.0",
"description": "Learning To Make An Addon",
"icons": { "16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
}
}
Next Create a simple html file called popup.html
PHP Code:
<html>
<head>
</head>
<body>
<center>
<h3> My First Addon </h3>
Some More Text Here<br/><br/>
</center>
</body>
</html>
Next Goto Chrome and right click on an addon already installed and goto "manage extentions"
if you havent got an addon already installed click on the spanner icon and goto "options" and then "extentions"
Now tick the box that says "Developer Mode" and then click on "Load unpacked extentions" and find your folder you created earlier eg: myfirstaddon and push "ok"
Now you should see your Addon button on the toolbar :D
now because you have selected "Load unpacked extentions" you can carry on editing your popup.html and it will automatically change when you click the addon button
- you can create style.css files if you want to or put images in your folder alsohtml to link to the file will look like this:
PHP Code:
<link rel="stylesheet" type="text/css" href="style.css">
<img src="image.png" alt=""/>
//etc etc etc :P
(you can always delete the key if you need to edit it again (quicker))
Your newly created addon will be in the folder before myfirstaddon (will be called myfirstaddon.crx)
The key will be called myfirstaddon.perm
You can now test your myfirstaddon.crx out by dragging it across on to your browser
if you have any questions feel free to ask in this topic
INSTRUCTIONS NEED UPDATING TO V2 MANIFEST