Добавить CSS на страницы через файл CSS

Question

Мне было интересно, можно ли добавить CSS на страницы через файл CSS, аналогично добавлению JS на страницы через файл JS (contentscript). Таким образом, я мог просто определить, на каких страницах будет работать CSS-файл, и тогда он будет действовать, как содержание. Я понимаю, что можно добавить CSS через файл JavaScript, но было бы удобнее сделать это таким образом, если это возможно. Если это невозможно, то, конечно, я должен использовать contentcript, но сначала я хотел бы узнать, прежде чем исключать какие-либо возможности. Я искал и не получил ответов - либо я ищу неправильно, либо это действительно невозможно. Расширения Chrome прошли долгий путь, поэтому я все еще не исключаю, пока кто-то, кто знает, скажет мне «да» и «как» или «нет». Спасибо за любые ответы.

Answer 1

Ваш файл манифеста должен содержать content script, указывающий на CSS file, который будет загружаться, когда URL matches выбранные вами поля URL ...

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

Это тот же метод, который выбудет использовать для инъекции javascript code, за исключением того, что вы вместо этого указываете на js file ...

Подробнее здесь ...

Answer 2

manifest.json:

"web_accessible_resources": [
      "css/style.css"
],

контент-script.js:

var a = chrome.extension.getURL("css/style.css");
$('<link rel="stylesheet" type="text/css" href="' + a + '" >').appendTo("head");

Мое расширение с использованием jQuery

Answer 3

аналогично тому, как мы добавляем JavaScript в content_scripts, также добавляем CSS

Method-1

"content_scripts": [
{
    "matches": ["<all_urls>"],
    "css": ["css/style.css"],
    "js": ["jquery-1.10.2.min.js","content.js","my.min.js"]
}],

добавляем еще одну вещь на web_accessible_resources

"web_accessible_resources": [
    "css/style.css"
  ]

если вы использовали какой-либо внешний JavaScript, то также добавьте URL во вкладку прав доступа.

"permissions": ["tabs", <all_urls>","http://*/","http://example.com/"]

Method-2

также то же самое с использованием vai-программирования и insertCSS () .

chrome.tabs.insertCSS(integer tabId, object details, function callback)

ПРИМЕЧАНИЕ: web_accessible_resources add .css не является обязательным, но с точки зрения форума расширения chrome - хорошая практика.