Детектор CSS-призраков
Найдите CSS-призраки в своем приложении одним щелчком мыши.chrome.google.com





Поиск элементов Ghost с помощью Ghost CSS!
Когда вы потратите достаточно времени на разработку внешнего интерфейса, будут некоторые раздражающие моменты, когда вы не смогли… среда.com



Структура папок

manifest.json — Для каждого расширения требуется файл в формате JSON с именем manifest.json, в котором содержится важная информация. Этот файл должен находиться в корневом каталоге расширения. "Больше информации"

Давайте посмотрим, как выглядит manifest.json

{
  "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"
  }
}

Это некоторые шаблоны, о которых вы можете узнать больше здесь

Некоторые важные свойства из manifest.json
host_permissions — указывает Домен, для которого должно быть разрешено расширение. По моим требованиям это должно быть разрешено для всех URL-адресов. Еще от Google Dev

permissions — предоставляет вашему расширению доступ к API chrome.scripting. Подробнее о разрешениях.

background.service_worker — Здесь мы включаем/отключаем css.

Давайте посмотрим на наш призрачный css и service worker.

* {
    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"
  });
});

Если вам понравилось расширение и вы его используете, просмотрите его и внесите предложения по улучшению. Оставить отзыв | Нажмите, чтобы создать задачу.

Мир 🕊

Если вы здесь, значит, вам понравилось читать этот блог. Просто следуйте за мной Шрихари Мохан, что будет мотивировать писать больше.

Можно приготовить напиток Пахта 🥛. Небольшая поддержка имеет большое значение!

Подпишитесь Если хотите получать эти блоги на почту от @Medium бесплатно!