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