Chrome Apps/Extensions Development Jomar Tigcal November 16, 2013 

Jomar Tigcal ● GDG Philippines Community Manager ● Mobile Apps Developer ● Android Developer at Stratpoint Technologies, Inc. 

Chrome and Chromium Open-source browser project Chromium ------> Chrome Chromium OS ------> Chrome OS * Chrome Usage is now at 41.53% (November 2013, StatCounter) 

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 

Chrome Extensions 

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.) 

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" } } 

Developing Chrome Extensions Browse to chrome://extensions Check the Developer Mode (if not yet checked) Click Load Unpacked Extension 

Debugging Chrome Extensions Browse to Ensure Developer Mode in chrome: //extensions is checked Right-click extension icon then select Inspect popup 

Advanced Chrome Extensions ● chrome.* APIs: http://developer.chrome. com/extensions/api_index.html ● Standard JavaScript APIs ● Javascript libraries ● XMLHttpRequest ● HTML5 ● WebKit APIs ● V8 APIs 

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 

Developing Chrome Apps ● Installable Web Apps ○ Hosted Apps ● Packaged Apps 

Hosted Apps ● normal websites with metadata ● “installable” from Chrome Web Store 

Packaged Apps ● Works offline ● Tightly integrated with the Google Chrome browser 

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 

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 

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 

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 

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/ 

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 

Questions? Image Source: http://www.zdnet.com/blog/igeneration/chrome-os-more-questions-than-answers/3388 

Thank you very much! http://jomar.tigcal.com [email protected] http://google.com/+JomarTigcal @jomartigcal