google-chrome-extension


How can I efficiently overwrite CSS with a content script?


My problem is that I want to overwrite a style of a site. Thing is, there is a way to do this, using the !important sentence, as seen in this example.
However, there are thousands of CSS instructions in my file, is there a more quick/efficient way to do this, i.e. not putting !important on each and every single line?
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>
Maybe it will be faster for you to include all styles from the original CSS that you don't wish to override in your injected stylesheet? If so, you can then remove the original stylesheet from page using content script/code injection or blocking the browser request for CSS file.
You can also write a small script that does some regex magic and adds !important to every line of given CSS file.

Related Links

Chrome extension localization in manifest not working
popup.html view not updating the newly assigned values of $scope variables in controller in popup.js
I need to connect my existing chrome extension to firebase .could anyone pls suggest a new way?
error while sending message from extension script to content script
how to customize rightclick on chrome devtools elements panel
Chrome extension custom payment solution in Pakistan?
How to get support tab for Google Chrome extension
How to Log to Console from Chrome Extension?
Chrome Extension - Detecting New Posts on a 4chan thread
Chrome Extension Template (Regex Filter) needed
Tricking a javascript code to think it has a focused window?
my extension keep getting rejected and i don't know why
Can I use an alias to release a chrome extension?
Chrome Extension - make a ribbon
Minimize developer tools window while debugging a chrome extension
Getting emulated mobile view of a temporarily changed html page

Categories

HOME
twitter
ionic-framework
variables
openstack
fft
iot
dot
sd-card
octobercms
yahoo-oauth
amortized-analysis
malloc
electronics
datastax-java-driver
adfs
facebook-php-sdk
quicklook
iron-router
serverless-framework
vaadin7
pc
normalizr
code-review
introduction
plunker
riot.js
excel-2007
google-search-api
firebase-crash-reporting
wpfdatagrid
react-css-modules
dbclient
file-rename
skia
ecto
uisplitview
karaf
repo
http-referer
overriding
revolution-slider
stacked
libvpx
awt
mesos-chronos
no-www
acoustics
businessworks
parentheses
drupal-6
colorama
csound
crypt
media-player
crosswalk-runtime
migradoc
django-debug-toolbar
markojs
ready-api
essence
revolution-r
jfugue
execute
coveralls
0xdbe
oberon
bigbluebutton
csquery
tween
codeigniter-url
network-interface
asp.net-dynamic-data
openexr
hyprlinkr
meteor-velocity
viadeo
oam
farseer
runtime.exec
dataservice
html4
simba
dbproviderfactories
chrono
netbeans-6.9
coredump
servicehost
remember-me
yslow
brewmp
iweb
adrotator
ctp4
text-coloring
gacutil
port-number
putchar

Resources

Encrypt Message