javascript - 加载 DOM 后尝试注入(inject) 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。您需要从后台页面执行此操作。如果您需要在内容脚本和后台页面之间进行通信，可以使用 message passing可用。

附言。诸如“这让我觉得我的脚本可能在中间某个地方崩溃了”之类的事情。可以通过查看控制台轻松检查(对于内容脚本，它只是选项卡中的常规控制台，Ctrl+J)。