My talk at the GTUG Philippines (now GDG Philippines) meetup last July 20, 2011

1. Introduction to Chrome
Extensions Development
Jomar Tigcal
July 20, 2011

2. What are Chrome Extensions?
● Small programs that modify or enhance Google Chrome's
functionality
● Installs easily
● Updates automatically
● Runs in separate process

3. What are Chrome Extensions?
● Written using HTML, JavaScript and CSS
● Integrated using simple APIs
● Developed iteratively

4. GTUG Philippines Chrome Extension

5. Using Chrome Extensions
● Visit the Chrome Web Store (https://chrome.google.
com/webstore)
● Search for an extension and install them.
● Managing extensions
* Go to the Wrench -> Tools -> Extensions
* Type chrome://extensions in the address bar
* Right-click an extension and select Manage extensions

6. Developing Chrome
Extensions

7. Structure of a Chrome Extension
A compressed file composed of:
● manifest.json (Manifest file)
● optional HTML files
● optional JavaScript files
● optional CSS files
● any other files (logo, images, etc.)

8. Architecture of a Chrome Extension

9. Manifest.json (Manifest file)
{
"name": "GTUG Philippines Chrome Extension",
"version": "1.4",
"description": "Google Chrome Extension for the GTUG
Philippines community.",
"browser_action": {
"default_icon": "images/gtug_icon-16.png",
"default_title": "GTUG Philippines Chrome Extension",
"popup": "links.html"
}
}

10. Creating an Extension
● Create a manifest.json
● Create additional files and include image files (like icon)
● Open Chrome Extensions Management Page
● Click the + on the Developer Mode
● Click the Load unpacked extension... button
● Browse to your extension's directory and click OK.

11. Deployment
● Go to the Google Web Store Developer Dashboard
○ Browse to the Google Web Store page and click
the Developer Dashboard link at the bottom of the page
○ https://chrome.google.
com/webstore/developer/dashboard
● Click Add New Item.
● Pay the one-time developer registration fee (if not yet done)

12. Deployment
● Upload a zip file of the extension
● Add the details of the extension
● Publish the extension

13. Important Links
● Chrome Web Store:
https://chrome.google.com/webstore
● Google Code Page:
http://code.google.com/chrome/extensions/
● Chromium Blog:
http://blog.chromium.org/
● Chromium Extension Mailing List:
http://groups.google.com/a/chromium.org/group/chromium-extensions
●

14. Questions?

15. Thank you!

16. Introduction to Chrome
Extensions Development
Jomar Tigcal
July 20, 2011