Как внедрить CSS с помощью файла содержимого скрипта в расширении Chrome?

Я пытаюсь внедрить свой CSS из JavaScript, который вставляется как скрипт содержимого:

"content_scripts": [
   {
      "matches": ["http://www.google.com/*"],
      "js": ["script.js"]
   }
],

Я нашел похожий вопрос о внедрении CSS, но столкнулся с проблемой при использовании кода из принятого ответа. Вот мой script.js содержание:

var link = document.createElement("link");
link.href = chrome.extension.getURL("style.css");
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

После загрузки какой-либо страницы это сообщение появляется в консоли:

Запрещение загрузки chrome-расширения://phkgaaiaakklogbhkdnpjncedlbamani/fix.css. Ресурсы должны быть перечислены в ключе манифеста web_accessible_resources, чтобы их могли загружать страницы за пределами расширения.

Есть ли способ это исправить? Или, может быть, каким-то другим способом внедрить CSS из этого файла JavaScript?

Примечание. Я не могу включить таблицу стилей непосредственно из манифеста.

Источник

2 ответа

Решение

Вы можете добавить в поле разрешений манифеста; Смотрите web_accessible_resources. Таким образом, вы бы добавили это в манифест:

    , "web_accessible_resources": [
        "fix.css"
    ]

Смотрите также "Программный впрыск". а также insertCSS(),

Для большинства приложений забудьте все это createElement код и просто добавьте файл CSS в манифест:

"content_scripts": [
   {
      "matches":    ["http://www.google.com/*"],
      "css":        ["fix.css"],
      "js":         ["script.js"]
   }
],

хотя я понимаю, что вы не хотите делать это именно в этом случае.

Источник

Вы можете использовать element.classList.add("my_new_class") для добавления нового класса в элемент, а в css вы можете стилизовать этот элемент, используя только что добавленный класс. Таким образом, onClick будет добавлен только класс, а затем будет запущен только css для этого элемента.

Источник
Другие вопросы по тегам