CODEWITHSUNDEEP
cssgoogle-chromegoogle-chrome-extensioncross-domain
artemave
artemave

Reputation: 6946

cssRules/rules are null in Chrome

My chrome extension needs to modify certain css rules on user's page. Accessing styles via document.styleSheets only gives access to styles linked from within the same domain. Other elements of document.styleSheets array have cssRules/rules set to null.

Why is it cross domain policy applies here? Styles are being applied anyway regardless of their origin, so what is the point? And how to get around it in my case?


EDIT:

The reason I need to MODIFY user css rules (as opposed to simply adding my own) is that I need to protect custom element injected by extension from being affected by * rules. see details in this question

Upvotes: 26

Views: 6511

Answers (2)

Kudit
Kudit

Reputation: 4379

I fixed my version of the issue by changing the url from http:// to https://. Doh!

Upvotes: 0

serg
serg

Reputation: 111325

Content scripts don't have any cross-domain privileges comparing to a regular javascript, so any limitations are carried over. See related question #1, question #2.

You can inject your own css style in the manifest:

"content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"]
    }
]

where you can try to overwrite original styles by defining rules with higher specificity.

You can also just tweak concrete element styles through javascript:

document.getElementById("id").style.property="value";

Upvotes: 6

Related Questions