3

私はここで初めてです...誰かが私をここで正しい方向に向けるのを手伝ってくれるかどうか疑問に思っています.

ページでさまざまな文字列 (一例: "(410)" または "(1040)"、引用符なし) を検索し、これらを強調表示して見やすくする Chrome 拡張機能を作成しようとしています。

これが必要な理由をもう少し説明すると、他の同僚と列を作って仕事をすることがよくあります。集中する必要がある特定の事柄がありますが、ページの残りの質問は無視できます。したがって、私の特定のアイテムが強調表示されていると助かります。

ありがとうございました！

編集：ソースコードの仕組みの例：

<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>

etc etc etc...強調表示したい括弧内に約100個の数字があります。そしておそらく、強調したくない別の 100 があります。

4

1 に答える 1

7

では、まず、必要なページにコードを挿入する方法を説明します。正しい番号を選択する方法については、後ほど説明します。この例全体で使用jQueryしますが、厳密には必要ではありませんが、少し簡単になると思います。

最初にcontent script、マニフェストとhost permissions注入先のページでa を宣言します。

"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 に答える