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
}
- 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.
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"
}
}
- 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>
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";
}
};
⚠️ 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.
For the full code Github ahmettkartal
Top comments (0)