Попытка внедрить CSS после загрузки DOM (Написание расширения Chrome)

Question

Я пытаюсь написать расширение Chrome, которое просто добавляет файл CSS в конец определения CSS на странице.

Документация Google гласит, что я могу просто использовать функцию chrome.tabs.insertCSS() для добавления css на страницу, но запуск ее из content_script включенного файла javascript ничего не делает.

Я пробую два отдельных метода, описанных на сайте Google. У меня есть оператор alert(), чтобы сказать мне, где я нахожусь в скрипте, но он никогда не запускает финальный alert. Это заставляет меня думать, что мой сценарий может зависать где-то посередине.

Вот мои исходные файлы: manifest.json

{
    "name": "Custom CSS to GOOGLE",
    "version": "1.0",
    "description": "The first extension that I made.",
    "content_scripts": [
        {   
            "matches": ["http://*/*"],
            //"js": ["style_injector.js"],
            "js": ["inject.js"],
            "css": ["newstyle.css"]
        }   
    ],  
    "permissions": [
        "tabs", "http://*/*"
    ]   
}

inject.css

alert("newpage");
chrome.tabs.executeScript(null, {code:"document.body.bgColor='red'"});
chrome.tabs.insertCSS(
    null,
    {   
        code:"body{background:red;}"
    }   
);
alert("finishpage");

Answer 1

Вы не можете вызвать chrome.tabs.* API из скрипта контента.Вы должны сделать это с фоновой страницы.Если вам необходимо установить связь между скриптом содержимого и фоновой страницей, то доступно сообщение .

PS.Такие вещи, как «Это заставляет меня думать, что мой сценарий может зависать где-то посередине».можно легко проверить, посмотрев на консоль (для скриптов содержимого это просто обычная консоль во вкладке, Ctrl+J).

Answer 2

«Я пытаюсь написать расширение Chrome, которое просто добавляет файл CSS в конец определения CSS на странице»

Возможно, вам понадобится добавить флаг !important к изменяемому CSS:

Когда браузер отображает страницу HTTP и пользователь щелкает действие браузера этого расширения, расширение устанавливает для свойства bgcolor страницы значение «красный».В результате, , если на странице нет CSS, задающего цвет фона , страница становится красной.

... флаг !important - единственный способ изменитьнекоторые вещи, но вам, возможно, придется написать js для переопределения других стилей, отметьте this

Как сказал Сергей, на странице background.html вы используете injectCSS api:

/* in background.html */
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null,
                           {code:"document.body.bgColor='red'"});
});

/*in manifest.json */
"permissions": [
  "tabs", "http://\*/*"
],