Introduction to Chrome Extensions Development

Jomar TigcalJuly 20, 2011

What are Chrome Extensions?

● Small programs that modify or enhance Google Chrome's functionality

● Installs easily

● Updates automatically

● Runs in separate process

What are Chrome Extensions?

● Written using HTML, JavaScript and CSS

● Integrated using simple APIs

● Developed iteratively

GTUG Philippines Chrome Extension

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

Developing Chrome Extensions

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.)

Architecture of a Chrome Extension

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" }}

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.

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)

Deployment

● Upload a zip file of the extension

● Add the details of the extension

● Publish the extension

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

●

Questions?

Thank you!

Introduction to Chrome Extensions Development

Jomar TigcalJuly 20, 2011