43

Chrome Extensions for Hackers

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

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