Chrome Extensions April 22nd, 2015

  • Chrome extension is just some HTML, CSS and JavaScript that allows you to add some functionality to Chrome through some of the JavaScript APIs Chrome exposes. An extension is basically just a web page that is hosted within Chrome and can access some additional APIs
  • Browser Action extension is a basic Chrome extension
    • manifest.json … sample … 
      {
 "manifest_version": 2,
 
 "name": "GTmetrix Analyzer Plugin",
 "description": "This extension will analyze a page using GTmetrix",
 "version": "1.0",
 
 "browser_action": {
 "default_icon": "icon.png",
 "default_popup": "popup.html"
 },
 
 "permissions": [
 "activeTab"
 ]
}
    • icon.png (19×19)
    • *.html … sample … 
      <!doctype html>
<html>
 <head>
 <title>GTmetrix Analyzer</title>
 <script src="popup.js"></script>
 </head>
 <body>
 <h1>GTmetrix Analyzer</h1>
 <button id="checkPage">Check this page now!</button>
 </body>
</html>
    • *.js … sample … 
      document.addEventListener('DOMContentLoaded', function() {
 var checkPageButton = document.getElementById('checkPage');
 checkPageButton.addEventListener('click', function() {
 
 chrome.tabs.getSelected(null, function(tab) {
 d = document;
 
 var f = d.createElement('form');
 f.action = 'http://gtmetrix.com/analyze.html?bm';
 f.method = 'post';
 var i = d.createElement('input');
 i.type = 'hidden';
 i.name = 'url';
 i.value = tab.url;
 f.appendChild(i);
 d.body.appendChild(f);
 f.submit();
 });
 }, false);
}, false);

Resources