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

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

Ответ 1

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

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

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

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

Ответ 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

Ответ 3

аналогично добавлению JavaScript в content_scripts также добавьте CSS

Метод-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/"]

Метод-2

тоже эта вещь, используя встраивание программирования vai и insertCSS().

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

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