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
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

5. Chrome Extensions
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

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

    View Slide

22. Thank you very much!
    http://jomar.tigcal.com
    jomar@tigcal.com
    http://google.com/+JomarTigcal
    @jomartigcal
    

    View Slide