Question

I just wrote a simple extension that has permission to *.google.com and changes some CSS on one class, and I think I overlooked something simple. I’m changing the +1 button, which is implemented like so:

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

In my style.css I say:

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

the change never appears. I also tried switching the class to Jt in case that was overriding my CSS, no luck. The class that defines the unclicked +1 button is the “eswa”, fyi.

As per the documentation I also set permissions to the sites I want to alter in my manifest.json

{
“name”: “G+ Rebrander”,
“version”: “0.92”,
“description”: “Returns the original branding for G+ (pre March 2012) such as the +1 button.”,
“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

In the future listing your whole manifest.json file would be extremely helpful, since your didnt its hard for me to know exactly what your doing and thus what your error could be….so Ill just list a few possibilities.

Using !important in your css rule is always a good idea when overriding css.

Permissions is for if your injecting code from say the background page, not content scripts that get automatically added. The docs are slightly vague on that.

For content scripts that get added automatically you only need to set the matches field of the content script.

Your matches dont have a * at the end of them and as such would only match the front page and not any search results, which is what I assume your targeting.

Keep in mind that google will typically redirect to a server in your country, so for me going to http://www.google.com will be redirected to http://www.google.com.au.

The unlicked +1 for me was ewsd, not ewsa.

If your only injecting css and not a script aswell then its a good idea to use the run_at field with a value of document_start. This will make sure your css is applied before the page is visible and thus avoid the page changing later when it gets applied. If you use this then you must use !important or the css added by the page later will override your css rule.

So with all that a working manifest and css file looks like this…..
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;}