Do not inherit the CSS of a webpage in my chrome extension

Question

Well, I am working on a chrome extension that creates a side bar (div) on the right. I have created my own CSS style file for this side bar. However, when this side bar is created on a website, it adopts the style and CSS established for such webpage. Therefore, I decided to declare an id and a class for each element in my side bar to be specific on which things I want to apply my own CSS file. I worked for a few things but most of my elements' style are overridden by the original webpage's CSS. I tried bootstrap but it modifies the entire website and crashes my extension. I have also tried to reset some elements with:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: initial;
    vertical-align: baseline;
    background: none;
}

But still not working. Does anybody know how can I apply my style sheet only to my side bar and the side bar must not inherit the style sheet of the website.

I don't think it's nicely possible, you have to set each of those css properties. Or, embed it in an iframe — Isaac, Aug 27 '18 at 23:56
you might also consider using non standard html elements like `` instead of `
` — Isaac, Aug 28 '18 at 00:02
Possible duplicate of [How to really isolate stylesheets in the Google Chrome extension?](https://stackoverflow.com/questions/12783217/how-to-really-isolate-stylesheets-in-the-google-chrome-extension) — wOxxOm, Aug 28 '18 at 04:24

Serg Chernata · Answer 1 · 2018-08-28T00:15:50.633

3

You can use all paired with * wildcard for a micro reset:

#yourDiv * {
    all: initial !important;
}

Support is really good, especially since you're developing this extension for chrome.

!important may or may not be necessary.

edited Aug 28 '18 at 00:15

answered Aug 28 '18 at 00:06

Serg Chernata

12,280
6
32
50

1

I wouldn't target `*`, id target his sidebar – Isaac Aug 28 '18 at 00:14
@SergChernata, thank you. It actually helped. However, if I use "all: initial !important;", it will ignore almost all the CSS I had. So I added "!important" to each attribute of CSS and I worked. I don't think this is much convenient. What would you say? – Andres Naranjo Aug 28 '18 at 15:08
@AndresNaranjo Not at all, but that's your choice. – Serg Chernata Aug 28 '18 at 19:07

score 0 · Accepted Answer · answered Aug 28 '18 at 00:06

0

When you are doing your CSS, you can override certain values by using the !important keyword. For example:

h1 {color: red !important}

answered Aug 28 '18 at 00:06

CodeRocks

655
5
10
25

Thanks! That helped me a lot. However, I have to apply this to each attribute of each element. Is there any way to apply `!important` to the whole css? – Andres Naranjo Aug 28 '18 at 15:16

Do not inherit the CSS of a webpage in my chrome extension

2 Answers2