Go to the profile of Suin Sarbayev
Suin Sarbayev

Google chrome extension guide

Hi today i will show you how to create a google extension, which tints the images on the page

First step of doing this Homework, need to understand what is Chrome Extension

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.

Creating a folder for Extension

at the first step we need to create folder for our extension where all
file which is accord to extension is stored, you can do it by
creating simple folder in any directory you want in my example it is called
“ImageExtension”

STEP 2 Manifest file

First of all you need to create a Manifest.json file
 Inside if Manifest.json file we need to write the next code

{
 “manifest_version”: 2,
 “name”: “Getting started example”,
 “description”: “This extension will change the opacity of images”,
 “version”: “1.0”,
 “browser_action”: {
 “default_popup”: “popup.html”
 },
 “permissions”: [
 “activeTab”,
 “https://ajax.googleapis.com/"
 ]
}

The important part is permissions section that specifies that we need
 to have permission to access the activeTab. This is required in order
 to enable us to get the URL of the current tab to pass on to
 ImageExtension

Step 3: Create the UI

Our user interface is going to be very simple and consist of some text that says “Change all images!,” followed by a button that a user can click to perform the analysis on the current page. Open up the popup.html
page and add the following:

<!doctype html>
<html>
 <head>
     <script src=”popup.js”></script>
 </head>
 <body>
     <form>
       <table>
         <tr>
           <td>Width:</td>
           <td><input type=”text” name=”width”></td>
         </tr>
         <tr>
           <td>Height:</td>
           <td><input type=”text” name=”height”></td>
         </tr>
         <td>Percentage of opacity:</td>
         <td><input type=”text” name=”opacity”></td>
         </tr>
      </table>
 </form>
 <button id=”confirm”>Apply</button>
 <script scr=”popup.js”></script>
 </body>
</html>

STEP 4 Implement the logic

The next step is creating the logic for our extension that will be
tints all images on the page, so we need next function by pressing on the button all images which is i get with loop is changed the values of they heigh width and opacity on those which we get from html values

window.addEventListener(‘load’,function(evt){
 document.getElementById(‘confirm’).addEventListener(‘click’, function(e){
     var width = document.getElementsByName(‘width’)[0].value;
     var heigh = document.getElementsByName(‘height’)[0].value;
     var opacity = document.getElementsByName(‘opacity’)[0].value;
     var execCode = 
         var images = document.body.getElementsByTagName(“img”);
         for(var i = 0; i < images.length; i++) {
             images[i].src.style.height = heigh;
             images[i].src.style.width = width;
             images[i].src.style.opacity = opacity;
         }
    });
 chrome.tabs.executeScript({
 code: execCode
 });
 });
});

STEP 5 Testing our Extension
As well as we done all code, it is very easy to add our extension to
Google Chrome list of extension for that you need to open Google
Chrome and enter “chrome://extensions” in a tab to bring up the extensions page.Once on this page, 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
“ImageExtension” 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.