IP and Country bởi Raj Udash

Below are the Technical Details and Developer Comments for the "IP and Country" Firefox add-on, tailored to provide a clear and comprehensive overview of its implementation and functionality, in line with Mozilla’s add-on submission requirements and the provided context from similar add-ons. This will include technical specifications, dependencies, and notes from the developer’s perspective, addressing the add-on’s design and considerations for reviewers.

Technical Details for IP and Country Firefox Add-on
Add-on Name: IP and Country

Version: 1.0

Manifest Version: 2

Compatibility: Firefox 60 and later (WebExtensions API compatible)

Permissions:

activeTab: Allows access to the current tab for interaction with the popup.
https://api.ipgeolocation.io/*: Permits secure API requests to the ipgeolocation.io service to fetch IP, country, and ISP data.

Size: Approximately 50 KB (including manifest.json, popup.html, popup.js, popup.css, and icon.png).

Dependencies:
Bootstrap 5.3.3: Included via CDN (https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css) for styling the popup with a modern, dark grey theme. No local dependencies are included to keep the add-on lightweight.
ipgeolocation.io API: Used to fetch the user’s IP address, country name, country flag URL, and ISP information. Requires a valid API key (free tier available). API requests are made over HTTPS for security.

Functionality:
Displays a compact popup when the user clicks the toolbar icon, showing:

The user’s IP address.
The country name with an inline flag image.
The Internet Service Provider (ISP) name.

Data is fetched in real-time from the ipgeolocation.io API when the popup is opened and is displayed only within the popup.
No data is stored locally or remotely, and no additional user information (e.g., browsing history, cookies) is collected.

Technical Implementation:
HTML (popup.html): Structured with Bootstrap 5 classes for a dark grey, card-based layout. Uses <p> elements with card-text for IP, country, and ISP, with the flag image (<img id="flag">) styled inline with the country name.
CSS (popup.css): Custom styles override Bootstrap defaults to ensure a compact 250px-wide popup with a 0.9rem flag height for inline alignment. Uses modern system fonts (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, etc.) for a clean look.
JavaScript (popup.js): Uses the Fetch API to make HTTPS requests to ipgeolocation.io. Updates DOM elements (<span id="ip-address">, <span id="country">, <span id="isp">, <img id="flag">) with API response data. Sets display: inline-block on the flag to ensure inline alignment with the country name.
Icon: A 48x48 pixel icon.png is included for the toolbar button.