GDG DevFestKK 2013 - Chrome Apps/Extensions Development

The slides I used in my presentation about Chrome Apps/Extensions Development during GDG DevFest Kota Kinabalu 2013

Transcript

1. Chrome Apps/Extensions Development Jomar Tigcal November 16, 2013
2. Jomar Tigcal • GDG Philippines Community Manager • Mobile Apps Developer • Android Developer at Stratpoint Technologies, Inc.
3. Chrome and Chromium Open-source browser project Chromium ------> Chrome Chromium OS ------> Chrome OS * Chrome Usage is now at 41.53% (November 2013, StatCounter)
4. Chrome Apps and Extensions Chrome Apps • Web app that looks like native app • Written using HTML, JavaScript and CSS Chrome Extensions • Small programs that modify or enhance Google Chrome's functionality • Written using HTML, JavaScript and CSS
5. Chrome Extensions
6. Developing Chrome Extensions A compressed file composed of: •manifest.json (Manifest file) •optional HTML files •optional JavaScript files •optional CSS files •any other files (logo, images, etc.)
7. manifest.json { "name": "GDG Philippines Chrome Extension", "version": "2.0", "description": "Google Chrome Extension for the GDG Philippines community.", "browser_action": { "default_icon": "images/gdg.png", "default_title": "GDG Philippines Chrome Extension", "popup": "links.html" } }
8. Developing Chrome Extensions Browse to chrome://extensions Check the Developer Mode (if not yet checked) Click Load Unpacked Extension
9. Debugging Chrome Extensions Browse to Ensure Developer Mode in chrome: //extensions is checked Right-click extension icon then select Inspect popup
10. Advanced Chrome Extensions • chrome.* APIs: http://developer.chrome. com/extensions/api_index.html • Standard JavaScript APIs • Javascript libraries • XMLHttpRequest • HTML5 • WebKit APIs • V8 APIs
11. Chrome Extensions References • http://developer.chrome. com/extensions/index.html • http://developer.chrome. com/extensions/samples.html • https://groups.google.com/a/chromium. org/forum/#!forum/chromium-extensions • http://stackoverflow.com/tags/google- chrome-extension/info
12. Developing Chrome Apps • Installable Web Apps ◦ Hosted Apps • Packaged Apps
13. Hosted Apps • normal websites with metadata • “installable” from Chrome Web Store
14. Packaged Apps • Works offline • Tightly integrated with the Google Chrome browser
15. Chrome Apps References • http://developer.chrome. com/apps/about_apps.html • http://developer.chrome.com/apps/samples. html • https://groups.google.com/a/chromium. org/forum/#!forum/chromium-apps • http://stackoverflow.com/tags/google- chrome-app/info
16. Publishing Apps and Extensions Chrome Web Store: http://chrome.google.com/webstore Chrome Web Store Developer Dashboard: https://chrome.google. com/webstore/developer/dashboard * $5 one-time fee
17. Chrome Apps Developer Tool • A new tool for developers building Chrome Apps and extensions • A Chrome App available in Chrome Web Store • Cleaner User Interface
18. Chrome Apps Developer Tool • Inspect views for inspecting app/extension pages using dev tools • Reload, launch, pack, uninstall an app/extension • View permissions • Load an unpacked app/extension • Search for app/extension
19. Other References • https://developers.google.com/chrome/ • https://developers.google.com/live/chrome/ • https://plus.google. com/+GoogleChromeDevelopers/posts • https://twitter.com/ChromiumDev • http://blog.chromium.org/
20. Chrome Dev Summit 2013 http://developer.chrome.com/devsummit November 20-21, 2013 Chrome Dev Summit Live Stream: https://plus.google. com/events/cauvflh1oml09vrahsljr1iv6tk Google+ Community: https://plus.google. com/communities/113388322868091932405
21. Questions? Image Source: http://www.zdnet.com/blog/igeneration/chrome-os-more-questions-than-answers/3388
22. Thank you very much! http://jomar.tigcal.com jomar@tigcal.com http://google.com/+JomarTigcal @jomartigcal