Do not inherit the CSS of a webpage in my chrome extension
When you are doing your CSS, you can override certain values by using the !important keyword. For example:
h1 {color: red !important}
How can I efficiently overwrite CSS with a content script?
The approach I've found easiest and most effective is to wrap whatever html template you're injecting in a div with a very specific id.
<div id="my-specific-id">
// Your injected HTML template or section of the website you want to change
</div>
Once you've done this, reset all of the CSS that might affect that section.
#my-specific-id {
// A comprehensive CSS reset
}
// The rest of your CSS will override the reset above
Here is one such reset: http://html5doctor.com/html-5-reset-stylesheet/
Note that you probably won't need everything from the CSS Reset, so remove what isn't relevant to take some load off the browser. I can't imagine that you really want to reset figcaption
, for example.
As someone writing an extension, you should care a lot about whether or not your extension ruins the user experience on websites you inject scripts into.
The approach I've outlined will guarantee that only the sections of the website that you specifically care about are changed.
You can do this with your own templates (say you wanted to add a weather widget to every page without using an iframe) or with specific parts of the page. You could, for example, wrap all <p>
elements in a highly specific id that you define.
Here's an example using Sass from a recent project I've been working on...
#specific-id-css-ultimate-reset {
html, button, input, div, p, img, form {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
@import "modules/all";
@import "components/all";
@import "popups/all";
}
<div id="my-superspecific-html-template-wrapper">
<HTML TEMPLATE>
</div>
Separate content script css from site css?
You can provide a namespaced version of bootstrap, where global styles are not applied outside a namespace CSS selector.
For generating this you must build bootstrap yourself using SASS.
This answer is a good resume of the procedure: How to namespace Twitter Bootstrap so styles don't conflict
Related Topics
Does "Display:None" Prevent an Image from Loading
Can Media Queries Resize Based on a Div Element Instead of the Screen
Border-Radius in Percentage (%) and Pixels (Px) or Em
Stopping a Css3 Animation on Last Frame
Using Regular Expression in Css
How to Prevent CSS Inheritance
Css3'S Attr() Doesn't Work in Major Browsers
Setting Element Width Based on Height Via Css
Prevent Body Scrolling But Allow Overlay Scrolling
Css Media Queries: Max-Width or Max-Height
Nth-Child Doesn't Respond to Class
Can the :Not() Pseudo-Class Have Multiple Arguments
Css Scrollbar Style Cross Browser
Detect If an Input Has Text in It Using CSS - on a Page I Am Visiting and Do Not Control
Add a CSS Border on Hover Without Moving the Element
Css3 Nth of Type Restricted to Class
Aligning Grid Items Across the Entire Row/Column (Like Flex Items Can)