CODEWITHSUNDEEP
google-chromecssgoogle-chrome-extensiongoogle-chrome-devtools
nashr rafeeg
nashr rafeeg

Reputation: 829

chrome plugin css injection

Hi i am trying to inject custom css into a page my manifest file is as below 

{
  "name": "SaneHaveeru",
  "version": "1.0",
  "description": "This is to properly display haveeru .",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
      "matches": ["http://www.haveeru.com.mv/*"], 
      "css" : ["proper.css"]
    }
],
  "permissions": [
    "http://www.haveeru.com.mv/"
  ]

}

the css i am injecting is 

.post-frame {
    float: left;
    width: 470px;
    font-size: 18px;
    line-height: 30px;
    color: #292929;
}

but it seem that the pages css is overriding my custom css. as seen here screen shot of chrom developer tool showing my css being overridden by the pages css Is their way to force my css changes on to the page ?

cheers Nash rafeeq

Upvotes: 0

Views: 495

Answers (2)

PAEz
PAEz

Reputation: 8542

Put !important at the end of all your css rules...

.post-frame {
    float: left !important;
    width: 470px !important;
    font-size: 18px !important;
    line-height: 30px !important;
    color: #292929 !important;
}

http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

Upvotes: 1

Chamika Sandamal
Chamika Sandamal

Reputation: 24302

Set the style using JavaScript. it will override any page styles.

Upvotes: 1

Related Questions