Chrome(クローム)の拡張機能でwebページで特定の文字にハイライトを付ける機能を自作したい。

例えばTwitterのタイムラインで「おはよう」というツイートがあれば、
おはようという単語の背景だけ色を変更するという感じです。

これだけならCTRL+Fで済むのですが、複数の単語にその処理をしたく、他の単語を追加したくなった時に追加できるようにもしようと思っています。

・試行錯誤して何とかmanifestファイルの作成
・拡張機能の反映（指定した要素の色変更）

等は出来たのですが、
自分の調べた方法では既存ページに

index.html

<span>おはよう　こんにちは　こんばんは</span>

という文字列があった場合

script.js

$('span').css('background', 'red')

とすると

「おはよう～こんばんは」の文字列の背景色が変更します。

この場合「おはよう」だけの色を変更するにはどうすればいいのだろう・・・。

なんだかんだ調べてるうちにこうなった

script.js

//span.stの部分はGoogle Chrome Developer Tools　
//Chromeの検証機能

$('span.st').each(function(){
let txt = $(this).text();
     $(this).html(
         txt.replace(/JavaScript/g,'<span style="background:yellow">JavaScript</span>')
   );
});

復習として振り返ってみる。

script.js

$('span.st').each(function(){

});

$('span.st')で要素を取得

.eachで繰り返し処理。
今回は「JavaScript」で検証したので、複数回出てくる「JavaScipt」という文字列を何回も取得するためなのかな

次はここ

script.js

let txt = $(this).text();
     $(this).html();
 

・変数宣言
今はES6なのでvarではなくlet使用
変数txtに$(this).text();を代入することで
要素をテキストとして取得（今回はspan.stの部分)

続いて$(this)　
progateでも学んだけどイマイチわかってない。。
今回みたいに同じ要素が複数ある場合に便利みたい？？
正直今でもよく分かってない・・
ちなみに気を付ける事として、thisは　''　で囲まない事！
理解できた時に追記します。。

script.js

// $(this)が正解　$('this')は不正解！

んで次

script.js

      $(this).html(
      txt.replace(/JavaScript/g,'<span style="background:yellow">JavaScript</span>')
   );

ここは自分なりに分かりやすくて.html()を使うことで$(this)に入ってる要素を
HTMLとして取得して、txt.replaceで置換してる。
今回はJavaScriptって文字が見つかったらそこにHTMLのタグを付け加えて色を変更しているって事。

初心者なりに調べまくってたどり着いた結果ですので、間違っている解釈あれば教えていただけると嬉しいです。

#今後追加していくかもしれない実装機能

・複数の単語に対応
・単語ごとに色変更

以上の2つをpopup内で処理できるようにしていきたい

ちなみにソースはこちら
https://github.com/Variax-Guitar/test