Chrome Extensions for Hackers

Chrome Extensions are easy to write and all they take are some HTML, CSS and JS skills.

Talk given at LondonJS 19.

Transcript

2. Sept 9, 2009 Many many extensions
3. DOCS developer.chrome.com/ extensions STORE chrome.google.com/webstore/ category/extensions
4. Manipulate any (set of) pages Provide notifications Deep web app integration
5. Painless Payments for Droids Tim Messerschmidt
6. Auto updating OS independent Step up to chrome apps
8. The manifest Manifest.json {      "name":  "Demo  Extension",      "version":  "0.0.1",      "manifest_version":  2   }   Chrome://extensions
9. THE BARE BASICS
11. 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      },      ...   }  
12. UI BUILDING BLOCKS BROWSER ACTIONS Icon Badge Tooltip popup
13. 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      },      ...   }    
14. UI BUILDING BLOCKS PAGE ACTIONS Icon Tooltip Popup No badge Not shown until needed
15. There can only be one
16. UI BUILDING BLOCKS Desktop notifications {      "name":  "My  extension",      "manifest_version":  2,      ...      "permissions":  [          "notifications"      ],      ...   }  
17. UI BUILDING BLOCKS Desktop notifications
18. UI BUILDING BLOCKS Options page {      "name":  "My  extension",      ...      "options_page":  "options.html",      ...   }    
19. UI BUILDING BLOCKS Override pages omnibox Context menus html
21. ADVANCED INTERACTION xhr
22. 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
23. 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();  
24. ADVANCED INTERACTION Content scripts
25. ADVANCED INTERACTION Content scripts {      "name":  "My  extension",      ...      "content_scripts":  [          {              "matches":  ["http://www.google.com/*"],              "css":  ["mystyles.css"],              "js":  ["jquery.js",  "myscript.js"]          }      ],      ...   }  
26. ADVANCED INTERACTION Content scripts No interaction with JS on page No access to most chrome.* apis
27. ADVANCED INTERACTION DOM   CONTENT   SCRIPT   INLINE  JS   Shared dom with different scopes
28. ADVANCED INTERACTION Content scripts var  element  =  document.createElement("script");     element.type  =  "text/javascript";   element.text  =  "makeCall();";     document.body.appendChild(element);  
29. ADVANCED INTERACTION Background pages
30. ADVANCED INTERACTION Background/event pages {      "name":  "My  extension",      ...      "background":  {          "scripts":  [”eventpage.js"],          "persistent":  false      },      ...   }  
31. ADVANCED INTERACTION Eventpage.js chrome.browserAction.onClicked.addListener(function(tab)  {      //  do  something  cool   });   Chrome.* apis developer.chrome.com/extensions/api_index.html
32. ADVANCED INTERACTION STORAGE
33. ADVANCED INTERACTION chrome.storage  vs  chrome.localStorage   synced  vs  not  synced   type  safe  vs  not  type  safe   async  vs  sync  
35. Advanced interaction messaging
36. 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);      });   });  
37. 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
38. Advanced interaction deployment
39. Advanced interaction Chrome://extensions Don’t use “pack extension”
40. Advanced interaction chrome.google.com/webstore/developer/ dashboard Zip + upload One off $5 signup fee
42. DOCS developer.chrome.com/ extensions Gem rubygems.org/gems/crxmake