Как добавить CSS на страницу содержимого только при нажатии кнопки из расширения?

Question

Я просто хотел узнать, есть ли способ вставить файл css на страницу только одним нажатием кнопки из расширения chrome. Также возможно удалить css, введенный после повторного нажатия кнопки в расширении.

1. Manifest. json

{
   "manifest_version": 2,
   "name": "KS Scrapper",
   "description":"Simple Scrapper",
   "version" : "1.0.0",
   "icons":{"128":"images/ks_logo_128.png"},
   "browser_action" : {
       "default_icon" : "images/ks_logo_19.png",
       "default_popup" : "popup.html"
   },
   "content_scripts" : [
           {
           "matches": ["<all_urls>"],
           "js" : ["jquery-2.1.4.min.js", "content.js"],
           "css" : ["c.css"]
       }
   ],
   "web_accessible_resources": [
       "css/style.css",
       "c.css"
   ],
   "permissions": ["tabs"],
   "background":{
       "scripts":["background.js"]
   }
}

Я добавляю c. css в сценарий содержимого, и он выполняет свою работу, но я хотел знать, есть ли способ переключаться между тем, когда он активен, и когда он не использует кнопку. Если я допустил ошибки, пожалуйста, поправьте меня. Спасибо

Answer 1

Вместо css инъекции в манифесте. json создайте элемент link на самой странице со специальным идентификатором, чтобы впоследствии вы могли удалить этот элемент с помощью стандартных методов DOM.

manifest . json:

• нет необходимости в разделе content_scripts для этой задачи
• "permissions": ["activeTab"], нет необходимости в tabs для этой задачи

всплывающее окно. js, внутри некоторого click слушателя:

chrome.tabs.executeScript({file: 'toggle-style.js'})

в режиме переключения. js:

(() => {
  const id = chrome.runtime.id;
  let el = document.getElementById(id);
  if (el) {
    el.remove();
  } else {
    el = document.createElement('link');
    el.id = id;
    el.rel = 'stylesheet';
    el.href = chrome.runtime.getURL('c.css');
    document.head.appendChild(el);
  }
})();