Question

我刚刚写了一个简单的扩展程序，它拥有* .google.com的权限，并在一个类上更改了一些CSS，我想我忽略了一些简单的东西。我正在更改+1按钮，其实现方式如下：

<button ... class="esw eswd BRowJd Jt">

在我的style.css中我说：

button.eswa { border: 2px solid #000000; }

改变永远不会出现。我也尝试将类切换到Jt，以防我的CSS被覆盖，没有运气。定义未单击的+1按钮的类是“eswa”，fyi。

根据文档，我还设置了我想在manifest.json

中更改的网站的权限

{ “名字”：“G + Rebrander”， “版本”：“0.92”， “description”：“返回G +的原始品牌（2012年3月之前），例如+1按钮。”， “browser_action”：{ “default_icon”：“g-plus.png” }，

"icons":{
    "128":"g-plus128.png"
},

"permissions": [
    "http://plus.google.com/",
    "https://plus.google.com/",
    "http://*.google.com/",
    "https://*.google.com/",
    "tabs"
]

}

Answer 1

在将来列出你的整个manifest.json文件将是非常有帮助的，因为你并不难以确切地知道你在做什么以及你的错误可能是什么......所以我只列出了一些可能性。

在覆盖css时，在css规则中使用！important总是一个好主意。

权限是指您的注入代码来自后台页面，而不是自动添加的内容脚本。文档对此略显含糊。

对于自动添加的内容脚本，您只需设置内容脚本的匹配字段。

您的匹配在其末尾没有*，因此只会匹配首页而不是任何搜索结果，这就是我假设您的定位。

请注意，Google通常会重定向到您所在国家/地区的服务器，因此我将访问www.google.com并将其重定向到www.google.com.au。

对我来说，未被点击的+1是ewsd，而不是ewsa。

如果您只注入css而不是脚本，那么最好使用值为document_start的run_at字段。这将确保在页面可见之前应用您的css，从而避免在应用后更改页面。如果你使用它，那么你必须使用！important或稍后页面添加的css将覆盖你的css规则。

因此，所有工作清单和css文件看起来都是这样.....
manifest.json

{
    "name": "css rules",
    "content_scripts": [
        {
         "matches": [
            "*://*.google.com/*",
            "*://*.google.com.au/*"
         ],
         "css": ["new.css"],
         "run_at" : "document_start"
        }
    ],
    "version":"1.0"
}

new.css

button.eswd { border: 2px solid #000000 !important;}

Answer 2

在元素上设置！important以覆盖Google的风格。

Chrome扩展程序可以对* .google.com进行小的CSS更改

2 个答案: