google-chrome-extension - 如何创建将在源代码中搜索文本并更改格式的 Chrome 扩展程序

Question

我是新来的...我想知道是否有人可以在这里帮助我指出正确的方向。

我希望创建一个 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>

等等等等等等……我想突出显示括号中的大约 100 个数字。可能还有另外 100 个我不想突出显示。

Answer 1

好的，首先，我将向您展示如何将代码注入(inject)您想要的页面，我们稍后会选择正确的数字。我将使用 jQuery在整个示例中，它并不是绝对必要的，但我觉得它可能会使它更容易一些。

首先我们声明一个 content script在我们的 list 以及host permissions对于您要注入(inject)的页面:

"content_scripts": [
{
  "matches": ["http://www.domain.com/page.html"],
  "js": ["jquery.js","highlightNumbers.js"],
  "css": ["highlight.css"]
}],
"permissions": ["http://www.domain.com/*"]

这会将我们的代码放置在我们尝试更改的页面中。现在您说您要突出显示大约 100 个不同的数字，我将假设这些是不匹配任何模式的特定数字，因此选择所有这些数字的唯一方法是制作一个明确的数字列表突出显示。

highlightNumbers.js

// This array will contain all of the numbers you want to highlight
// in no particular order
var numberArray = [670,710,820,1000,...];

numberArray.forEach(function(v){
  // Without knowing exactly what the page looks like I will just show you 
  // how to highlight just the numbers in question, but you could easily
  // similarly highlight surrounding text as well

  var num = "(" + v + ")";

  // Select the '<td>' that contains the number we are looking for
  var td = $('td.col-question:contains('+num+')');

  // Make sure that this number exists
  if(td.length > 0){

    // Now that we have it we need to single out the number and replace it
    var span = td.html().replace(num,'<span class="highlight-num">'+num+'</span>');
    var n = td.html(span);
  }
    // Now instead of '(1000)' we have
    // '<span class="highlight-num">(1000)</span>'
    // We will color it in the css file
});

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

highlight.css

span.highlight-num{
  background-color: rgb(100, 255, 71);
}

这应该为您放入 js 文件中的数组中的所有数字着色。让我知道它是否有任何问题，因为我无法完全测试它。