Tags

, , , , , , ,

To create a new chrome extension, we need to have the following files in a new folder;
. manifest.json
. associated images
. associated files (js, active pages, static pages etc..)

Sample extension :

manifest.json
{
  “name”: “Starting an app”,
  “version”: “1.0”,
  “manifest_version”: 2,
  “description”: “The second extension that I made.”,
  “browser_action”: {
    “default_icon”: “icon.png”,
    “default_popup”: “popup.html”
  }
}

popup.html
<!doctype html>
<html>
  <head>
    <title>Getting Started an app </title>
    <style>
      body {
        min-width:357px;
        overflow-x:hidden;
      }
      img {
        margin:5px;
        border:2px solid black;
        vertical-align:middle;
        width:75px;
        height:75px;
      }
    </style>
    <!– JavaScript and HTML must be in separate files for security. –>
    <script src=”popup1.js”></script>
  </head>
  <body>
        <div> Hello World !! </div>
        <div> <a href=”javascript:void(0)” onclick=”abc();”>Click here</a> to demonstrate alert !!!</div>
  </body>
</html>

popup1.js
function abc(){
        alert(“Clicked !!!”);
}

How to run the extension ?

To run the extension, you need to have all the files in one folder. Next thing to do is a slight  tweak in the Chrome settings;

Type chrome://flags , in the chrome browser. From the list enable “Experimental Extension APIs“, and the restart the browser.

Next click on Settings >> Tools >> Extensions

From here, select the folder we have now created and click ok. Now the image we have given for the extension will be visible on the chrome tool bar when a new window is opened !!

Advertisements