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

我正在尝试编写一个Chrome扩展，它只是在页面的CSS定义末尾添加一个CSS文件

谷歌的文档说，我可以使用函数

chrome.tabs.insertCSS（）

将css添加到页面中，但从包含的javascript文件中运行它不会产生任何效果

我正在尝试谷歌网站上记录的两种不同的方法。我有一个

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");

---

您不能从内容脚本调用

chrome.tabs.*

API。你需要从背景页开始。如果您需要在内容脚本和背景页面之间进行通信，则可以使用

>“这让我觉得我的脚本可能在中间某个地方崩溃。”通过查看控制台（对于内容脚本，它只是一个普通的控制台，“代码> Ctrl + J<代码>”），可以很容易地检查。

< p>“我试图写一个Chrome扩展，只是在页面的CSS定义的结尾添加了一个CSS文件”

您可能需要添加

！重要信息

标记要更改的css：

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

…这个

！重要信息

标志是更改某些内容的唯一方法，但您可能需要编写js来覆盖其他样式，请检查

正如serg所说，background.html页面是您使用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://\*/*"
],