How I Built a chrome extension that finds Ghost CSS : Ghost-CSS-Detector
Tags: webdev, javascript, tutorial, css
Published: 2023-01-11 16:10:57



{% embed https://chrome.google.com/webstore/detail/ghost-css-detector/pphfihfikeimkmnjielhjjgapkmnimnm/ %}
Injecting the ghost-css in the current tab that helps find the elements.
![Sample](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a36gutqj8r5rsfx1rri5.gif)

{% embed https://dev.to/shrihari/finding-ghost-elements-with-ghost-css--1fa0 %}


##Folder Structure

![Folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3mtpge2fvll57kzf3xk5.png)

`manifest.json` -  Every extension requires a JSON-formatted file, named manifest.json, that provides important information. This file must be located in the extension's root directory. [More information](https://developer.chrome.com/docs/extensions/mv3/manifest/)

Lets see whats `manifest.json` looks like
```js
{
  "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"
  }
}
```

These are some boiler plate which you can find more about [here](https://developer.mozilla.org/en-US/docs/Web/Manifest)

Some of the important things to note is
`host_permissions` - Specifies the Domain for which the extension should be allowed. For my requirements it should be allowed to all URLs. More from [Google Dev](https://developer.chrome.com/docs/extensions/mv3/declare_permissions/) 

`permissions` - Gives your extension access to the chrome.scripting API. [More on permissions](https://developer.chrome.com/docs/extensions/mv2/declare_permissions/#manifest)

`background.service_worker` - This is where we enable/disable the css.

Let's see our ghost css and service worker
```css
* {
    background: #171717 !important;
    color: #EDEDED !important;
    outline: solid #DA0037 1px !important;
  }
```

```js
// 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"
  });
});
```

If you've like the extension and use it, Please review it and make suggestions to improve.

[Leave a review](https://chrome.google.com/webstore/detail/ghost-css-detector/pphfihfikeimkmnjielhjjgapkmnimnm/)
[Click to Create a Issue.](https://github.com/ShrihariMohan/ghost-css-detector/issues)


_Peace 🕊_


---

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## Try Our new product for free!
[DocsAI](https://docsai.app/) - Create AI support agents with your documents in the most affordable price, starts at **0$**. Don't need a bot , but need ai help on your docs just upload and start chating !

Using for a company ? [Check out our pricing](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

##More Free Articles from me
{% embed https://dev.to/shrihari/oauth-for-beginners-and-key-terms-1plo %}

{% embed https://dev.to/shrihari/navbar-with-background-blur-aesthetic-look-in-2-lines-of-code--4kp6 %}

{% embed https://dev.to/shrihari/why-array-index-starts-with-0-a-pointers-magic--j53 %}