3

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

我正在寻找创建一个 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 个我不想突出显示。

4

1 回答 1

7

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

首先，我们content script在清单中声明 a以及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
});

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

高亮.css

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

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

于 2013-05-07T22:37:14.187 回答