Google chrome extension 如何创建在源代码中搜索文本并改变格式的Chrome扩展

我是新来的。。。我想知道是否有人能帮我指出正确的方向

我希望创建一个Chrome扩展，在页面中搜索多个不同的字符串（例如：“（410）”或“（1040）”，不带引号），并突出显示这些字符串，以便更容易查看

进一步解释一下我为什么需要这样做：我经常和其他同事排着队工作，我需要关注一些具体的事情，但我可以忽略页面上的其他问题。因此，如果突出显示我的特定项目，将非常有帮助

谢谢大家!

编辑：源代码如何工作的示例：

<td class="col-question">28 (510). <span id="ctl00_PlaceHolderMain_ctl01_ContentCheckList_ctl28_Label1" title=" &lt;p>
<td class="col-question">49 (1150). <span id="ctl00_PlaceHolderMain_ctl01_ContentCheckList_ctl49_Label1" title="&lt;p>

28（510）。

---

等等等等等等。。。括号中大约有100个数字，我希望突出显示。可能还有100个我不想突出显示的数字。

好的，首先，我将向您展示如何将代码注入到所需的页面中，我们将在稍后选择正确的数字。我将在整个示例中使用它，这并不是严格必要的，但我觉得它可能会使它变得更容易一些

首先，我们在清单中声明a，以及针对您要注入的页面：

“内容脚本”：[
{
“匹配项”：[“http://www.domain.com/page.html"],
“js”：[“jquery.js”，“highlightNumbers.js”]，
“css”：[“highlight.css”]
}],
“权限”：[“http://www.domain.com/*"]

这将把我们的代码放在我们试图更改的页面中。现在你说有大约100个不同的数字需要突出显示，我假设这些数字与任何模式都不匹配，所以选择所有这些数字的唯一方法是创建一个明确的要突出显示的数字列表

highlightNumbers.js

//此数组将包含所有要突出显示的数字
//没有特别的顺序
var numberArray=[6707108201000，…]；
numberArray.forEach（函数（v）{
//在不知道页面的确切外观的情况下，我将向您展示
//如何突出显示问题中的数字，但您可以轻松
//同样，突出显示周围的文本
var num=“（“+v+”）”；
//选择包含我们要查找的号码的“”
var td=$（'td.col问题：包含（'+num+'））；
//确保此号码存在
如果（td.length>0）{
//现在我们有了它，我们需要挑出号码并替换它
var span=td.html（）.replace（num，+num+'）；
var n=td.html（span）；
}
//现在我们有了“1000”而不是“1000”
// '(1000)'
//我们将在css文件中为其着色
});

既然我们已经挑出了所有重要的数字，我们需要给它们上色。当然，你可以使用任何你想要的颜色，但是为了这个例子，我将使用明亮的绿色

突出显示.css

span.highlight-num{
背景色：rgb（100255,71）；
}

---

这将为

js

文件中数组中的所有数字上色。如果它有任何问题，请告诉我，因为我无法准确测试它。

@BeardFist 28（510）@BeardFist我将把它添加到问题中——是的，有一个相当大的数字列表我想突出显示。例如，670710、820、1000等（我可能需要突出显示100个不同的数字）。我想强调的是数字本身。谢谢你。。。我会很快解决这个问题，并让你不断更新！我真的很感激，伙计。你这个怪人。第一次尝试，效果非常好。谢谢你为我节省了很多时间。我非常讨厌编码，但是看到你的过程非常有帮助。非常感谢你！事实上我刚刚意识到一个问题。。。如果页面上没有一个数字，它将停止并不再继续突出显示其余的数字。有没有办法让它跳过页面上不存在的数字？那应该是numberraray.forEach，对吗？@CliffDesPeaux啊，是的，我忘了包括错误处理。它停止，因为它试图调用undefined或null的

html

方法。我更新了一个补丁，如果你想在网站上任何地方的特定文本上，而不一定是在一个特定的页面上，highlightNumber.js会是什么样子？