JQuery Chrome Расширение, невозможно изменить css атрибут

Question

У меня есть простое расширение chrome, которое я использую на одном URL, чтобы немного изменить макет страницы (цвет, положение и т. Д. c)

Я пытаюсь сделать то же самое на новый URL. Код, который я использую для обоих, один и тот же, и он отлично работает на одном URL, но не на другом.

Это ошибочный код. Я заменил фактический URL-адрес на SITE в этом сообщении.

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

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

}

Элемент, который я пытаюсь изменить: <clr-main-container _ngcontent-c0="" class="main-container">

Проверяя свою консоль, я вижу «Изменение» CSS 'но, похоже, ничего не изменилось.

URL-адрес доступен через HTTPS и является брандмауэром, поэтому я не уверен, есть ли способ, которым они могут блокировать изменения или нет.

Любой кто-нибудь идеи по этому поводу спасибо:)

Answer 1

Я пытаюсь сделать то же самое, и это работает для проверки фрагмента веб-сайта:

$(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>

Если предыдущий код не работал с этим, это может быть связано с css на том же элементе с более высоким приоритетом !important

проверьте это:

$(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>

Answer 2

Я думаю, вам может понадобиться обернуть ваш код в

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

Это подождет, пока страница будет готова, прежде чем запустит код, надеясь, что элемент будет на странице.

Могу ли я также порекомендовать расширение chrome, Stylebot. Это позволяет вам применять пользовательские CSS к любому веб-сайту, и он будет помнить его для будущих посещений.