chrome extensions for hackers

43

Upload: cristiano-betta

Post on 17-May-2015

1.074 views

Category:

Technology


2 download

DESCRIPTION

Chrome Extensions are easy to write and all they take are some HTML, CSS and JS skills. Talk given at LondonJS 19.

TRANSCRIPT

Page 1: Chrome Extensions for Hackers
Page 2: Chrome Extensions for Hackers

Sept 9, 2009 Many many extensions

Page 3: Chrome Extensions for Hackers

DOCS developer.chrome.com/

extensions

STORE chrome.google.com/webstore/

category/extensions

Page 4: Chrome Extensions for Hackers

Manipulate any (set of) pages

Provide notifications

Deep web app integration

Page 5: Chrome Extensions for Hackers

Painless Payments for Droids Tim Messerschmidt

Page 6: Chrome Extensions for Hackers

Auto updating

OS independent

Step up to chrome apps

Page 7: Chrome Extensions for Hackers
Page 8: Chrome Extensions for Hackers

The manifest

Manifest.json {      "name":  "Demo  Extension",      "version":  "0.0.1",      "manifest_version":  2  }  

Chrome://extensions

Page 9: Chrome Extensions for Hackers

THE BARE BASICS

Page 10: Chrome Extensions for Hackers
Page 11: Chrome Extensions for Hackers

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      },      ...  }  

Page 12: Chrome Extensions for Hackers

UI BUILDING BLOCKS

BROWSER ACTIONS

Icon Badge Tooltip popup

Page 13: Chrome Extensions for Hackers

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      },      ...  }    

Page 14: Chrome Extensions for Hackers

UI BUILDING BLOCKS

PAGE ACTIONS Icon Tooltip Popup No badge Not shown until needed

Page 15: Chrome Extensions for Hackers

There can only be one

Page 16: Chrome Extensions for Hackers

UI BUILDING BLOCKS

Desktop notifications {      "name":  "My  extension",      "manifest_version":  2,      ...      "permissions":  [          "notifications"      ],      ...  }  

Page 17: Chrome Extensions for Hackers

UI BUILDING BLOCKS

Desktop notifications

Page 18: Chrome Extensions for Hackers

UI BUILDING BLOCKS

Options page {      "name":  "My  extension",      ...      "options_page":  "options.html",      ...  }    

Page 19: Chrome Extensions for Hackers

UI BUILDING BLOCKS

Override pages

omnibox

Context menus

html

Page 20: Chrome Extensions for Hackers
Page 21: Chrome Extensions for Hackers

ADVANCED INTERACTION

xhr

Page 22: Chrome Extensions for Hackers

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

Page 23: Chrome Extensions for Hackers

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();  

Page 24: Chrome Extensions for Hackers

ADVANCED INTERACTION

Content scripts

Page 25: Chrome Extensions for Hackers

ADVANCED INTERACTION

Content scripts

{      "name":  "My  extension",      ...      "content_scripts":  [          {              "matches":  ["http://www.google.com/*"],              "css":  ["mystyles.css"],              "js":  ["jquery.js",  "myscript.js"]          }      ],      ...  }  

Page 26: Chrome Extensions for Hackers

ADVANCED INTERACTION

Content scripts

No interaction with JS on page

No access to most chrome.* apis

Page 27: Chrome Extensions for Hackers

ADVANCED INTERACTION

DOM  

CONTENT  SCRIPT   INLINE  JS  

Shared dom with different scopes

Page 28: Chrome Extensions for Hackers

ADVANCED INTERACTION

Content scripts

var  element  =  document.createElement("script");    element.type  =  "text/javascript";  element.text  =  "makeCall();";    document.body.appendChild(element);  

Page 29: Chrome Extensions for Hackers

ADVANCED INTERACTION

Background pages

Page 30: Chrome Extensions for Hackers

ADVANCED INTERACTION

Background/event pages

{      "name":  "My  extension",      ...      "background":  {          "scripts":  [”eventpage.js"],          "persistent":  false      },      ...  }  

Page 31: Chrome Extensions for Hackers

ADVANCED INTERACTION

Eventpage.js

chrome.browserAction.onClicked.addListener(function(tab)  {      //  do  something  cool  });  

Chrome.* apis developer.chrome.com/extensions/api_index.html

Page 32: Chrome Extensions for Hackers

ADVANCED INTERACTION

STORAGE

Page 33: Chrome Extensions for Hackers

ADVANCED INTERACTION

chrome.storage  vs  chrome.localStorage  

synced  vs  not  synced  

type  safe  vs  not  type  safe  

async  vs  sync  

Page 34: Chrome Extensions for Hackers
Page 35: Chrome Extensions for Hackers

Advanced interaction

messaging

Page 36: Chrome Extensions for Hackers

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);      });  });  

Page 37: Chrome Extensions for Hackers

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

Page 38: Chrome Extensions for Hackers

Advanced interaction

deployment

Page 39: Chrome Extensions for Hackers

Advanced interaction

Chrome://extensions

Don’t use “pack extension”

Page 40: Chrome Extensions for Hackers

Advanced interaction

chrome.google.com/webstore/developer/dashboard

Zip + upload

One off $5 signup fee

Page 41: Chrome Extensions for Hackers
Page 42: Chrome Extensions for Hackers

DOCS developer.chrome.com/

extensions

Gem rubygems.org/gems/crxmake

Page 43: Chrome Extensions for Hackers