CODEWITHSUNDEEP
cssgoogle-chrome-extension
user736893
user736893

Reputation:

injecting CSS changes with chrome extension

I'm writing some custom chrome extensions to reformat certain sites. I'm having lots of luck with simply hiding things, however I've run into a problem trying to adjust a right-margin on something. Viewing the HTML results in the following:

<div id="bodyContent2" class="en">

In the styles area of the Chrome development tools I see

#bodyContent2.en {
  margin-right: 330px;
  min-height: 920px;
  width: auto;
}

If I manually change that to margin-right: 0px; with Chrome it does exactly what I want. However, the following lines of CSS do not work when called from my manifest.json file in my extension:

#bodyContent2 {margin-right:0px;}
[id='bodyContent2']{margin-right:0px;}
#bodyContent2 .en {margin-right:0px;}
.en {margin-right:0px;}

None of them work and I don't understand why not. I literally just started working with chrome extensions today. Help is much appreciated. In the individual attempts I see the following CSS striked through in the chrome dev tools:

#bodyContent2 {
    <strike>margin-right: 0px;</strike>
}
.en {
   <strike>margin-right: 0px;</strike>
}

Upvotes: 1

Views: 679

Answers (1)

serg
serg

Reputation: 111365

Add !important to your rules to give them higher priority:

margin-right:0px !important;

If you want to understand the order in which css rules are applied read about selector specificity.

Upvotes: 3

Related Questions