javascript - JQuery Chrome 扩展，无法更改 css 属性

Question

我有一个简单的 chrome 扩展，我在一个 URL 上使用它来稍微更改页面的布局(颜色、位置等)

我正在尝试对新网址执行相同的操作。我为两者使用的代码是相同的，并且它在一个 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>