Build a Broken Link Checker Chrome Extension: Find Dead Links Instantly

16 min read

Build a Broken Link Checker Chrome Extension: Find Dead Links Instantly

· 16 min read · Chrome Extensions, SEO

Build a Broken Link Checker Chrome Extension: Find Dead Links Instantly

Broken links are one of the most frustrating issues website owners and developers face. Whether you run a blog, manage an e-commerce site, or maintain a complex web application, dead links can severely impact user experience, damage your SEO rankings, and erode trust in your brand. Fortunately, building a Chrome extension to detect and report broken links is easier than you might think. In this comprehensive guide, we’ll walk you through creating a fully functional broken link checker Chrome extension that can scan pages, identify dead links, and present results in a clean, actionable format.

This tutorial assumes you have basic familiarity with JavaScript and HTML, but even if you’re new to Chrome extension development, you’ll find this guide accessible and informative. By the end, you’ll have a working extension that you can use personally or expand with additional features.

Before diving into the technical implementation, let’s explore why creating a broken link checker Chrome extension is a valuable project. Understanding the motivation behind this tool will help you appreciate its architecture and make better design decisions.

Every website owner has experienced the frustration of clicking a link only to encounter a 404 error or a timeout. These broken links, also known as dead links, occur for various reasons: pages are deleted, websites go offline, URLs change, or domain names expire. Regardless of the cause, the result is always the same—a negative user experience that reflects poorly on your site.

From an SEO perspective, broken links are particularly damaging. Search engines like Google crawl the web by following links. When crawlers encounter numerous broken links on your site, they may interpret this as a sign of poor maintenance, which can negatively impact your search rankings. Additionally, broken links waste crawl budget, preventing search engines from discovering your valuable content.

For developers and content managers, manually checking links across a large website is time-consuming and prone to errors. Automated link checking is essential for maintaining website quality, and a Chrome extension offers a convenient, always-available solution that works directly in the browser.

Benefits of a Chrome Extension Solution

Building a broken link finder Chrome extension provides several advantages over standalone link checking tools. First, the extension runs in your browser, giving it access to the full context of the pages you visit. This means it can check links on authenticated pages, behind login screens, or on local development environments—scenarios where external link checkers often fail.

Second, Chrome extensions can leverage the browser’s built-in networking capabilities, handling redirects, cookies, and authentication automatically. This results in more accurate link checking that reflects real user experiences.

Finally, a Chrome extension is portable and easy to share. Once published to the Chrome Web Store, anyone can install and use your tool, making it a valuable portfolio piece or potential product.

Understanding Chrome Extension Architecture

Chrome extensions are essentially web applications that run in the Chrome browser. They consist of several components that work together to provide functionality. Before building our link checker, let’s understand the key parts of a Chrome extension.

Manifest File: The Foundation

Every Chrome extension begins with a manifest.json file. This file tells Chrome about your extension’s capabilities, permissions, and components. The manifest specifies which files to load, what permissions the extension requires, and how the extension should appear in the browser.

For our broken link checker, we’ll need permissions to access page content and make network requests. The manifest will also define a popup interface where users can initiate scans and view results.

The popup is what users see when they click the extension icon in the Chrome toolbar. This is where users will start link scans and view the results. Our popup will include a “Check Links” button, a progress indicator, and a results display area.

Content Scripts: Page Access

Content scripts are JavaScript files that run in the context of web pages. They can read and modify page content, making them essential for our link checker. Our content script will extract all links from the current page and send them to the background script for validation.

Background Scripts: Processing Hub

Background scripts run independently of any web page and handle tasks that need to persist across page loads. In our extension, the background script will receive links from the content script, validate each one, and report results back to the popup.

Step-by-Step Implementation Guide

Now let’s build our broken link checker Chrome extension. We’ll create each component step by step, explaining the code and its purpose.

Step 1: Creating the Project Structure

First, create a new folder for your extension project. Inside this folder, create the following files:

  • manifest.json
  • popup.html
  • popup.js
  • popup.css
  • content.js
  • background.js

This structure keeps your extension organized and makes it easy to maintain and expand later.

Step 2: Writing the Manifest File

The manifest.json file defines your extension’s identity and capabilities. Here’s what we’ll use:

{
  "manifest_version": 3,
  "name": "Broken Link Checker",
  "version": "1.0",
  "description": "Find and fix broken links on any webpage instantly",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

This manifest requests the necessary permissions to access the active tab and run scripts. The permissions are minimal, ensuring user privacy while providing the functionality we need.

Step 3: Building the Popup Interface

The popup provides the user interface for our extension. Create popup.html:

<!DOCTYPE html>
<html>
<head>
  <title>Broken Link Checker</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <h1>Link Checker</h1>
    <div class="stats">
      <p>Links found: <span id="total-links">0</span></p>
      <p>Broken links: <span id="broken-links">0</span></p>
    </div>
    <button id="check-btn">Check Links</button>
    <div id="results"></div>
  </div>
  <script src="popup.js"></script>
</body>
</html>

This simple interface shows statistics and provides a button to initiate link checking. The results will appear in the designated div.

Step 4: Styling the Popup

Create popup.css to make the popup visually appealing:

body {
  width: 300px;
  padding: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f5f5f5;
}

.container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h1 {
  font-size: 18px;
  margin-top: 0;
  color: #333;
}

.stats {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 4px;
}

.stats p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

#check-btn {
  width: 100%;
  padding: 10px;
  background: #4285f4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
}

#check-btn:hover {
  background: #3367d6;
}

#check-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

#results {
  margin-top: 15px;
  max-height: 300px;
  overflow-y: auto;
}

.link-result {
  padding: 8px;
  margin-bottom: 5px;
  border-radius: 4px;
  font-size: 12px;
  word-break: break-all;
}

.link-result.broken {
  background: #ffebee;
  border-left: 3px solid #f44336;
}

.link-result.valid {
  background: #e8f5e9;
  border-left: 3px solid #4caf50;
}

The CSS provides a clean, modern appearance with color-coded results—green for valid links and red for broken links.

Step 5: Creating the Content Script

The content script extracts links from the current page. Create content.js:

// Extract all links from the current page
function extractLinks() {
  const links = document.querySelectorAll('a[href]');
  const linkArray = Array.from(links).map(link => link.href);
  
  // Remove duplicates
  return [...new Set(linkArray)];
}

// Listen for messages from the popup
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'getLinks') {
    const links = extractLinks();
    sendResponse({ links: links });
  }
  return true;
});

This script listens for messages requesting links and responds with all unique links found on the page.

Step 6: Building the Background Script

The background script coordinates link checking. Create background.js:

// Check if a single URL is valid
async function checkUrl(url) {
  try {
    // Use fetch with HEAD request first (faster)
    const response = await fetch(url, {
      method: 'HEAD',
      mode: 'no-cors'
    });
    
    // If no-cors mode returns opaque response, try GET
    if (response.type === 'opaque') {
      const getResponse = await fetch(url, {
        method: 'GET',
        mode: 'no-cors'
      });
      return { url, valid: true };
    }
    
    return { 
      url, 
      valid: response.ok || response.status === 0 
    };
  } catch (error) {
    return { url, valid: false, error: error.message };
  }
}

// Check all links from a tab
async function checkAllLinks(tabId) {
  // Get links from content script
  const links = await chrome.tabs.sendMessage(tabId, { action: 'getLinks' });
  
  if (!links || !links.links) {
    return { total: 0, broken: [], results: [] };
  }
  
  const results = [];
  const broken = [];
  
  // Check each link
  for (const url of links.links) {
    const result = await checkUrl(url);
    results.push(result);
    if (!result.valid) {
      broken.push(url);
    }
    
    // Send progress update to popup
    chrome.runtime.sendMessage({
      action: 'progress',
      total: links.links.length,
      checked: results.length,
      broken: broken.length
    });
  }
  
  return { total: links.links.length, broken, results };
}

// Handle messages from popup
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'checkLinks') {
    checkAllLinks(message.tabId).then(result => {
      sendResponse(result);
    });
    return true;
  }
});

This script handles the core logic of checking each URL and tracking results.

Step 7: Connecting the Popup Logic

Finally, create popup.js to tie everything together:

document.addEventListener('DOMContentLoaded', () => {
  const checkBtn = document.getElementById('check-btn');
  const totalLinksEl = document.getElementById('total-links');
  const brokenLinksEl = document.getElementById('broken-links');
  const resultsEl = document.getElementById('results');
  
  checkBtn.addEventListener('click', async () => {
    // Get current tab
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    
    if (!tab) {
      alert('No active tab found');
      return;
    }
    
    checkBtn.disabled = true;
    checkBtn.textContent = 'Checking...';
    resultsEl.innerHTML = '';
    
    try {
      // Request link checking from background script
      const response = await chrome.runtime.sendMessage({
        action: 'checkLinks',
        tabId: tab.id
      });
      
      if (response) {
        totalLinksEl.textContent = response.total;
        brokenLinksEl.textContent = response.broken.length;
        
        // Display broken links
        if (response.broken.length > 0) {
          response.broken.forEach(url => {
            const div = document.createElement('div');
            div.className = 'link-result broken';
            div.textContent = url;
            resultsEl.appendChild(div);
          });
        } else {
          const div = document.createElement('div');
          div.className = 'link-result valid';
          div.textContent = 'All links are working!';
          resultsEl.appendChild(div);
        }
      }
    } catch (error) {
      console.error('Error checking links:', error);
      resultsEl.innerHTML = '<p style="color: red;">Error checking links</p>';
    }
    
    checkBtn.disabled = false;
    checkBtn.textContent = 'Check Links';
  });
});

Testing Your Extension

Now that you’ve built all the components, it’s time to test your broken link checker Chrome extension. Here’s how to load it into Chrome for testing:

  1. Open Chrome and navigate to chrome://extensions/
  2. Enable “Developer mode” using the toggle in the top right corner
  3. Click “Load unpacked” and select your extension folder
  4. The extension icon should appear in your toolbar

Navigate to any webpage and click the extension icon. Press “Check Links” to scan the page. Valid links will appear in green, and broken links will appear in red.

Advanced Features to Consider

While the basic broken link checker works well, there are several enhancements you could add to make it even more powerful:

Status Code Display

Instead of simply showing broken links, display the actual HTTP status code. This helps users understand why a link failed—whether it’s a 404 (not found), 500 (server error), or 403 (forbidden).

Group broken links by their error type. This makes it easier to prioritize fixes based on the severity and nature of each issue.

Export Functionality

Add the ability to export results as CSV or JSON. This is valuable for large websites where you need to track and fix many broken links over time.

Scheduled Scanning

Implement automatic scanning that checks links periodically, notifying you when new broken links appear on your favorite sites.

Bulk Checking

Extend the extension to scan multiple pages, not just the current page. This turns your link checker into a full website auditing tool.

SEO Benefits of Broken Link Checking

Using a broken link finder Chrome extension provides significant SEO advantages that every website owner should leverage. Search engines view websites with numerous broken links as poorly maintained, which can negatively impact your rankings. Regular link checking helps maintain a clean, professional site that search engines favor.

When search engine crawlers encounter broken links, they waste crawl budget on non-existent pages instead of discovering your fresh content. By fixing broken links promptly, you ensure crawlers can efficiently index your entire website.

Additionally, broken links create poor user experiences that increase bounce rates. Users who encounter multiple dead links are likely to leave your site and not return. Maintaining valid links keeps visitors engaged and improves your site’s overall metrics.

Conclusion

Building a broken link checker Chrome extension is a rewarding project that combines practical utility with valuable development experience. The extension we built today provides a solid foundation that you can customize and expand based on your needs.

Remember that link checking is an ongoing process. Websites change constantly, and new broken links can appear at any time. Making link checking a regular habit—using your new extension—will help maintain a high-quality website that both users and search engines appreciate.

The skills you developed in this tutorial—working with Chrome extension APIs, handling asynchronous operations, and building user interfaces—are transferable to many other extension projects. Consider what other tools would be useful for your workflow, and start building!

Happy link checking!

No previous article
No next article