Sometimes we need to fill up the address form that requires phone, city, postal code, etc. We struggle to remember our postal code. Every time
manually searching for an address to fill out a form online is a hassle.
My Address Chrome extension shows clients’ address information including postal code and more based on their IP address. In the last blog, I wrote about the use case of IP address tracking. And I have developed a Chrome extension using IP tracking. For fun, I developed this extension using HTML, CSS, and JS.
To obtain the client’s IP address, I used jsonip, and to obtain the information about the IP address, ipapi have used.
manifest.json File
The manifest.json file provides information about the configuration and features of an extension, including metadata such as the name, description, and version.
The ‘action’ key in the manifest has two properties: ‘default_icon’, which specifies the icon for the action, and ‘default_popup’, which determines the HTML page that appears as a popup when the user clicks the icon.
{
"manifest_version": 3,
"name": "My Address",
"version": "1.0",
"description": "My Address extension provide your country name, calling code, postal code, timezone. We visit abandant website for registration, sometimes we need to provide information about us and we search for our postal code, calling code etc. My Address extension can solve your problem.",
"icons":{
"16": "images/icon1.png",
"32": "images/icon1.png"
},
"action": {
"default_popup": "myAddress.html",
"default_icon": {
"16": "images/icon1.png",
"32": "images/icon1.png"
}
},
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://developer.chrome.com/docs/extensions/*",
"https://developer.chrome.com/docs/webstore/*"
]
}
]
}
content.js File
The content.js file contains the JavaScript code for the extension. During development, I used internal js, which resulted in an error when loading the folder unpacked. This error was due to a violation of Chrome extension rules. After fetching the jsonip API, the ipInfo function was called, which in turn called the ipapi to retrieve information. The retrieved content was assigned to an HTML element, and this element was appended to a container.
let ip;
// get public ip address of client
fetch('https://jsonip.com/')
.then(res => res.json())
.then(async function ipCall(data) {
ip = await data.ip;
ipInfo(ip);
})
// get client's public ip information
function ipInfo(ip) {
const url = `https://ipapi.co/${ip}/json/`;
fetch(url)
.then(res => res.json())
.then(data => {
console.log('hello', data)
// create element
let country = document.createElement("li");
let city = document.createElement("li");
let postal = document.createElement("li");
let region = document.createElement("li");
let countryCode = document.createElement("li");
let countryCallingCode = document.createElement("li");
let img = document.createElement("img");
// assign content
country.innerText = "Country: " + data.country_name;
city.innerText = "City: " + data.city;
postal.innerText = "Postal Code: " + data.postal;
region.innerText = "Region: " + data.region;
countryCode.innerText = "Country Code: " + data.country_code;
countryCallingCode.innerText = "Country Calling Code: " + data.country_calling_code;
img.src = `https://ipapi.co/static/images/flags/${(data?.country_code).toLowerCase()}.png`;
// append list to container
let flag = document.getElementById("flag");
flag.appendChild(img);
let listContainer = document.getElementById("details-list-container");
listContainer.appendChild(country);
listContainer.appendChild(city);
listContainer.appendChild(postal);
listContainer.appendChild(region);
listContainer.appendChild(countryCode);
listContainer.appendChild(countryCallingCode);
let loader = document.getElementById("loader");
loader.style.display = "none";
})
}
myAddress.html: It contains structure and css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Address</title>
<style>
.address-body {
/* padding: 15px; */
min-width: 300px;
background-color: #3C4B57;
color: aqua;
min-height: 300px;
border-radius: 5px;
}
.flag-container {
text-align: center;
}
ul {
list-style-type: none;
font-size: 16px;
font-weight: 700;
/* text-align: center; */
}
/* loader */
html {
height: 100%;
}
body {
background-image: radial-gradient(circle farthest-corner at center, #3C4B57 0%, #1C262B 100%);
}
.loader {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid #EFEFFA;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid #EFEFFA;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid #EFEFFA;
}
@keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
</style>
</head>
<body class="address-body">
<div>
<div class="flag-container">
<h2>My Address</h2>
<div id="flag">
</div>
</div>
<ul id="details-list-container">
</ul>
</div>
</body>
<!-- loader -->
<div id="loader" class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
<script src="./scripts/content.js">
</script>
</html>
Note
During development, use external js. Internal js violate the chrome extension rules.
Summary
The blog discusses the challenges of remembering postal codes and manually searching for address information online. The post presents a solution in the form of the “My Address” Chrome extension, which uses IP tracking to retrieve clients’ address information, including their postal code. The blog goes into detail about the development of the extension using HTML, CSS, and JS, and explains how jsonip and ipapi.com were used to obtain IP address information. The blog also explains the role of the manifest.json and content.js files in configuring and managing the extension.
Github### source code
This article is written for learning purposes. So please if I made any mistake, let me know and any feedback will be highly appreciated.
Top comments (0)