Your SlideShare is downloading. ×
Introduction to Google Chrome Extensions Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to Google Chrome Extensions Development

1,103
views

Published on

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

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,103
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introduction to ChromeExtensions Development Jomar Tigcal July 20, 2011
  • 2. What are Chrome Extensions?● Small programs that modify or enhance Google Chromes 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 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. Architecture of a Chrome Extension
  • 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. 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. 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 ChromeExtensions Development Jomar Tigcal July 20, 2011