CSS расширения Chrome не загружен

Question

Я разрабатываю расширение Chrome для «сценария содержимого». Я пытаюсь использовать файлы CSS для стилизации некоторых существующих элементов на странице и для стилизации элементов, которые я создаю динамически с помощью JavaScript.

Я указал свой файл CSS в файле manifest.json:

{
    ...
    "content_scripts": [
        {
            "matches": [ ... ],
            "js": [ ... ],
            "css": [ "style.css" ]
        }
    ]
    ...
}

А потом, если я добавлю что-то вроде ниже в мой style.css, ничего не произойдет:

body {
    background-color: red;
}

Я также изложил некоторые правила в виде:

#MyInsertedEl {
    color: red;
}

И затем вставил (используя jQuery) элемент с идентификатором MyInsertedEl (якорная ссылка) на страницу, но его цвет не красный (элемент вставлен и видим на странице).

Так что же дает? Что я делаю неправильно? Согласно документации у меня все как надо, а гугл не возвращает ничего полезного.

изменить: этот код запускается на страницах Facebook, если это имеет какое-либо отношение ...

Answer 1

Ну, видимо, в Chrome есть ошибка.Если у вас есть ? в вашем matches выражении, CSS-файлы не будут загружены.Я отправил отчет об ошибке с более подробной информацией здесь .

Answer 2

см. Редактирование ниже

Вам нужно иметь хотя бы один файл стилей, включенный на вашу страницу, чтобы применить ваши стили content_script:

<link rel="stylesheet" type="text/css" href="#" />

Поэтому, если у вас нет таблиц стилей, просто добавьте пустой тег link, как указано выше.

Я знаю, это звучит смешно, но на самом деле это сработало для меня.

EDIT

Для моего сценария характерны две вещи

1. Ошибка возникает только по file протоколу
2. Файлы не .html (в моем случае .md)

Q: Зачем мне нужны таблицы стилей для .md файлов?

A: content_script соответствует файлам .md и вставляет файл js, который компилирует уценку в html. Стили для сгенерированного HTML.

manifest.json

{
    "manifest_version": 2,
    "name"            : "bug",
    "version"         : "1.0",
    "description"     : "bug",

    "content_scripts": [
        {
            "matches": [
                "*://*/*.*",
                "file:///*/*.*"
            ],
            "css": ["style.css"],
            "js": ["script.js"],
            "run_at": "document_start",
            "all_frames": true
        }
    ]
}

script.js

window.addEventListener('load', function (e) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = '#';
    document.head.appendChild(link);
}, false);

style.css

body { background: gray; }

Steps

1. открыть file:///1.md файл
2. закомментируйте код внутри script.js
3. перезагрузить расширение
4. вернуться к ранее открытому .md файлу - изначально стили загружены
5. обновить страницу - стили не применяются

Я понимаю, что это крайний случай, но это возможный сценарий для моего расширения, и я просто хотел указать свое решение.

Answer 3

Ваш javascript вводится (правильное правило соответствия)? Попробуйте добавить !important к своим правилам CSS:

color: red !important;