Modify CSS before page loads in chrome extension?

Question

I want to prevent an specific background-image being displayed on a page, possibly using jquery. However, the page and DOM is loaded before the JS is activated.

What I want to do is the following:

.pagelayout-login #page{
background: none;
}

I have tried the same in JQuery using:

$(document).ready(function(){

$(".pagelayout-login #page").css("background","none");

});

However, both modify the stylesheet after the image has been loaded and displayed.

If I add "run_at : "document_start" inside my content scripts, the CSS get's overridden by the page's CSS.

Is there a way to prevent the background from being displayed before it starts loading?

why don't you do it the other way? Append the image with Javscript and don't have it by default. — Nico O
– Nico O, Commented Mar 26, 2014 at 12:19
@NicoO Maybe because they don't have control over the page where the image is coming from. — user3466437
– user3466437, Commented May 16, 2014 at 17:06

Intuitisoft · Accepted Answer · 2014-03-26 14:16:10Z

2

you can add the CSS at the beginning :

chrome.tabs.insertCSS(tab.id, {code:'my css code', allFrames:false, runAt:"document_start"});

or add a script at the end like this :

chrome.tabs.executeScript(tab.id, {code:'my script code', allFrames:false, runAt:"document_end"});

with the CSS, you need to be the first, because it's a "Cascading Style". with the script, it must be the last change.

You can try to add !important to your CSS.

answered Mar 26, 2014 at 14:16

Intuitisoft

1,4171 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Max Langerak · Accepted Answer · 2014-03-26 12:31:59Z

0

I'd think this would be a lot easier the moment you remove the $(document).ready, everything inside that function runs after the page has completed loading.

answered Mar 26, 2014 at 12:31

Max Langerak

1,21710 silver badges18 bronze badges

Comments

user3466437 · Accepted Answer · 2014-05-16 17:04:56Z

0

Since this is in a Chrome extension, don't be afraid to use !important to ensure that your CSS overrides the page's CSS even if you "run_at : "document_start":

.pagelayout-login #page{
background: none !important;
}

This may or may not prevent the image from loading since it's still being referenced by the page's CSS, but it will at least prevent it from displaying right away. You will need to conduct your own tests to determine if Chrome will still attempt to request the image during page load in spite of this.

edited May 16, 2014 at 17:04

answered Mar 26, 2014 at 23:50

user3466437

3912 silver badges8 bronze badges

Collectives™ on Stack Overflow

Modify CSS before page loads in chrome extension?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related