尝试在DOM加载后注入CSS(编写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).