Building Chrome Extensions

http://www.w3schools.com/browsers/browsers_stats.asp

Chrome 61.9%

Firefox 23.4%

IE 7.8%

Jan 2015 from w2school

Overview

  • Cross-platform - Windows, Max, Linux
  • Extensions are zip file (.crx) of HTML, JavaScript, CSS and assets
  • Access all the standard JS APIs, plus APIs in the "chrome" namespace

What can extensions do?

Page Actions

Browser Actions

https://chrome.google.com/webstore/launcher 

Chrome App Launcher

Architecture

  • manifest.json  file.
  • Background page: Invisible page that holds your main logic
  • Options page.
  • Operride pages.
  • Popup
  • Content Script:
    • used to interact with content loaded into the browser
  • Additional pages that you can show with chrome.tabs.create() or window.open()

the manifest file

  • name
  • version
  • manifest_version
  • description
  • icons: 16, 48, 128
  • background: scripts
  • browser_action: default_title, default_icon
  • option_page
  • permissions

Chrome APIs

  • alarms
  • bookmarks
  • idle
  • omnibox
  • storage
  • tabs and windows
  • tts (text-to-speech)
  • webRequest (intercept, block, modify in-flight request and analyze responses)

Security

  • Permissions
    • bookmarks
    • clipboardRead/ clipboardWrite
    • contextMenus
    • geolocation
    • Host-matching patterns (for interactinv with pages loaded into the browser)
  • Extensions don't run in incognito windows by default.

Option Pages

  • Allow users to configure your extension.
  • In your manifest file: "options_page": "options.html"
  • Use localStorage to save options
  • Or use chrome.storage:
    • Supports the storage of objects.
    • Data is synced with Chrome Sync.

Misc

  • Absolute paths:
    • chrome-extension://<extensionID>/<pathToFile>
    • @@extension_id
  • Debugger/Dev Tools work with extensions.
  • You can register a specific keyword for the omnibox and receive keyboard events.
  • The "background" permission makes Chrome start at login, and run after windows are closed.

Demo

  • Just a link to Jenkins App
  • YouTube Channels Extension
  • Share to Facebook Group
  • Get your extension on Chrome Web Store - Developer Dashboard

What's next

  • More advanced topics:
    • using storage see if data sync correctly
    • using content script
  • How about automated testing, deploy?

so ... what chrome extension will you build?

Thank you

Reference: Building Your First Chrome Extension

http://youtu.be/pT-b2SpFIWo

Made with Slides.com