Upload
cristiano-betta
View
1.069
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Chrome Extensions are easy to write and all they take are some HTML, CSS and JS skills. Talk given at LondonJS 19.
Citation preview
Sept 9, 2009 Many many extensions
DOCS developer.chrome.com/
extensions
STORE chrome.google.com/webstore/
category/extensions
Manipulate any (set of) pages
Provide notifications
Deep web app integration
Painless Payments for Droids Tim Messerschmidt
Auto updating
OS independent
Step up to chrome apps
The manifest
Manifest.json { "name": "Demo Extension", "version": "0.0.1", "manifest_version": 2 }
Chrome://extensions
THE BARE BASICS
UI BUILDING BLOCKS
BROWSER ACTIONS { "name": "My extension", ... "browser_action": { "default_icon": { // optional "19": "images/icon19.png", // optional "38": "images/icon38.png" // optional }, "default_title": "Google Mail", // optional "default_popup": "popup.html" // optional }, ... }
UI BUILDING BLOCKS
BROWSER ACTIONS
Icon Badge Tooltip popup
UI BUILDING BLOCKS
PAGE ACTIONS { "name": "My extension", ... "page_action": { "default_icon": { // optional "19": "images/icon19.png", // optional "38": "images/icon38.png" // optional }, "default_title": "Google Mail", // optional "default_popup": "popup.html" // optional }, ... }
UI BUILDING BLOCKS
PAGE ACTIONS Icon Tooltip Popup No badge Not shown until needed
There can only be one
UI BUILDING BLOCKS
Desktop notifications { "name": "My extension", "manifest_version": 2, ... "permissions": [ "notifications" ], ... }
UI BUILDING BLOCKS
Desktop notifications
UI BUILDING BLOCKS
Options page { "name": "My extension", ... "options_page": "options.html", ... }
UI BUILDING BLOCKS
Override pages
omnibox
Context menus
html
ADVANCED INTERACTION
xhr
ADVANCED INTERACTION
permissions { "name": "My extension", ... "permissions": [ "http://www.google.com/", "https://www.google.com/", "notifications" ], ... }
Chrome.* apis developer.chrome.com/extensions/api_index.html
ADVANCED INTERACTION
xhr var xhr = new XMLHttpRequest(); xhr.open("GET", "http://api.example.com/data.json", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { // JSON.parse does not evaluate the attacker's scripts. var resp = JSON.parse(xhr.responseText); } } xhr.send();
ADVANCED INTERACTION
Content scripts
ADVANCED INTERACTION
Content scripts
{ "name": "My extension", ... "content_scripts": [ { "matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"] } ], ... }
ADVANCED INTERACTION
Content scripts
No interaction with JS on page
No access to most chrome.* apis
ADVANCED INTERACTION
DOM
CONTENT SCRIPT INLINE JS
Shared dom with different scopes
ADVANCED INTERACTION
Content scripts
var element = document.createElement("script"); element.type = "text/javascript"; element.text = "makeCall();"; document.body.appendChild(element);
ADVANCED INTERACTION
Background pages
ADVANCED INTERACTION
Background/event pages
{ "name": "My extension", ... "background": { "scripts": [”eventpage.js"], "persistent": false }, ... }
ADVANCED INTERACTION
Eventpage.js
chrome.browserAction.onClicked.addListener(function(tab) { // do something cool });
Chrome.* apis developer.chrome.com/extensions/api_index.html
ADVANCED INTERACTION
STORAGE
ADVANCED INTERACTION
chrome.storage vs chrome.localStorage
synced vs not synced
type safe vs not type safe
async vs sync
Advanced interaction
messaging
ADVANCED INTERACTION
messaging contentscript.js ================ chrome.runtime.sendMessage({greeting: "hello"}, function(response) { console.log(response.farewell); });
background.html =============== chrome.tabs.getSelected(null, function(tab) { chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) { console.log(response.farewell); }); });
ADVANCED INTERACTION
messaging chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension"); if (request.greeting == "hello") sendResponse({farewell: "goodbye"}); });
popups Options pages
Content scripts Background pages
Advanced interaction
deployment
Advanced interaction
Chrome://extensions
Don’t use “pack extension”
Advanced interaction
chrome.google.com/webstore/developer/dashboard
Zip + upload
One off $5 signup fee
DOCS developer.chrome.com/
extensions
Gem rubygems.org/gems/crxmake