Building NetPin: An Open-Source Browser Extension for Website Infrastructure Analysis

When you type a URL into your browser and press Enter, a complex web of infrastructure springs to life. Within milliseconds, DNS requests resolve, servers route packets across continents, third-party trackers load, and data exchanges hands. Yet to the average user, and even to many developers in training, this process is invisible. You see the visual webpage, but not the physical infrastructure rendering it.

I built NetPin to bring this hidden layer to light. It is an open-source browser extension that analyzes and visualizes website infrastructure—from server coordinates and DNS records to data-jurisdiction rules and green hosting credentials.

Here is the story of why I built it, how I structured its architecture, the technical challenges I faced, and what I learned along the way.

Why I Built NetPin

I wanted to solve a practical problem. When developers or students want to inspect a website's infrastructure, they usually have to open a terminal, run command-line tools like dig, whois, and traceroute, or paste URLs into external lookup websites.

I wanted to consolidate this data into a single, visual interface. I also wanted to address several key questions that arise when visiting a website:

Where is my data going? Knowing the geographic location of the host server helps users understand which privacy framework or data-jurisdiction guidelines may be relevant to their connection.
What is the environmental footprint? The internet accounts for a significant portion of global electricity use. By checking the Green Web Foundation database, users can see if a server runs on renewable energy.
What third-party trackers are running? Unmasking the scripts that monitor activity gives users back visibility into their privacy.

Beyond making this infrastructure visible, I wanted NetPin to be entirely open source. I believe the best way to master networking and web development is by inspecting working code. By keeping the codebase open, other developers can learn from it, run it locally, and contribute features.

What NetPin Does

NetPin functions as a dashboard and sidekick for website auditing. Once installed, it provides real-time information:

Server Geolocation: Pinpoints the host server's geographic location and coordinates using IP-based lookup.
Latency Visualization: Computes the network latency pathway to show response speed.
Domain Intelligence: Fetches DNS records (A, AAAA, MX, TXT, etc.) and WHOIS registrar details directly.
Sustainability Auditing: Queries the Green Web Foundation API to evaluate the website's carbon footprint score and host sustainability status.
Privacy Audit: Scans for active third-party trackers and blocks them while checking local data protection jurisdictions.

How I Built It

Building a browser extension with modern front-end tools involves a few structural workarounds. I chose a stack consisting of React, Vite, Tailwind CSS, and Leaflet for maps, structured within Chrome's Manifest V3 guidelines.

Browser Extension Architecture

Under Manifest V3, extensions are split into distinct, isolated environments that communicate via message passing:

Background Service Worker (background.js): The engine of the extension. It runs in the background, listens to browser events (like tab switches and web requests), handles API fetching, and manages the local cache. It does not have access to the page DOM or a visual UI.
Extension Popup (popup.html): The clean, glassmorphic dropdown UI that displays when you click the extension icon. It gives an immediate summary of the active site (e.g., green checkmark, geolocation flag, and basic ping).
Dashboard (dashboard.html): A full-page React application that opens in a new tab. It hosts the interactive Leaflet map, lists detailed DNS/WHOIS history logs, and renders advanced visualizations.

Because Chrome kills background service workers when they are idle, I couldn't rely on memory-based state. I used chrome.storage.local to cache audited domain data. When the user opens the popup or the dashboard, the UI queries the storage or sends a message to the background service worker to fetch fresh details.

Collecting Infrastructure Information

Gathering domain intelligence directly from a browser sandbox is restricted by Cross-Origin Resource Sharing (CORS) policies. Web browsers cannot execute low-level UDP/TCP requests for DNS queries or WHOIS (port 43) lookups directly.

To work around this limitation, I leveraged structured APIs:

IP Geolocation: NetPin fetches server IPs and coordinates securely using ip-api.com.
Sustainability check: The background script queries the Green Web Foundation API using the host domain name, determining if the data center uses renewable energy.
WHOIS & DNS queries: Because the browser cannot run raw WHOIS sockets, I utilized API endpoints that query domain registrars and parse the raw text payload into structured JSON.

Visualizing the Data with Leaflet

I wanted the dashboard to feel interactive rather than just presenting a wall of text. I integrated Leaflet and React-Leaflet to render a geographical map.

The map plots a marker at the user's estimated location (retrieved via browser API or public IP) and another at the host server's location. By drawing SVG arcs between the two points, NetPin creates a visual representation of the network path, connecting physical servers to the logical browser session.

Privacy and Tracker Blocking

To detect and block trackers, NetPin leverages Chrome's declarativeNetRequest (DNR) API. Unlike the older Manifest V2 webRequest API, which allowed extensions to block requests programmatically (introducing latency and privacy concerns), Manifest V3 requires extensions to define declarative rule lists.

NetPin checks domain requests against blocklists and uses rules defined in the extension manifest to drop request packets from known tracking networks. The background script monitors blocked request counts and pipes them to the popup to display how many trackers were neutralized on the page.

The Hard Part: Managing Asynchronous State

The biggest engineering challenge was coordinating the asynchronous flow of data without freezing the user interface.

When you navigate to a new site, multiple events fire in parallel: the tab finishes loading, DNS records are resolved, Geolocation metadata is fetched, and carbon audits run. Because these requests take varying amounts of time, handling them naively led to race conditions—such as updating the dashboard with data from the previous tab.

To solve this, I designed a centralized state manager in the background service worker using a promise-based queue:

The service worker listens to chrome.webNavigation.onCompleted to initiate analysis.
It queries the external APIs in parallel using Promise.allSettled to prevent a single slow API call from blocking the entire audit.
Once the payload is complete, it writes the result to chrome.storage.local indexed by the tabId.
The popup and dashboard components subscribe to changes in chrome.storage.local using chrome.storage.onChanged.addListener, updating their states reactively.

This reactive model ensured the UI remained responsive, showing loading placeholders for pending data without halting the extension's rendering thread.

What I Learned

Building NetPin gave me first-hand experience with several technologies and low-level networking concepts:

Manifest V3 Lifecycle: I learned how to structure extension assets, handle permissions, and deal with the transient nature of service workers.
Network Routing & Geography: Working with IP addresses, subnet mapping, and geolocation APIs clarified how global traffic is routed geographically.
CORS & Extension Security: Navigating host permissions, content security policies (CSP), and secure communication channels within Chromium's sandboxed tabs.
Data Visualization: Optimizing Leaflet map markers and paths to render smoothly within a constrained browser utility frame.

Why I Made It Open Source

NetPin is a personal project, but I didn't want it to live silently in a private repository. I made it open source because I want other developers, especially students, to inspect the code.

Understanding web-extension architecture can be confusing due to fragmented documentation. NetPin provides a clean, modern template for a fully styled React-Vite extension using Tailwind CSS and Manifest V3.

Whether you want to learn how message passing works in extensions, look at Leaflet map integrations in React, or see how to design a glassmorphic dark mode, the codebase is free to clone, study, and modify.

Current Status & Installation

NetPin is not currently listed on the Chrome Web Store. It is hosted on GitHub, and you can run it locally in Chrome or any Chromium-based browser (Edge, Brave, Opera) by using the developer workflow:

Clone the repository:

git clone https://github.com/01iamysf/NetPin.git
cd NetPin

Install dependencies:
```
npm install
```
Build the extension:
```
npm run build
```
This compiles the React code and bundles the manifest files into a dist/ directory.
Load the extension into your browser:
- Open Chrome and navigate to chrome://extensions/.
- Toggle the Developer mode switch in the top-right corner.
- Click the Load unpacked button in the top-left corner.
- Select the compiled dist/ folder from the project directory.

Once loaded, the NetPin icon will appear in your extension toolbar, ready for auditing.

What's Next

NetPin is an active project, and there are several areas I want to improve:

Local Database Caching: Moving from transient session storage to a structured IndexedDB log, allowing users to view long-term trends and compare server latencies over time.
Enhanced WHOIS Parsing: Improving regex patterns to parse complex registrar text sheets more reliably across a wider variety of top-level domains (TLDs).
Custom Tracker Rules: Allowing users to whitelist or blacklist domains directly from the dashboard view.

Final Thoughts

Building NetPin taught me that the tools we use daily rely on layers of technology we rarely think about. Visualizing network connections, looking up server origins, and seeing tracking behaviors in real time changes the way you look at the web.

If you are a developer looking to build a browser extension or dive into networking details, I invite you to check out the repository, run the code, and submit pull requests or open issues.

Related Project

Project Website: NetPin Website
GitHub Repository: 01iamysf/NetPin