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。您需要从后台页面执行此操作。如果您需要在内容脚本和背景页面之间进行通信，则可以message passing。

PS。像“这让我觉得我的剧本可能会在中间的某个地方崩溃。”可以通过查看控制台轻松检查（对于内容脚本，它只是选项卡中的常规控制台，Ctrl+J）。

Answer 2

“我正在尝试编写一个Chrome扩展程序，只是将一个CSS文件添加到页面的css定义的末尾”

您可能需要将!important标志添加到要更改的CSS中：

当浏览器显示HTTP页面并且用户单击此扩展程序的浏览器操作时，扩展程序会将页面的bgcolor属性设置为“red”。结果除非页面具有设置背景颜色的CSS ，否则页面将变为红色。

... !important标志是改变某些内容的唯一方法，但您可能必须编写js来覆盖其他样式，请检查this

正如serg所说，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://\*/*"
],

尝试在DOM加载后注入CSS（编写Chrome扩展）

2 个答案: