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.

1. 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.
2. In Firefox, open "about:debugging"
3. Select "This Firefox" option in the left pane.
4. Click "Load Temporary Add-on" button.
5. Select the manifest.json file of your project
6. Now the extension will be installed in your Firefox browser.
7. To load the plugin in Google chrome, navigate to "chrome://extensions/", toggle to Developer Mode, and select the plugin folder.