试图注入CSS后DOM加载(写Chrome扩展)

Trying to inject CSS after DOM loaded (Writing Chrome Extension)

本文关键字：Chrome 扩展 加载 DOM 注入 CSS      更新时间：2023-09-26

我想写一个Chrome扩展，只是添加一个CSS文件到页面的CSS定义的结束。

Google的文档说我可以使用chrome.tabs.insertCSS()函数来添加css到页面，但是从content_script包含的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。你需要从背景页面开始。如果您需要在内容脚本和背景页面之间进行通信，则可以使用消息传递。

p。像"这让我觉得我的脚本可能在中间的某个地方崩溃了"这样的事情可以很容易地通过查看控制台来检查(对于内容脚本，它只是一个选项卡中的常规控制台，Ctrl+J)。

"我想写一个Chrome扩展，只是添加一个CSS文件到页面的CSS定义的结束"

你可能需要添加!important标志到你正在改变的css:

当浏览器显示一个HTTP页面，用户点击这个扩展的浏览器操作，扩展设置页面的bgcolor属性为'红色'。结果，除非页面有CSS来设置背景色，否则页面会变成红色。

…!important标志是改变一些东西的唯一方法，但你可能不得不写js来覆盖其他样式，检查这个

正如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://'*/*"
],
相关文章：