dublinJS-chrome-extension

View Github Repository Open presentation in a new window

KlavierCat

See all presentation from KlavierCat

dublinJS-chrome-extension

0 0

dublinJS-chrome-extension

On Github KlavierCat / dublinJS-chrome-extension

Chrome Extension

Building & Packaging

Panpan Lin Oct. 6th, 2015 @ DublinJS Feb. 17th, 2016 @ FED@IBM

What are Chrome Extensions

Extensions are small software programs that can modify and enhance the functionality of the Chrome browser. You write them using web technologies such as HTML, JavaScript, and CSS.

Extensions bundle all their files into a single file that the user downloads and installs. This bundling means that, unlike ordinary web apps, extensions don't need to depend on content from the web.

Examples

Why build a Chrome extension?

Interact with web pages, servers, browser features with web APIs and chrome.*API Don't need to depend on content from the web Offline support

Structure

~/Library/Application Support/Google/Chrome/Default/Extensions/EXTENSION_ID

manifest.json

{
  // Required
  "manifest_version": 2,
  "name": "My Extension",
  "version": "versionString",

  // Recommended
  "default_locale": "en",
  "description": "A plain text description",
  "icons": {...},

  // Etc...
}

Loading

chrome://extensions developer mode load unpacked extension

Debugging

  • developer mode --> Inspect views
  • manifest.json is only parsed when the extension is loaded, to see your change, click "reload"
  • file reachable via: chrome-extension://extension_id/file
  • reload the currently inspected page from the console: location.reload(true)
  • use some clever script to live reload: GitHub
  • extension ID can changed before packaged, use: @@extension_id

Testing

Packaging: .crx

  • Chrome web store
  • Self packaging
browser plugin - eg. maven command line 
chrome.exe --pack-extension=C:\myext --pack-extension-key=C:\myext.pem

Distribute

Chrome web store Enterprise policy
  • group policy
  • master_preferences
Developer mode

inline-installation

Put this in your <head> tag:

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/itemID">

Triggering inline installation:

chrome.webstore.install(url, successCallback, failureCallback)

Checking if the extension is installed:

if (chrome.app.isInstalled) {
  document.getElementById('install-button').style.display = 'none';
}

Resources

Chrome Apps & Extensions Developer Tool Documentations from Chrome Yeoman generator for Chrome Extension
Chrome Extension Building & Packaging Panpan Lin Oct. 6th, 2015 @ DublinJS Feb. 17th, 2016 @ FED@IBM