Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Chrome Extensions for Hackers

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.

Cristiano Betta

April 15, 2013
Tweet

More Decks by Cristiano Betta

Other Decks in Technology

Transcript

  1. The manifest Manifest.json {      "name":  "Demo  Extension",  

       "version":  "0.0.1",      "manifest_version":  2   }   Chrome://extensions
  2. 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      },      ...   }  
  3. 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      },      ...   }    
  4. UI BUILDING BLOCKS Desktop notifications {      "name":  "My

     extension",      "manifest_version":  2,      ...      "permissions":  [          "notifications"      ],      ...   }  
  5. UI BUILDING BLOCKS Options page {      "name":  "My

     extension",      ...      "options_page":  "options.html",      ...   }    
  6. 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
  7. 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();  
  8. ADVANCED INTERACTION Content scripts {      "name":  "My  extension",

         ...      "content_scripts":  [          {              "matches":  ["http://www.google.com/*"],              "css":  ["mystyles.css"],              "js":  ["jquery.js",  "myscript.js"]          }      ],      ...   }  
  9. ADVANCED INTERACTION Content scripts var  element  =  document.createElement("script");    

    element.type  =  "text/javascript";   element.text  =  "makeCall();";     document.body.appendChild(element);  
  10. ADVANCED INTERACTION Background/event pages {      "name":  "My  extension",

         ...      "background":  {          "scripts":  [”eventpage.js"],          "persistent":  false      },      ...   }  
  11. ADVANCED INTERACTION chrome.storage  vs  chrome.localStorage   synced  vs  not  synced

      type  safe  vs  not  type  safe   async  vs  sync  
  12. 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);      });   });  
  13. 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