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

Question

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

body {
   background: #000 !important;
}

a {
   color: #777 !important;
}

Вот мой манифест.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/*" ]

}

Answer 1

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

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

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

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

1. Руководство разработчика
   • Файлы манифеста
   • Сценарии содержимого
   • Фоновые страницы

Answer 2

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

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

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

Документация по расширению Chrome не обсуждает, как интерпретируется внедренный 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));
});

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

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