javascript - Chrome 拡張機能 - 単語またはフレーズの最初のインスタンスにテキストを追加する

Question

ロード時に文字列の最初のインスタンスを見つけ、詳細とリンクを追加する Chrome 拡張機能を作成しようとしています。

私が言えることから、 TreeWalker が最良のアプローチであるため、この例 ( Dom TreeWalker ) を採用しました。

これはうまく機能します (私の実装は非効率的ですが)。しかし、効果を微妙にしたいので、メニューやタイトルのテキストを置き換える可能性を減らすために、文字列が段落に表示される必要があるという要件を追加しました。

現在、動作は不安定です (いくつかの置換が行われ、他のものは行われません)。

.replace最後の実装が正しい解決策ではないことはわかっています。

何か案は？

var companies = [
        "Apples",        
        "Black Beans",
        "Sweet Potatoes"
    ];
var re = new RegExp(companies.join("|"), "i");

var walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_TEXT,
  function(node) {
    var matches = node.textContent.match(re);
    //look for matching text but also accept only those in paragraphs
    if((matches) && (node.parentNode.nodeName == "P")) {       
      return NodeFilter.FILTER_ACCEPT;

    } else {
      return NodeFilter.FILTER_SKIP;
    }
  },
  false);

var nodes = [];

while(walker.nextNode()) {
  nodes.push(walker.currentNode);
}


node=nodes[0]; //just replace the first hit within a paragraph

node.parentNode.innerHTML = node.parentNode.innerHTML.replace("Apples", "Apples [nutritional fact <a href='http://nutritionalinfo.com/apples'>Apples</a> ]");
node.parentNode.innerHTML = node.parentNode.innerHTML.replace("Black Beans", "Black Beans [nutritional fact <a href='http://nutritionalinfo.com/apples'>Apples</a> ]");
node.parentNode.innerHTML = node.parentNode.innerHTML.replace("Sweet Potatoes", "Sweet Potatoes[nutritional fact <a href='http://nutritionalinfo.com/apples'>Apples</a> ]");