How To Create A Simple Chrome Addon

  • Filter
  • Time
  • Show
Clear All
new posts

  • How To Create A Simple Chrome Addon

    Creating A Chrome Addon Is Really easy...

    Start of with making a manifest.json file:
    PHP Code:
    "name""My First Addon",
    "description""Learning To Make An Addon",
    "icons": { "16""icon16.png",
    "browser_action": {

    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
    PHP Code:
    h3My First Addon </h3>
    Some More Text Here<br/><br/>
    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:
    PHP Code:
    <link rel="stylesheet" type="text/css" href="style.css">
    img src="image.png" alt=""/>
    //etc etc etc :P 
    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

    Last edited by something else; 12.04.13, 18:44.