preventing page CSS from affecting Chrome extension CSS - css

Question

I have a Chrome extension that injects a DIV into each page, and styles that DIV with a style sheet included in the extension. On some pages, the injected DIV looks as intended, but on others it doesn't. One the StackOverflow site, for example, the box-shadow property of my elements is overridden, despite the fact that it is specifed as ! important in my CSS.
When I inspect the element in question, Chrome tells me that the box-shadow property is not applied (it is shown struck-through), but it does not tell me why: nothing in the cascade of styles specifies that property.
When I added the box-shadow property directly to the elements (without the benefit of a CSS class), the CSS inspector view showed that the properties are associated with the element, but the effect is still absent.
UPDATED: code snippets:
Here is what I specify in my code:
var $bar = $('<div>').addClass('pp_bar').css({
'box-shadow': '-1px 0px 2px 1px #444',
'-moz-box-shadow': '-1px 0px 2px 1px #444',
'-webkit-box-shadow': '-1px 0px 2px 1px #444'
});
Here is the CSS:
.pp_bar {
height: 80%;
right: -4px;
top: 0px;
position: absolute;
box-shadow: -1px 0px 2px 1px #444 ! important;
-webkit-box-shadow: -1px 1px 2px 1px #444 ! important;
-moz-box-shadow: -1px 1px 2px 1px #444 ! important;
}
Here is what Chrome shows as the computed style:
-webkit-box-shadow: #444 0px 0px 1.2000000476837158px 0px;
element.style - rgb(68, 68, 68) -1px 0px 2px 1px
.pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet
You can see that the value used (#444 0px 0px 1.2000000476837158px 0px) is different from the element style (as assigned in my code; the element style overries the class values (which are the same). Without the element style setting, the class values are shown struck out.
On sites in which this works correctly, the browser reports the following in the computed style:
-webkit-box-shadow: #444 -1px 1px 2px 1px;
element.style - rgb(68, 68, 68) -1px 0px 2px 1px
.pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet
What should I try next?

Answer 1

Set the style on the element itself, with the !important flag. Then, you can know for sure that the style is being applied on the element with the highest priority.
Examples:
var div = document.createElement('div');
// Pick any of these (the first two lines have identical results)
div.style.setProperty('box-shadow', '0 0 3px red', 'important');
div.style.cssText += 'box-shadow: 0 0 3px red !important';
// If the HTML is generated from a string:
div.innerHTML = '<div style="box-shadow:0 0 3px!important;">...</div>';
Non-example (does not work!):
div.style.boxShadow = '0 0 3px red !important'; // Does not work!
If you cannot afford to set the inline styles, try to achieve a higher specifity at your CSS selectors, by including an ID for example.