Introduction to Google Chrome Extensions Development
-
Upload
jomar-tigcal -
Category
Technology
-
view
1.153 -
download
2
description
Transcript of Introduction to Google Chrome Extensions Development
![Page 1: Introduction to Google Chrome Extensions Development](https://reader030.fdocuments.us/reader030/viewer/2022012403/555a47dfd8b42ae1398b5283/html5/thumbnails/1.jpg)
Introduction to Chrome Extensions Development
Jomar TigcalJuly 20, 2011
![Page 2: Introduction to Google Chrome Extensions Development](https://reader030.fdocuments.us/reader030/viewer/2022012403/555a47dfd8b42ae1398b5283/html5/thumbnails/2.jpg)
What are Chrome Extensions?
● Small programs that modify or enhance Google Chrome's functionality
● Installs easily
● Updates automatically
● Runs in separate process
![Page 3: Introduction to Google Chrome Extensions Development](https://reader030.fdocuments.us/reader030/viewer/2022012403/555a47dfd8b42ae1398b5283/html5/thumbnails/3.jpg)
What are Chrome Extensions?
● Written using HTML, JavaScript and CSS
● Integrated using simple APIs
● Developed iteratively
![Page 4: Introduction to Google Chrome Extensions Development](https://reader030.fdocuments.us/reader030/viewer/2022012403/555a47dfd8b42ae1398b5283/html5/thumbnails/4.jpg)
GTUG Philippines Chrome Extension
![Page 5: Introduction to Google Chrome Extensions Development](https://reader030.fdocuments.us/reader030/viewer/2022012403/555a47dfd8b42ae1398b5283/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to Google Chrome Extensions Development](https://reader030.fdocuments.us/reader030/viewer/2022012403/555a47dfd8b42ae1398b5283/html5/thumbnails/6.jpg)
Developing Chrome Extensions
![Page 7: Introduction to Google Chrome Extensions Development](https://reader030.fdocuments.us/reader030/viewer/2022012403/555a47dfd8b42ae1398b5283/html5/thumbnails/7.jpg)
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.)
![Page 8: Introduction to Google Chrome Extensions Development](https://reader030.fdocuments.us/reader030/viewer/2022012403/555a47dfd8b42ae1398b5283/html5/thumbnails/8.jpg)
Architecture of a Chrome Extension
![Page 9: Introduction to Google Chrome Extensions Development](https://reader030.fdocuments.us/reader030/viewer/2022012403/555a47dfd8b42ae1398b5283/html5/thumbnails/9.jpg)
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" }}
![Page 10: Introduction to Google Chrome Extensions Development](https://reader030.fdocuments.us/reader030/viewer/2022012403/555a47dfd8b42ae1398b5283/html5/thumbnails/10.jpg)
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.
![Page 11: Introduction to Google Chrome Extensions Development](https://reader030.fdocuments.us/reader030/viewer/2022012403/555a47dfd8b42ae1398b5283/html5/thumbnails/11.jpg)
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)
![Page 12: Introduction to Google Chrome Extensions Development](https://reader030.fdocuments.us/reader030/viewer/2022012403/555a47dfd8b42ae1398b5283/html5/thumbnails/12.jpg)
Deployment
● Upload a zip file of the extension
● Add the details of the extension
● Publish the extension
![Page 13: Introduction to Google Chrome Extensions Development](https://reader030.fdocuments.us/reader030/viewer/2022012403/555a47dfd8b42ae1398b5283/html5/thumbnails/13.jpg)
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
●
![Page 14: Introduction to Google Chrome Extensions Development](https://reader030.fdocuments.us/reader030/viewer/2022012403/555a47dfd8b42ae1398b5283/html5/thumbnails/14.jpg)
Questions?
![Page 15: Introduction to Google Chrome Extensions Development](https://reader030.fdocuments.us/reader030/viewer/2022012403/555a47dfd8b42ae1398b5283/html5/thumbnails/15.jpg)
Thank you!
![Page 16: Introduction to Google Chrome Extensions Development](https://reader030.fdocuments.us/reader030/viewer/2022012403/555a47dfd8b42ae1398b5283/html5/thumbnails/16.jpg)
Introduction to Chrome Extensions Development
Jomar TigcalJuly 20, 2011