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

Introduction to Google Chrome Extensions Development

Introduction to Google Chrome Extensions Development

The slides I used in my talk at the GTUG Philippines (now GDG Philippines) meetup on July 20, 2011

Jomar Tigcal

July 20, 2011
Tweet

More Decks by Jomar Tigcal

Other Decks in Technology

Transcript

  1. What are Chrome Extensions? • Small programs that modify or

    enhance Google Chrome's functionality • Installs easily • Updates automatically • Runs in separate process
  2. What are Chrome Extensions? • Written using HTML, JavaScript and

    CSS • Integrated using simple APIs • Developed iteratively
  3. Using Chrome Extensions • Visit the Chrome Web Store (https://chrome.google.

    com/webstore) • Search for an extension and install them. • Managing extensions * Go to the Wrench -> Tools -> Extensions * Type chrome://extensions in the address bar * Right-click an extension and select Manage extensions
  4. Structure of a Chrome Extension 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 (Manifest file) { "name": "GTUG Philippines Chrome Extension", "version":

    "1.4", "description": "Google Chrome Extension for the GTUG Philippines community.", "browser_action": { "default_icon": "images/gtug_icon-16.png", "default_title": "GTUG Philippines Chrome Extension", "popup": "links.html" } }
  6. Creating an Extension • Create a manifest.json • Create additional

    files and include image files (like icon) • Open Chrome Extensions Management Page • Click the + on the Developer Mode • Click the Load unpacked extension... button • Browse to your extension's directory and click OK.
  7. Deployment • Go to the Google Web Store Developer Dashboard

    ◦ Browse to the Google Web Store page and click the Developer Dashboard link at the bottom of the page ◦ https://chrome.google. com/webstore/developer/dashboard • Click Add New Item. • Pay the one-time developer registration fee (if not yet done)
  8. Deployment • Upload a zip file of the extension •

    Add the details of the extension • Publish the extension
  9. Important Links • Chrome Web Store: https://chrome.google.com/webstore • Google Code

    Page: http://code.google.com/chrome/extensions/ • Chromium Blog: http://blog.chromium.org/ • Chromium Extension Mailing List: http://groups.google.com/a/chromium.org/group/chromium-extensions •