GGshow reloaded

Google Chrome now has extensions, and GG now want to have create some Google Chrome extensions ^^

By referring to the Getting Started tutorial and samples on Google Code Labs, I’ve created my first Google Chrome “Hello, World!” extension. It was much easier than expected.

Steps:

1. Create a folder called mygc_ext01.
2. Create a text file called manifest.json inside mygc_ext01 folder, contains code:

   {
     "name": "My First Extension",
     "version": "1.0",
     "description": "The first extension that I made.",
     "browser_action": {
       "default_icon": "icon.png"
     },
     "permissions": [
       "http://api.flickr.com/"
     ]
   }

3. Prepare an PNG icon called icon.png put into the same folder.
   I’ve tested it with .ico file in my Windows 7, it works.
   If we use a .ico icon, we should also change the value for default_icon to our .ico filename (e.g. filename.ico).
4. Now load the extension into Google Chrome.
   Click on Tools menu and choose Extensions.
   Enable Developer Mode.
   Click Load unpacked extension…
   Browse for the mygc_ext01 folder, and press OK.
   My icon successfully displayed as an extension button on Google Chrome .
5. Edit manifest.json, add popup parameter below default_icon

   ...
     "browser_action": {
       "default_icon": "icon.png",
       "popup": "mypage.html"
     },
   ...

6. Create a new file called “mypage.html” put into the same folder.
   Display something in the html page body.
7. On Google Chrome Extensions Developer Mode, press the Reload link behind My First Extension. And now if I click on my extension button, mypage.html will be displayed in a popup.

I’m planning to create some Google Chrome extension, but for now still need to sort my bunch of idea.

Below is an working example mygc_ext01 where mypage.html contains code to retrieve and display some picture from flickr.

Download:
Google Chrome extension sample code

Reference:
Getting Started: Building a Chrome Extension