Chrome Extension Lighthouse Audit Runner: A Developer Guide

// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'runAudit') {
    runLighthouseAudit(message.url, message.categories)
      .then(results => sendResponse({ success: true, results }))
      .catch(error => sendResponse({ success: false, error: error.message }));
    return true; // Keep message channel open for async response
  }
});

async function runLighthouseAudit(url, categories) {
  const targetTab = await findOrCreateAuditTab(url);
  
  return new Promise((resolve, reject) => {
    chrome.debugger.attach({ tabId: targetTab.id }, '1.0', async () => {
      if (chrome.runtime.lastError) {
        reject(new Error(chrome.runtime.lastError.message));
        return;
      }
      
      // Configure and run Lighthouse via debugger protocol
      const config = {
        categories: categories || ['performance', 'accessibility', 'best-practices', 'seo'],
        throttling: { cpuSlowdownMultiplier: 4, rttMs: 40, throughputKbps: 1024 }
      };
      
      // Send Lighthouse command through debugger
      chrome.debugger.sendCommand(
        { tabId: targetTab.id },
        'Lighthouse.start',
        config,
        (result) => {
          if (chrome.runtime.lastError) {
            reject(new Error(chrome.runtime.lastError.message));
            chrome.debugger.detach({ tabId: targetTab.id });
            return;
          }
          
          // Poll for completion
          pollForResults(targetTab.id, resolve, reject);
        }
      );
    });
  });
}

async function pollForResults(tabId, resolve, reject) {
  const maxAttempts = 120;
  let attempts = 0;
  
  const poll = async () => {
    attempts++;
    
    try {
      const response = await new Promise((resolve, reject) => {
        chrome.debugger.sendCommand(
          { tabId },
          'Lighthouse.getVersion',
          {},
          (result) => {
            if (chrome.runtime.lastError) {
              reject(chrome.runtime.lastError);
              return;
            }
            // Lighthouse running - check for completion
            chrome.debugger.sendCommand(
              { tabId },
              'Lighthouse.end',
              {},
              (endResult) => {
                if (!chrome.runtime.lastError && endResult.lhr) {
                  resolve(endResult.lhr);
                } else {
                  resolve(null);
                }
              }
            );
          }
        );
      });
      
      if (response) {
        chrome.debugger.detach({ tabId });
        resolve(response);
      } else if (attempts < maxAttempts) {
        setTimeout(poll, 1000);
      } else {
        chrome.debugger.detach({ tabId });
        reject(new Error('Audit timeout'));
      }
    } catch (error) {
      setTimeout(poll, 1000);
    }
  };
  
  poll();
}

// popup.js
document.getElementById('runAudit').addEventListener('click', async () => {
  const url = document.getElementById('url').value;
  const checkboxes = document.querySelectorAll('.category-checkboxes input:checked');
  const categories = Array.from(checkboxes).map(cb => cb.value);
  
  const button = document.getElementById('runAudit');
  const resultsDiv = document.getElementById('results');
  
  button.disabled = true;
  button.textContent = 'Running audit...';
  resultsDiv.innerHTML = '';
  
  try {
    const response = await chrome.runtime.sendMessage({
      action: 'runAudit',
      url: url,
      categories: categories
    });
    
    if (response.success) {
      displayResults(response.results);
    } else {
      resultsDiv.innerHTML = `<p style="color: red;">Error: ${response.error}</p>`;
    }
  } catch (error) {
    resultsDiv.innerHTML = `<p style="color: red;">Error: ${error.message}</p>`;
  } finally {
    button.disabled = false;
    button.textContent = 'Run Audit';
  }
});

function displayResults(lhr) {
  const categories = lhr.categories;
  let html = '<h3>Audit Results</h3>';
  
  for (const [name, data] of Object.entries(categories)) {
    const score = Math.round(data.score * 100);
    const scoreClass = score >= 90 ? 'good' : score >= 50 ? 'needs-improvement' : 'poor';
    const displayName = name.charAt(0).toUpperCase() + name.slice(1).replace('-', ' ');
    
    html += `<p>
      <strong>${displayName}:</strong>
      <span class="score ${scoreClass}">${score}</span>
    </p>`;
  }
  
  document.getElementById('results').innerHTML = html;
}