Your SlideShare is downloading. ×
  • Like
Chrome Extensions for Hackers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Chrome Extensions for Hackers

  • 981 views
Published

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

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

Talk given at LondonJS 19.

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
981
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Sept 9, 2009Many many extensions
  • 2. STOREchrome.google.com/webstore/ category/extensions DOCS developer.chrome.com/ extensions
  • 3. Manipulate any (set of) pages Provide notifications Deep web app integration
  • 4. Painless Payments for DroidsTim Messerschmidt
  • 5. Auto updating OS independentStep up to chrome apps
  • 6. The manifestManifest.json{      "name":  "Demo  Extension",      "version":  "0.0.1",      "manifest_version":  2  }  Chrome://extensions
  • 7. THE BARE BASICS
  • 8. UI BUILDING BLOCKSBROWSER 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      },      ...  }  
  • 9. UI BUILDING BLOCKSBROWSER ACTIONS Icon Badge Tooltip popup
  • 10. UI BUILDING BLOCKSPAGE 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      },      ...  }    
  • 11. UI BUILDING BLOCKSPAGE ACTIONS Icon Tooltip Popup No badge Not shown until needed
  • 12. There can only be one
  • 13. UI BUILDING BLOCKSDesktop notifications{      "name":  "My  extension",      "manifest_version":  2,      ...      "permissions":  [          "notifications"      ],      ...  }  
  • 14. UI BUILDING BLOCKSDesktop notifications
  • 15. UI BUILDING BLOCKSOptions page{      "name":  "My  extension",      ...      "options_page":  "options.html",      ...  }    
  • 16. UI BUILDING BLOCKSOverride pagesomniboxContext menushtml
  • 17. ADVANCED INTERACTION xhr
  • 18. ADVANCED INTERACTIONpermissions{      "name":  "My  extension",      ...      "permissions":  [          "http://www.google.com/",          "https://www.google.com/",          "notifications"      ],      ...  }    Chrome.* apisdeveloper.chrome.com/extensions/api_index.html
  • 19. ADVANCED INTERACTIONxhrvar  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  attackers  scripts.          var  resp  =  JSON.parse(xhr.responseText);      }  }  xhr.send();  
  • 20. ADVANCED INTERACTION Content scripts
  • 21. ADVANCED INTERACTIONContent scripts{      "name":  "My  extension",      ...      "content_scripts":  [          {              "matches":  ["http://www.google.com/*"],              "css":  ["mystyles.css"],              "js":  ["jquery.js",  "myscript.js"]          }      ],      ...  }  
  • 22. ADVANCED INTERACTIONContent scriptsNo interaction with JS on pageNo access to most chrome.* apis
  • 23. ADVANCED INTERACTION CONTENT   INLINE  JS   SCRIPT   DOM   Shared dom with different scopes
  • 24. ADVANCED INTERACTIONContent scriptsvar  element  =  document.createElement("script");    element.type  =  "text/javascript";  element.text  =  "makeCall();";    document.body.appendChild(element);  
  • 25. ADVANCED INTERACTION Background pages
  • 26. ADVANCED INTERACTIONBackground/event pages{      "name":  "My  extension",      ...      "background":  {          "scripts":  [”eventpage.js"],          "persistent":  false      },      ...  }  
  • 27. ADVANCED INTERACTIONEventpage.jschrome.browserAction.onClicked.addListener(function(tab)  {      //  do  something  cool  });  Chrome.* apisdeveloper.chrome.com/extensions/api_index.html
  • 28. ADVANCED INTERACTION STORAGE
  • 29. ADVANCED INTERACTIONchrome.storage  vs  chrome.localStorage   synced  vs  not  synced   type  safe  vs  not  type  safe   async  vs  sync  
  • 30. Advanced interaction messaging
  • 31. ADVANCED INTERACTIONmessagingcontentscript.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);      });  });  
  • 32. ADVANCED INTERACTIONmessagingchrome.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 Content scriptsOptions pages Background pages
  • 33. Advanced interaction deployment
  • 34. Advanced interactionChrome://extensionsDon’t use “pack extension”
  • 35. Advanced interactionchrome.google.com/webstore/developer/dashboardZip + uploadOne off $5 signup fee
  • 36. DOCS developer.chrome.com/ extensions Gemrubygems.org/gems/crxmake