introduction to google chrome extensions development
Post on 19-May-2015
1.152 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related