0
Introduction to ChromeExtensions Development               Jomar Tigcal               July 20, 2011
What are Chrome Extensions?● Small programs that modify or enhance Google Chromes  functionality● Installs easily● Updates...
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 in...
Developing Chrome   Extensions
Structure of a Chrome ExtensionA compressed file composed of: ● manifest.json (Manifest file) ● optional HTML files ● opti...
Architecture of a Chrome Extension
Manifest.json (Manifest file){  "name": "GTUG Philippines Chrome Extension",  "version": "1.4",  "description": "Google Ch...
Creating an Extension● Create a manifest.json● Create additional files and include image files (like icon)● Open Chrome Ex...
Deployment● Go to the Google Web Store Developer Dashboard   ○ Browse to the Google Web Store page and click     the Devel...
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/ch...
Questions?
Thank you!
Introduction to ChromeExtensions Development               Jomar Tigcal               July 20, 2011
Upcoming SlideShare
Loading in...5
×

Introduction to Google Chrome Extensions Development

1,137

Published on

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

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,137
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to Google Chrome Extensions Development"

  1. 1. Introduction to ChromeExtensions Development Jomar Tigcal July 20, 2011
  2. 2. What are Chrome Extensions?● Small programs that modify or enhance Google Chromes functionality● Installs easily● Updates automatically● Runs in separate process
  3. 3. What are Chrome Extensions?● Written using HTML, JavaScript and CSS● Integrated using simple APIs● Developed iteratively
  4. 4. GTUG Philippines Chrome Extension
  5. 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. 6. Developing Chrome Extensions
  7. 7. Structure of a Chrome ExtensionA compressed file composed of: ● manifest.json (Manifest file) ● optional HTML files ● optional JavaScript files ● optional CSS files ● any other files (logo, images, etc.)
  8. 8. Architecture of a Chrome Extension
  9. 9. Manifest.json (Manifest file){ "name": "GTUG Philippines Chrome Extension", "version": "1.4", "description": "Google Chrome Extension for the GTUGPhilippines community.", "browser_action": { "default_icon": "images/gtug_icon-16.png", "default_title": "GTUG Philippines Chrome Extension", "popup": "links.html" }}
  10. 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 extensions directory and click OK.
  11. 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. 12. Deployment● Upload a zip file of the extension● Add the details of the extension● Publish the extension
  13. 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. 14. Questions?
  15. 15. Thank you!
  16. 16. Introduction to ChromeExtensions Development Jomar Tigcal July 20, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×