How I Built a chrome extension that finds Ghost CSS : Ghost-CSS-Detector

{
  "name": "Ghost CSS Detector",
  "version": "1.0.3",
  "description": "Find the ghost css in your app in a single click.",
  "manifest_version": 3,
  "author": "Shrihari Mohan",
  "action": {
    "default_icon": {
      "48": "assets/icon.png",
      "96": "assets/icon.png"
    }
  },
  "icons": {
    "48": "assets/icon.png",
    "96": "assets/icon.png"
  },
  "host_permissions": ["<all_urls>"],
  "permissions": ["scripting"],
  "background": {
    "service_worker": "bg-ghost.js"
  }
}

* {
    background: #171717 !important;
    color: #EDEDED !important;
    outline: solid #DA0037 1px !important;
  }

// Insert Ghost Css
const addGhostCss = async (tabId) => {
  await chrome.scripting.insertCSS({
    files: ["ghost.css"],
    target: { tabId },
  });

  //Setting Custom ON/OFF Bg color 
  chrome.action.setBadgeBackgroundColor({
    color: "#DA0037",
    tabId
  });
}

// Remove Ghost Css
const removeGhostCss = async (tabId) => {
  await chrome.scripting.removeCSS({
    files: ["ghost.css"],
    target: { tabId },
  });

  //Setting Custom ON/OFF Bg color 
  chrome.action.setBadgeBackgroundColor({
    color: "#171717",
    tabId
  });
}

// Capture the onClick of the ghost icon at the top bar.
chrome.action.onClicked.addListener(async (tab) => {

  // Getting the state of previous badgeText
  const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
  const nextState = prevState === 'ON' ? 'OFF' : 'ON'
  if ( nextState == 'ON') {
    await addGhostCss(tab.id)
  }
  else {
    await removeGhostCss(tab.id)
  }
  chrome.action.setBadgeText({text: nextState , tabId: tab.id });
});

// Setting Default Value
chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF"
  });

  chrome.action.setBadgeBackgroundColor({
    color: "#171717"
  });
});