Chrome Extension Broken Link Finder: A Developer Guide

// content.js
class LinkScanner {
  constructor() {
    this.links = [];
  }

  scan() {
    const anchors = document.querySelectorAll('a[href]');
    this.links = Array.from(anchors)
      .map(a => this.normalizeUrl(a.href))
      .filter(href => this.isValidUrl(href));
    
    return {
      url: window.location.href,
      title: document.title,
      links: [...new Set(this.links)],
      count: this.links.length
    };
  }

  normalizeUrl(url) {
    try {
      const normalized = new URL(url);
      // Remove fragments and tracking parameters
      normalized.hash = '';
      return normalized.toString();
    } catch {
      return null;
    }
  }

  isValidUrl(url) {
    if (!url) return false;
    try {
      const parsed = new URL(url);
      return ['http:', 'https:'].includes(parsed.protocol);
    } catch {
      return false;
    }
  }
}

// Send links to background script when page loads
document.addEventListener('DOMContentLoaded', () => {
  const scanner = new LinkScanner();
  const pageData = scanner.scan();
  
  chrome.runtime.sendMessage({
    action: 'pageLoaded',
    data: pageData
  });
});

// background.js
const linkQueue = [];
const resultsCache = new Map();
const REQUEST_DELAY = 500; // ms between requests to same domain
const lastRequestTime = new Map();

async function checkLink(url) {
  // Check cache first
  if (resultsCache.has(url)) {
    return resultsCache.get(url);
  }

  // Rate limiting per domain
  try {
    const domain = new URL(url).hostname;
    const lastTime = lastRequestTime.get(domain) || 0;
    const now = Date.now();
    
    if (now - lastTime < REQUEST_DELAY) {
      await new Promise(r => setTimeout(r, REQUEST_DELAY - (now - lastTime)));
    }
    
    lastRequestTime.set(domain, Date.now());

    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 10000);

    const response = await fetch(url, {
      method: 'HEAD',
      signal: controller.signal,
      redirect: 'follow'
    });

    clearTimeout(timeoutId);

    const result = {
      url,
      status: response.status,
      ok: response.ok,
      statusText: response.statusText
    };

    resultsCache.set(url, result);
    return result;

  } catch (error) {
    const result = {
      url,
      status: 0,
      ok: false,
      error: error.name === 'AbortError' ? 'timeout' : error.message
    };
    
    resultsCache.set(url, result);
    return result;
  }
}

// Handle messages from content script
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'checkLinks') {
    const links = message.links;
    
    Promise.all(links.map((url, i) => 
      checkLink(url).then(result => ({ index: i, ...result }))
    )).then(results => {
      sendResponse({ results, cached: resultsCache.size });
    });
    
    return true; // Keep message channel open for async response
  }
  
  if (message.action === 'getCachedResults') {
    sendResponse({ 
      results: Array.from(resultsCache.entries()).map(([url, data]) => ({ url, ...data }))
    });
  }
});

// popup.js
let cachedResults = [];

document.addEventListener('DOMMAContentLoaded', async () => {
  // Get current tab
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  // Check for existing results
  chrome.runtime.sendMessage({ action: 'getCachedResults' }, (response) => {
    if (response && response.results) {
      displayResults(response.results);
    }
  });

  document.getElementById('checkBtn').addEventListener('click', async () => {
    const btn = document.getElementById('checkBtn');
    btn.disabled = true;
    btn.textContent = 'Checking...';

    // Execute content script to get links
    const results = await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => {
        const links = Array.from(document.querySelectorAll('a[href]'))
          .map(a => new URL(a.href).toString());
        return [...new Set(links)];
      }
    });

    const links = results[0].result;

    // Send to background for checking
    chrome.runtime.sendMessage({ 
      action: 'checkLinks', 
      links 
    }, (response) => {
      displayResults(response.results);
      btn.disabled = false;
      btn.textContent = 'Check All Links';
    });
  });
});

function displayResults(results) {
  cachedResults = results;
  
  const total = results.length;
  const broken = results.filter(r => !r.ok).length;
  const working = total - broken;

  document.getElementById('totalCount').textContent = total;
  document.getElementById('workingCount').textContent = working;
  document.getElementById('brokenCount').textContent = broken;

  const list = document.getElementById('linkList');
  list.innerHTML = results.slice(0, 50).map(r => `
    <div class="link-item">
      <div class="status-icon ${r.ok ? 'ok' : 'broken'}"></div>
      <div class="link-url" title="${r.url}">${r.url}</div>
      <span>${r.status || 'Error'}</span>
    </div>
  `).join('');
}