Link: www.sitepoint.com/create-chro…

One of the things I’m most interested in about Chrome is its extensibility. It seems like every possible feature you can think of, there’s a browser add-on that can do it for you.

But have you ever thought about creating your own plugin? Have you ever thought about how difficult the process of creating a plug-in is, or what the requirements are? Well, actually creating a plugin is super easy — even more so than you might think.

In this article, I’m going to show you how to create a basic browser plug-in in 5 minutes – no kidding!

What are we going to create

I’m obsessed with the speed of my own site, SimpleProgrammer.com/, so I often use a site like Gtmetrix.com/ to check the speed of my site to make sure it’s not slowing down.

I also check out other sites THAT I follow regularly to make a comparison.

Wouldn’t it be great if you had a browser plugin that allowed you to use GTmetrix to speed check any site with the click of a button?

I didn’t find one in the Chrome Web store, so this is what we’re going to build today.

What is a Chrome plugin

Before we start building plug-ins, it might be better to have a basic understanding of what a browser plug-in is and how it works.

At its most basic level, a Chrome plugin is a collection of HTML,CSS, and JavaScript files that add functionality to the browser by invoking the JavaScript API provided by Chrome. A browser plugin is basically a web page built into the Chrome browser that has access to some additional APIS.

In this tutorial, I’ll show you how to create a basic Chrome extension: Browser Action. This plugin places a button in the browser toolbar. Clicking the button will display an HTML page and execute some JavaScript scripts.

By using Page Actions, you can also build Chrome plug-ins that only work on certain pages. They can execute scripts in the Background by using Background Pages. With Content Scripts, they can even modify a page that has already been loaded in the browser. But in this article, we will simplify it.

If you want to learn more about what browser plugins can do, see Chrome’s Extensions Documentation.

Step 1: Create the project

Start by creating a project and all the files that our plug-in needs. Create a new folder GTmetrix Extension. We will put all plugin-related files in this new folder. Chrome allows you to load plug-ins from a specific folder.

All browser plug-ins require a manifest file. The Manifest file tells the browser everything the plug-in depends on to load. So let’s create a manifest.json file and put it in the newly created folder. We don’t have to add anything for now.

Next we need an icon for the plugin. This icon only needs a 19px by 19px PNG image. You can modify this using the Google Demo project’s sample icon.

Next we need an HTML page to display when we click on the Browser Action. So we create popup.html and popup.js files in the GTmetrix Extension folder.

Due to security restrictions, we cannot write inline JavaScript code in HTML files in the browser plug-in. So we need to create a separate file to put the JavaScript code in and reference it in the HTML file.

Step 2: Create the manifest file

Now that we have the basic project structure, we need to add the description of the browser plug-in to the manifest file. Open the manifest.json file and enter the following:

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

Most fields in a JSON file can be interpreted literally. Note, however, that the browser_Action field section defines the default icon and the page that will be displayed when we click on the Browser Action.

I also added the Permissions section, specifying the permissions we need to access the activeTab. This must be written in order for us to get the current TAB URL that we can pass to GTmetrix.

Many of Chrome’s apis require specific permissions.

Third cloth: create UI

The next step is to create the UI that will be displayed when the Browser Action is clicked.

Our UI will be very simple, consisting of some text GTmetrix Analyzer and a button that the user clicks to analyze the current page.

Open popup.html and type 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>Copy the code

You should have seen that I’ve introduced the popup.js script into the HTML content, where we’re going to put the logic that’s executed by clicking on the checkPage button.

Step 4: Write the logic

For the final step in creating the plug-in, write the implementation by clicking Check this Page Now! The logic that is executed after the button.

Let’s add a listener for the click event to the checkPage button. When the button is clicked, we need to create a new form that contains the URL of the current page, submit it to GTmetrix, and display the results obtained.

Open the popup.js file and add the following:

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);
Copy the code

I borrowed most of the code from the bookmarking tools available on the GTmetrix site to submit the form.

If you examine the above code, you will see that we registered a click event for the checkPage button. Then, after having the button clicked, we get to the currently selected TAB, and through JavaScript create a form with hidden input boxes that contain the parameters to submit to GTmetrix. We use the current TAB’s URL to tell GTmetrix what to check.

validation

Testing and verifying a plugin in Chrome is very simple. Type Chrome :// Extensions in the Browser TAB to open the extensions page.

Check developer mode on this page to enable us to load unpackaged plug-ins. This allows us to load the plug-in from the folder. Finally, click load unpacked extensions to select the plug-ins folder, or drag and drop the GTmetrix Extension folder to the page to load the plug-ins. You will immediately see the icon of the plugin in the current TAB toolbar.

To test our plugin, go to the site where we want to examine and analyze it with GTmetrics. Then click on our GTmetrix plugin. When the HTML page is displayed, click Check this Page Now! Button, you will immediately see the results of the current page.