如何创建将在源中搜索文本并更改格式的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

好的,首先我将向您展示如何将代码注入您想要的页面,我们将稍微选择正确的数字.我将在jQuery整个这个例子中使用它,这不是绝对必要的,但我觉得它可以使它更容易一些.

首先,我们content script在清单中声明一个以及host permissions您注入的页面:

"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文件中的数组中的所有数字着色.如果我有任何问题,请告诉我,因为我无法准确测试它.