$30 off During Our Annual Pro Sale. View Details »

GDG DevFestKK 2013 - Chrome Apps/Extensions Development

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
Tweet

More Decks by Jomar Tigcal

Other Decks in Technology

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
    [email protected]
    http://google.com/+JomarTigcal
    @jomartigcal

    View Slide