DEV Community

DAPDEV
DAPDEV

Posted on

How I Built a Chrome Extension That Reveals Any Website's Tech Stack in One Click

#javascript #webdev #chrome #api

Ever land on a website and wonder — what's powering this thing? Is that Next.js or Nuxt? Are they running Cloudflare or AWS? What analytics are they using?

I found myself doing this constantly. Inspecting source code, checking HTTP headers, reading meta tags. Every time I visited a competitor's site, a client's project, or just something that loaded fast and looked good, I wanted to know the stack behind it.

So I built a Chrome extension that answers all of those questions with a single click. Here's exactly how I did it, and how you can build one too.

Why I Needed This

As a developer, knowing what technologies a website uses is genuinely useful:

  • Competitive analysis — see what frameworks your competitors chose and why
  • Learning — discover new tools by seeing them in production on real sites
  • Sales qualification — if you sell Shopify services, you need to know who runs Shopify
  • Security audits — identify outdated CMS versions or vulnerable libraries
  • Curiosity — sometimes you just want to know

There are browser extensions that do some of this, but I wanted something that could detect 141+ technologies across 15 categories — not just the obvious ones like jQuery or WordPress, but CDNs, analytics platforms, hosting providers, security headers, and more.

That's when I found the TechDetect API, which does all the heavy lifting through a simple REST endpoint.

The API: One Endpoint, Full Tech Stack

The TechDetect API has a dead-simple interface. You send a GET request with the target URL, and it returns every technology it can identify:

GET https://techdetect.dapdev.tech/detect?url=https://example.com
Enter fullscreen mode Exit fullscreen mode

The response looks like this:

{
  "technologies": [
    {
      "name": "React",
      "version": "18.2.0",
      "confidence": 100,
      "categories": ["JavaScript frameworks"]
    },
    {
      "name": "Cloudflare",
      "confidence": 100,
      "categories": ["CDN"]
    },
    {
      "name": "Google Analytics",
      "confidence": 95,
      "categories": ["Analytics"]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Each detected technology comes with a confidence score, version (when detectable), and categories. That's everything you need to build a useful extension popup.

Building the Chrome Extension

The extension uses Manifest V3 (Chrome's current extension platform) and has four core files:

techdetect-chrome-extension/
├── manifest.json      # Extension configuration
├── popup.html         # The popup UI
├── popup.js           # API calls and rendering logic
├── popup.css          # Dark theme styling
├── options.html       # Settings page for API key
├── options.js         # Settings logic
├── background.js      # Service worker
└── icons/             # Extension icons
Enter fullscreen mode Exit fullscreen mode

Step 1: The Manifest

The manifest is straightforward. We need activeTab to read the current tab's URL, and storage to save the API key:

{
  "manifest_version": 3,
  "name": "TechDetect - Website Technology Detector",
  "version": "1.0.0",
  "description": "Detect the technology stack of any website with a single click.",
  "permissions": ["activeTab", "storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "options_page": "options.html",
  "background": {
    "service_worker": "background.js"
  }
}
Enter fullscreen mode Exit fullscreen mode

Notice we're only requesting two permissions — activeTab and storage. No broad host permissions, no content script injection. This keeps the extension lightweight and trustworthy.

Step 2: The Popup Logic (popup.js)

This is where the magic happens. When the user clicks the extension icon, we:

  1. Get the current tab's URL
  2. Fetch the API key from Chrome storage
  3. Call the TechDetect API
  4. Render the results as cards with confidence bars

Here's the core detection function:

const detect = async () => {
  hideAll();
  show(statusEl);

  try {
    const apiUrl = `https://techdetect.dapdev.tech/detect?url=${encodeURIComponent(currentUrl)}`;
    const response = await fetch(apiUrl, {
      method: "GET",
      headers: {
        "X-API-Key": apiKey,
      },
    });

    if (!response.ok) {
      throw new Error(`API returned ${response.status}: ${response.statusText}`);
    }

    const data = await response.json();
    const technologies = data.technologies || data.results || data || [];

    hideAll();

    if (!Array.isArray(technologies) || technologies.length === 0) {
      show(emptyEl);
      return;
    }

    renderResults(technologies);
    show(resultsEl);
  } catch (err) {
    hideAll();
    show(errorEl);
    errorMsg.textContent = err.message || "Failed to detect technologies.";
  }
};
Enter fullscreen mode Exit fullscreen mode

A few things worth pointing out:

  • We encodeURIComponent the target URL to handle special characters
  • The API key is sent via the X-API-Key header
  • We handle multiple possible response shapes (data.technologies, data.results, or the raw array) for flexibility
  • Error handling shows a retry button so users can try again without reopening the popup

Step 3: Rendering the Results

Each technology gets rendered as a card with the name, version, categories, and a color-coded confidence bar:

function renderResults(techs) {
  techs.sort((a, b) => (b.confidence || 0) - (a.confidence || 0));

  let html = `
    <div class="results-header">
      <h2>Detected Technologies</h2>
      <span class="results-count">${techs.length} found</span>
    </div>
  `;

  for (const tech of techs) {
    const name = tech.name || tech.technology || "Unknown";
    const version = tech.version || "";
    const confidence = Math.round(tech.confidence || 0);
    const categories = tech.categories || tech.category || [];
    const catArray = Array.isArray(categories) ? categories : [categories].filter(Boolean);

    let confClass = "high";
    if (confidence < 50) confClass = "low";
    else if (confidence < 80) confClass = "medium";

    const catHtml = catArray
      .map(c => `<span class="category-tag">${escapeHtml(String(c))}</span>`)
      .join("");

    html += `
      <div class="tech-card">
        <div class="tech-name">
          ${escapeHtml(name)}
          ${version ? `<span class="tech-version">v${escapeHtml(version)}</span>` : ""}
        </div>
        ${catHtml ? `<div class="tech-categories">${catHtml}</div>` : ""}
        <div class="confidence-bar-container">
          <span class="confidence-label">Confidence</span>
          <div class="confidence-bar">
            <div class="confidence-fill confidence-${confClass}" 
                 style="width: ${confidence}%"></div>
          </div>
          <span class="confidence-value ${confClass}">${confidence}%</span>
        </div>
      </div>
    `;
  }

  resultsEl.innerHTML = html;
}
Enter fullscreen mode Exit fullscreen mode

The confidence bar uses three color tiers:

  • Green (80-100%): High confidence detection
  • Yellow (50-79%): Medium confidence
  • Red (below 50%): Low confidence, possibly heuristic-based

Step 4: The Settings Page

Users need a place to enter their API key. The options page handles this with Chrome's storage.sync API, which syncs the key across all their Chrome instances:

saveBtn.addEventListener("click", async () => {
  const key = apiKeyInput.value.trim();
  if (!key) {
    showToast("Please enter an API key.", "error");
    return;
  }

  await chrome.storage.sync.set({ apiKey: key });
  showToast("API key saved successfully!", "success");
});
Enter fullscreen mode Exit fullscreen mode

Step 5: Guard Rails

The popup also handles edge cases — you can't detect technologies on chrome:// internal pages or when no URL is available:

if (!currentUrl || currentUrl.startsWith("chrome://") || currentUrl.startsWith("chrome-extension://")) {
  hideAll();
  show(errorEl);
  errorMsg.textContent = "Cannot detect technologies on this page.";
  return;
}
Enter fullscreen mode Exit fullscreen mode

What the Extension Detects

The TechDetect API identifies technologies across 15 categories, including:

Category Examples
JavaScript frameworks React, Vue, Angular, Next.js, Nuxt
CMS WordPress, Drupal, Ghost, Webflow
E-commerce Shopify, WooCommerce, Magento
CDN Cloudflare, Fastly, AWS CloudFront
Analytics Google Analytics, Hotjar, Mixpanel
Hosting Vercel, Netlify, AWS, Heroku
CSS frameworks Tailwind CSS, Bootstrap, Bulma
Security HSTS, Content Security Policy
Fonts Google Fonts, Adobe Fonts
Tag managers Google Tag Manager, Segment
Advertising Google Ads, Facebook Pixel
Marketing automation HubSpot, Mailchimp, Intercom
Server-side Nginx, Apache, Node.js, PHP
Caching Varnish, Redis
Build tools Webpack, Vite

With 141+ technologies in the database, it catches things you would never spot manually — like specific CDN configurations or security headers that indicate the underlying infrastructure.

Try It Yourself

The extension is open source. You can clone it, install it as an unpacked extension, and start using it in under a minute:

git clone https://github.com/dapdevsoftware/techdetect-chrome-extension.git
Enter fullscreen mode Exit fullscreen mode

Then in Chrome:

  1. Go to chrome://extensions/
  2. Enable "Developer mode"
  3. Click "Load unpacked" and select the cloned folder
  4. Click the TechDetect icon on any website

Getting an API Key

The extension requires an API key to authenticate with the TechDetect API. You can get one through RapidAPI where the API is listed for production use.

Beyond the Extension: Other Ways to Use the API

The Chrome extension is just one way to use the TechDetect API. Depending on your workflow, you might prefer:

  • Direct API calls — integrate technology detection into your own tools, dashboards, or CI pipelines with a simple GET request to https://techdetect.dapdev.tech/detect?url=...
  • Apify Actor — run bulk technology detection on hundreds of URLs at once using Apify's cloud infrastructure, great for lead generation and market research
  • RapidAPI — use the managed API listing on RapidAPI for metered access with built-in rate limiting and API key management

Lessons Learned Building This

A few things I picked up building this extension:

  1. Manifest V3 service workers are not persistent. Unlike Manifest V2 background pages, the service worker in V3 can be terminated at any time. Keep your background logic minimal — mine just sets a default API key on first install.

  2. chrome.storage.sync is your friend. It syncs data across all of a user's Chrome instances automatically. Perfect for API keys and user preferences.

  3. Always encodeURIComponent user-supplied URLs. URLs can contain characters that break query strings. This is easy to forget and painful to debug.

  4. Dark themes work well for developer tools. Developers spend hours staring at screens. A well-designed dark UI with proper contrast makes the extension feel native and comfortable.

  5. Minimal permissions build trust. Only request activeTab and storage — never ask for blanket access to all URLs. Users (rightfully) scrutinize extension permissions.

Wrapping Up

Building a Chrome extension that detects website technology stacks turned out to be surprisingly straightforward — mostly because the hard part (actually detecting the technologies) is handled by the API. The extension itself is just a thin client: get the URL, call the API, render the results.

If you want to check it out:

The whole thing is open source, so fork it, modify it, or use it as a starting point for your own developer tools. If you build something cool with the TechDetect API, I'd love to hear about it in the comments.

Top comments (0)