Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GDG DevFestKK 2013 - Chrome Apps/Extensions Development

57b162d778f0284d2dfe1dbaabd4434e?s=47 Jomar Tigcal
November 16, 2013

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


Jomar Tigcal

November 16, 2013

More Decks by Jomar Tigcal

Other Decks in Technology


  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