Monday, September 5, 2016

What is Chrome extension and how to create simple Chrome extension?

What are extensions?

Extensions are small software programs that can modify and enhance the functionality of the Chrome browser. You write them using web technologies such as HTML, JavaScript, and CSS.
Extensions have little to no user interface. Extensions bundle all their files into a single file that the user downloads and installs. This bundling means that, unlike ordinary web apps, extensions don't need to depend on content from the web. You can distribute your extension using the Chrome Developer Dashboard to publish to the Chrome Web Store.

How to make chrome extension?

Step 1:
Let’s start by creating a new directory that we’ll call “website analyzer”. All Chrome extensions require a manifest file. The Manifest file tells Chrome everything it needs to know to properly load up the extension in Chrome. So we’ll create a manifest.json file and put it into the folder we created.
Put this code into manifest.json.


{
"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"
]
}



Step 2: 
Create a popup.html file and a popup.js file in our “website analyzer” directory.

Open up the popup.html page and add the following:


<!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>



Step 3: 
Open up the popup.js file and add the following code:


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);


Now go to chrome/extension. Check “Developer mode” to enable loading unpacked extensions.  This will allow you to load your extension from a folder. Finally, click “Load unpacked extension” or simply drag the your folder onto the page to load up the extension. You should immediately see the extension show up as a Browser Action with your icon in the toolbar window of the current tab.
To test out the extension, navigate to a page you want to test with GTmetrics. Then, go ahead and click the icon for our GTmetrix extension. When the HTML page comes up, click “Check this page now!” and you should immediately see the request and results from the current page being displayed.

Check this out

Post a Comment