CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-chrome
john.ab
john.ab

Reputation: 53

Preventing document stylesheet from affecting chrome extension injected element style

I am writing a chrome extension it will inject some elements into the document. The problem is injected elements css are inherited from stylesheet specified in the document.

Style used in the document

div {
    color:red;
    border:1px solid black;
}

Injected div stylesheet from extension

#myext div {
   color:#ccc;
}

But, I haven't specified border color in my stylesheet so it inherits from the page stylesheet and uglified embedded elements.

To overcome this, I came to a conclusion to specify all css properties to my container (#myext) so all child elements will inherit from these or using iframe to avoid overriding css.

What is the best idea?

Upvotes: 2

Views: 922

Answers (2)

dvd
dvd

Reputation: 189

Maybe you can consider creating your own tags ?

Example, instead of injecting a <div> you could inject a <custom-div> and set it basics rules like display:block;. This will prevent inheriting regular tags css rules.

I'm currently building a chrome extension that needs to inject some HTML in pages and I haven't been able yet to find contradicting arguments against the solution above.

Upvotes: 0

abbott567
abbott567

Reputation: 862

Making everything specific to the ID like you suggested would make sure the right divs were targeted... That's how most plugins tend to do things... You could always write it in SCSS and compile it to make life easier when coding, using SCSS you could just wrap everything inside the ID like:

#mytext {
    div {
        border: 0;
    }

    h1 {
        color: #000;
    }
}

Upvotes: 1

Related Questions