Browser extention in one minute

 

 

Hi guys...

TODAY I AM GOING TO TALK ABOUT HOW TO CREATE BROWSER EXTENSIONS (ADD-ONS)

Before you go ahead I hope you are familiar with HTML,CSS, and JAVASCRIPT

1.So What is is an extension ?

An extension is nothing but a web-page so if you can create a website then you can create an extension

2.Architecture of an extension

So as I say it is web page but we need to configure some thing that tells  to Firefox(or chrome) some information like

• Name - Name of the extension

• Version - Version of the extension

• Background - background process of your extension

• Browser_action - What happen when you click on small icon of extension

• so and so

These information are stored in file called manifest.json

Here I have posted example manifest.json file from mozilla.org

 

       

 {
  "applications": {
    "gecko": {
      "id": "addon@example.com",
      "strict_min_version": "42.0"
    }
  },

  "background": {
    "scripts": ["jquery.js", "my-background.js"],
    "page": "my-background.html"
  },

  "browser_action": {
    "default_icon": {
      "19": "button/geo-19.png",
      "38": "button/geo-38.png"
    },
    "default_title": "Whereami?",
    "default_popup": "popup/geo.html"
  },

  "commands": {
    "toggle-feature": {
      "suggested_key": {
        "default": "Ctrl+Shift+Y",
        "linux": "Ctrl+Shift+U"
      },
      "description": "Send a 'toggle-feature' event"
    }
  },

  "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",

  "content_scripts": [
    {
      "exclude_matches": ["*://developer.mozilla.org/*"],
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }
  ],

  "default_locale": "en",

  "description": "...",

  "icons": {
    "48": "icon.png",
    "96": "icon@2x.png"
  },

  "manifest_version": 2,

  "name": "...",

  "page_action": {
    "default_icon": {
      "19": "button/geo-19.png",
      "38": "button/geo-38.png"
    },
    "default_title": "Whereami?",
    "default_popup": "popup/geo.html"
  },

  "permissions": ["webNavigation"],

  "version": "0.1",

  "web_accessible_resources": ["images/my-image.png"]
}

       

Just look Don't get panic Now we know some essential files in a extension

1. manifest.json
2. .html
3. .css file
4. .js file

Let's Create first extension yeah baby....

manifest.json

       

            {
    "manifest_version":2,
    "name":"hello world",
    "version":"1.0",
    "description":"A hello world app",
    "icons":{
        "128":"icon128.png",
        "48":"icon48.png",
        "16":"icon16.png"
    },
    "browser_action":{
        "default_icon":"icon16.png",
        "default_popup":"popup.html"
    }
}
       
 

icons mean size of icons that have used in extension browser_action:default_popup this means Open a html called poup.html when I click on the extension Now lets create

popup.html

       
 



    
    
    



    

Hello World

A very simple html page now I have added some Jqeury to webpage

       

           $(document).ready(function(){
    $("#input").keyup(function(){
        $("#text").text('Hello '+$("#input").val())
    })
})


       
 

and little bit style....

       

           
h2{
    color: orange;
}
       
 

I a m d o n e

1. Now put all files in to one folder
2. Go to about:debugging in your firefox
3. enable developer mode
4.  Load temporary add on 
5. Chose your manifest.json
6. booom it's work

Make sure your all files are in one folder

 You can get github source code from here 

Okay I hope yall manage to create your first extension so see yaaa