JQuery Chrome Extension, unable to change css attribute

Question

I have a simple chrome extension that I use on one URL to change the layout of a page very slightly (color, position etc)

I'm trying to do the same on a new URL. The code I'm using for both is the same and it works fine on one URL but not another.

This is the failing code. I've replaced the actual URL with SITE in this post.

var url = window.location.href;
if (url.toLowerCase().indexOf('SITE') >= 0) {   
    console.log ('Amending CSS');

    $('.main-container').css({"background":"red"});

}

The element I'm trying to change is: <clr-main-container _ngcontent-c0="" class="main-container">

Checking my console I see 'Amending CSS' but nothing appears to have changed.

The URL is accessed via HTTPS and is a firewall, so I'm not sure if there is a way they could block changes or not.

Any one any ideas on this thanks :)

Have you checked the element in devtools to see if the CSS rule is being applied? Does the element exist in the DOM when your code runs? — Rory McCrossan
– Rory McCrossan, Commented Jan 7, 2020 at 9:06
@DanielASathishKumar that's logically identical. If the OPs original doesn't work, then that won't have any effect either — Rory McCrossan
– Rory McCrossan, Commented Jan 7, 2020 at 9:07
Use should use the property as background-color instead background in either way — Daniel A Sathish Kumar
– Daniel A Sathish Kumar, Commented Jan 7, 2020 at 9:11
@Tom probably, but it depends on what rules are overriding your setting, and where they are applied. Can you add a working example containing all relevant HTML, CSS and JS code to the question — Rory McCrossan
– Rory McCrossan, Commented Jan 7, 2020 at 9:12

Basil A. · Accepted Answer · 2020-01-09 07:10:17Z

1

I'm trying the same and it's working for snippet website check:

$(function(){
  var url = window.location.href;
  console.log(url);
  if (url.toLowerCase().indexOf('stacksnippets') >= 0) { 
    console.log ('Amending CSS');
    $('body').css({"background":"red"});
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

If the previous code didn't work with this might be due to a css on the same element with higher priority !important

check this:

$(function(){
  var url = window.location.href;
  console.log(url);
  if (url.toLowerCase().indexOf('stacksnippets') >= 0) { 
    console.log ('Amending CSS');
    $('body').addClass("red_bg");;
  }
});

.red_bg
{
background:red !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Jan 9, 2020 at 7:10

answered Jan 7, 2020 at 9:34

Basil A.

1,65112 silver badges28 bronze badges

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

2 Comments

Tom Over a year ago

Thanks this has helped me sort it.

Basil A. Over a year ago

happy to help :)

Piercy · Accepted Answer · 2020-01-07 09:10:39Z

1

I think you might need to wrap your code in

$(document).ready(function() {
// your code
});

This will wait for the page to be ready before it runs the code, hopefully ensuring the element is on the page.

May i also recommend the chrome extension, Stylebot. It allows you to apply custom CSS to any website, and it will remember it for future visits.

answered Jan 7, 2020 at 9:10

Piercy

8092 gold badges14 silver badges33 bronze badges

1 Comment

Tom Over a year ago

Thanks - sorry I should have said the while code is wrapped in this.

Collectives™ on Stack Overflow

JQuery Chrome Extension, unable to change css attribute

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related