Chrome扩展程序仅在具有特定内容的类上注入css

Question

我知道如何将CSS注入网页，并更改某个课程，但如果我不想更改所有课程该怎么办？

例如，假设我有一个div：

<div class="content">
   <p> My favorite color is yellow </p>
</div>
<div class="content">
   <p> My favorite color is green </p>
</div>

我想使用内容脚本编辑.content类的CSS，但只包含包含关键字"green"

的CSS

我是否必须使用Javascript，如果是这样，我该怎么做？

Answer 1

如果您愿意使用jQuery，可以使用:contains() selector。

示例

$(".content:contains('green')").css("color", "green");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <p>My favorite color is yellow</p>
</div>
<div class="content">
  <p>My favorite color is green</p>
</div>

Answer 2

或者让它变得非常简单，如下面

var item = $('.content');
  for (var i = 0; i <= item.length; i++) {
   if ($(item[i]).text().indexOf("green")>= 0) {
         $(item[i]).css('color','red');
      }
  }