DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Create Your Own Browser Extension
Ahmet
Ahmet

Posted on

Create Your Own Browser Extension

Hello Dev.to πŸ––

This is my first article on this platform. Please enjoy your reading and see you on next articles πŸ™‚

What is an extension?

Extensions are small software that runs on browsers and provides additional features to browsers and websites. It is very easily accessible in terms of user experience. Also, it is very easy to develop for software developers, for these reasons the popularity of extensions is constantly increasing.

Let's build step by step

In this article, we will make a very small and simple plugin that will find the IP address we use. We will use the Ipify API for get the IP information.

1- Manifest.json file

We start our project by first creating a folder. The first file we will necessarily add to this folder will be manifest.json. This file will be a guide file like the contents of our plugin.

{
 "name": "IP Finder",
 "version": "1.0",
 "description": "Find your ip with this extension",
 "manifest_version": 3
}
Enter fullscreen mode Exit fullscreen mode
  • name => Name of extension
  • version => Version of extension
  • description => Description of extension
  • manifest_version => The manifest version that we will use in the extension

The manifest.json file is sufficient to create an extension. You can start testing your extension after enabling developer mode of your browser πŸ‘

2- Enabling developer mode on the browser

To test your plugin, you need to activate developer mode on your browser. You can find in the (chrome://extensions) section of your browser.
Enabling developer mode

After this step, the Load Unpacked button will appear on your screen which you can install your plugin. Now select your extension folder and start testing.

3- Plugin view and functionality

We will use HTML and Js to create the overview and functionality of our extension. Firstly, create app.js and app.html files to project. Then introduce these files to manifest file so that we can use them.

{
  "name": "IP Finder",
  "version": "1.0",
  "description": "Find your ip with this extension",
  "manifest_version": 3,
  "web_accessible_resources":[
    {
      "matches":[
        "<all_urls>"
      ],
      "resources": [
        "app.js"
      ]
    }
  ],
  "action": {
    "default_popup": "app.html"
  }
}
Enter fullscreen mode Exit fullscreen mode
  • matches => The extension will work in case of which urls you have
  • resources => Source files to create the extension action
  • default_popup => HTML file that will create the general interface of the extension

We will use HTML for the extension's interface. Create a button to trigger the API for pulling IP information into the app.html file, also create a paragraph element to reflect the returned result on the screen. You can add style to the body element for the size of the plugin.

<!doctype html>
<html lang="en">
  <head>
    <style>
        body{min-width: 400px;}
    </style>
  </head>
  <body>
    <h1>Find My IP</h1>
    <p id="result"></p>
    <button id="find">Find</button>
    <script src="app.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

At the app.js file, create a click function for the button. In the function, create a GET request and send this request to the API. After the request fetch this returned JSON response and print the IP information on the screen.

document.getElementById("find").onclick = function() {
    // Create Request
    let xmlHttp = new XMLHttpRequest();

    // Request to ipify for ip information
    xmlHttp.open( "GET", "https://api.ipify.org?format=json", false );
    xmlHttp.send( null );

    try{
        // Cast request response to JSON object
        let obj = JSON.parse(xmlHttp.responseText);
        // Display IP information to our extension
        document.getElementById("result").innerHTML = obj.ip;
    }catch(e){
        // Display error information to our extension
        document.getElementById("result").innerHTML = "An Error Occurred";
    }
};
Enter fullscreen mode Exit fullscreen mode

⚠️ Finally, you made an update on the plugin, source codes will not update dynamically. So, in case of a change, don't forget to refresh the source code on the extensions page.
Refresh extension

For the full code Github ahmettkartal

Top comments (0)

Super Useful CSS Resources

>> Check out this classic DEV post <<