Chromeの自作拡張機能が機能している状態でグーグル検索をすると何度も勝手に再読み込みされる

Question

Chromeの拡張機能を作成しています。
h抜きリンクなんかを開けるようにするものなのですが
入れた状態でグーグルで検索をすると何度も勝手に再読み込みされます
どうすればいいでしょうか

$(function(){
    const reg = new RegExp(/((h?)(ttps?://[a-zA-Z0-9.\-_@:/~?%&;=+#',()*!]+))/, "gi");
    $('body :not(script)').contents().filter(function(){
        return this.nodeType === 3;
    }).replaceWith(function(){
        return this.nodeValue.replace(reg, "<a href='h$3'>$1</a>")
    })
})

{
    "manifest_version":2,
    "name":"ttl",
    "version":"1.0",
    "content_scripts":[
      {
        "matches":[
          "http://*/*",
          "https://*/*"
        ],
        "js":[
          "jquery-3.5.1.min.js",
          "content.js"
        ]
      }
    ]
  }

Answer 1

<noscript> 要素の中で textnode 状態だった <meta http-equiv="refresh" /> タグのソースが jQuery の replaceWith() を通して要素に変換されて文書に追加されてしまっている からではないでしょうか。それ以外にも、 HTML ソースを持つ textnode があれば、同様に要素へ変換されて意図しない動作を引き起こしてしまうように読めます。

あとは、 <style> 要素の中身なんかも破壊し得ると思いますし、せめてもう少し処理対象のノードを丁寧に選んであげる必要があると考えられますが、リロード処理が走ってしまう理由自体は上記の通りかと思われます。

Comments

[MILKMAN]

HTMLソースを持つtextnode、どう対策すればいいでしょうか

[argparse]

具体的にどのような挙動を実現なさりたいのか次第かとは存じますが、例えば `const e = document.createElement('p');` 等として適当な要素を作成し、 `e.innerText = this.nodeValue` と入れてやった後に `const escaped = e.innerHTML` の方を取り出せば HTML タグを実体参照に変換できるので、 `replaceWith()` に渡しても要素に変換されてしまわないようには出来るかと思います。

[MILKMAN]

上手くいったんですが表示がおかしいです。大量にbrタグがが挿入されているみたいです

[MILKMAN]

なぜかは分かりませんがこうすれば上手くいきました。
var s = $("<p>").text(this.nodeValue).html()

[argparse]

ああ、確かに改行を `innerText` に入れると `<br/>` に変換されてしまいますね。失礼しました。この用途ではせめて代わりに `textContent` を使用すべきですね。
他にも、そもそもが HTML としてパースされたくない文字列を返して jQuery がパースしてしまうことが問題なので、 `replaceWith()` のコールバックに文字列ではなく **要素そのもの (の配列)** を返させるというのも有効かと思います。 `document.createTextNode()` や `document.createElement()` で (あるいは `$()` も交えて) 必要な要素を作成した後、それらを配列にまとめて `return` するという塩梅です。意思が反映させやすい分、煩雑にはなりますが。