Как вводить CSS в веб-страницу через расширение Chrome?

Я не знаю, как вводить CSS в веб-страницу через расширение Chrome. Я пытаюсь ввести это на веб-страницу:

body {
   background: #000 !important;
}

a {
   color: #777 !important;
}

Вот мой manifest.json:

{
"update_url":"http://clients2.google.com/service/update2/crx",
  "name": "Test Extension",
  "version": "1.0",
  "description": "This is a test extension for Google Chrome.",
  "icons": { "16": "icon16.png",
           "48": "icon48.png",
          "128": "icon128.png" },
  "background_page": "background.html",
  "browser_action": {
    "default_icon": "icon19.png"
  },
  "content_scripts": [
    {
      "matches": ["http://test-website.com/*"], 
      "js": ["js/content-script.js"]
    }
  ],

    "permissions": [ "tabs", "http://test-website.com/*" ]

}

Ответы

Ответ 1

Вам может потребоваться добавить дополнительную строку в файл манифеста:

"content_scripts": [
    {
      "matches": ["http://test-website.com/*"], 
      "js": ["js/content-script.js"],
      "css" : ["yourcss.css"]
    }
],

Файл CSS, определенный в "css": ["..."], будет добавлен на каждую страницу, которая соответствует местоположению, указанному в matches.

Если вы разрабатываете расширение Chrome, убедитесь, что вы смотрите на эти страницы:

Ответ 2

Вы также можете вставить файл css в один или несколько содержимого табуляции, используя следующий синтаксис, подробно описанный на веб-странице Chrome Tabs:

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

Вам, разумеется, потребуется идентификатор вашей целевой вкладки.

В документации Chrome Extension не обсуждается, как интерпретируется введенный CSS, но факт заключается в том, что файлы CSS, которые вводятся на веб-страницу, посредством этого метода или путем включения их в манифест, интерпретируются как таблицы стилей пользователя.

В этом отношении важно отметить, что если вы будете вводить таблицы стилей с помощью этих методов, они будут ограничены одним критическим способом (по крайней мере, с Chrome v.19): Chrome игнорирует "важные" директивы в пользовательских таблицах стилей. Ваши введенные правила стиля будут превзойдены чем-либо, включенным в страницу, как это было написано.

Один рабочий процесс, если вы хотите не вводить правила встроенного стиля, следующий (я использую jQuery для фактической вставки, но это можно сделать с помощью прямого Javascript):

$(document).ready(function() {
var path = chrome.extension.getURL('styles/myExtensionRulz.css');
$('head').append($('<link>')
    .attr("rel","stylesheet")
    .attr("type","text/css")
    .attr("href", path));
});

Затем вы можете поместить таблицу стилей в папку стилей расширения, но вам не нужно будет перечислять ее в любом месте манифеста. Соответствующая часть, приведенная выше, заключается в том, что вы будете использовать API-интерфейс chrome для получения URL-адреса вашей таблицы стилей, а затем подключите его как значение ссылки href. Теперь вашей таблице стилей будет присвоен более высокий приоритет, и вы можете использовать директиву "! Important" там, где это необходимо.

Это единственное решение, которое работает для меня в последней версии Chrome.