# Create An Extension/Plugin For Firefox and Chrome Browser

Below steps to be followed for creating  Firefox extension
1. Create a Folder, preferably with the name as the  name  of extension(without space, so that useful for path navigation)
2. Create  a File "manifest.json" inside the  folder.
```
    >touch manifest.json
```
3. Add below code
```
  {
  
    "manifest_version": 2,
    "name": "Borderify",
    "version": "1.0",
  
    "description": "Adds a red border to all webpages matching mozilla.org.",
  
    "icons": {
      "48": "icons/test.png" 
    },
  
    "content_scripts": [
      {
        "matches": ["*://*.github.com/*"], 
        "js": ["github_test.js"] 
      }
    ]
  
  }
```

Below 3 keys are important, contains meta data of our plugin
- manifest_version (This is version of this manifest.json file used by the extension)
- name (This is our extension name)
- version (This is version of the extension)
- description is optional (can be upto 132 characters for Firefox and Chrome)
- icons is optional
> - key is image size in px, value is the path where we stored the image(48px * 48px is recommended size)
- content_scripts:
> - This will tell Firefox to load a script into Web pages whose URL matches a specific pattern. 
- In this case, we're asking Firefox to load a script called "github_test.js" into all HTTP or HTTPS pages served from "github.com" or any of its subdomains.


4. Create file  "github_test.js" inside the root directory 
```
document.body.style.border = "5px solid red"; //This will add red border for  the webpage  we asked to inject this property in content_scripts
```
  - This script will be loaded into the pages that match the pattern given in the content_scripts in manifest.json key. 
  - The script has direct access to the document, like scripts loaded by the page itself.
5. In Firefox, open "about:debugging"
6. Select "This Firefox" option in the left pane.
7. Click "Load Temporary Add-on" button.
8. Select the manifest.json file of your project
9. Now  the extension will be installed in your Firefox browser.
10. To load the plugin in Google  chrome, navigate to "chrome://extensions/", toggle to Developer Mode, and select the plugin folder.