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

GDG DevFestKK 2013 - Chrome Apps/Extensions Dev...

Avatar for Jomar Tigcal 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

Avatar for Jomar Tigcal

Jomar Tigcal

November 16, 2013
Tweet

More Decks by Jomar Tigcal

Other Decks in Technology

Transcript

  1. Jomar Tigcal • GDG Philippines Community Manager • Mobile Apps

    Developer • Android Developer at Stratpoint Technologies, Inc.
  2. Chrome and Chromium Open-source browser project Chromium ------> Chrome Chromium

    OS ------> Chrome OS * Chrome Usage is now at 41.53% (November 2013, StatCounter)
  3. 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
  4. 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.)
  5. 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" } }
  6. Debugging Chrome Extensions Browse to Ensure Developer Mode in chrome:

    //extensions is checked Right-click extension icon then select Inspect popup
  7. Advanced Chrome Extensions • chrome.* APIs: http://developer.chrome. com/extensions/api_index.html • Standard

    JavaScript APIs • Javascript libraries • XMLHttpRequest • HTML5 • WebKit APIs • V8 APIs
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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