app.js

// Listen for clicks on the extension icon in the browser toolbar
chrome.action.onClicked.addListener(tab =>
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: toggleDebugger
  })
);

// This function is serialized and injected into the page
function toggleDebugger() {
  // Color mapping for different HTML elements
  const elementStyles = {
    // Fallback for every tag without an explicit rule below
    "*": "#2A9D8F",
    "div": "#457B9D",
    "article": "#9B5DE5",
    "section": "#00BCD4",
    "nav": "#F4A261",
    "header": "#FF7043",
    "footer": "#4CAF50",
    "main": "#7B1FA2",
    "aside": "#FF4081",
    "form": "#009688",
    "ul, ol": "#5C6BC0",
    "li": "#FF8A65",
    "p": "#66BB6A",
    "a": "#FFB74D",
    "img": "#4DD0E1",
    "button, input, select, textarea": "#EC407A"
  };

  const styleId = "css-debugger-styles";

  // The <style> element itself is the on/off state, so it can never desync
  const existing = document.getElementById(styleId);
  if (existing) {
    existing.remove();
    return;
  }

  const style = document.createElement("style");
  style.id = styleId;
  style.textContent = Object.entries(elementStyles).map(([selector, color]) => `
      ${selector} {
        outline: 1px solid ${color} !important;
      }

      ${selector}::before,
      ${selector}::after {
        outline: 1px dashed ${color} !important;
      }`
  ).join("\n");
  document.head.append(style);
}