Google Chromeの拡張機能を開発する過程で、ページ上に表示される特定の文字列を変更する機能の実装を試していました。しかし、この機能は期待通りには動作せず、特定の文字列を置換後、短時間で元の文字列に戻ってしまう問題に直面しました。この記事では、この問題の解決過程を共有します。忘れないようにこちらでもメモします。

【発生した問題】

試しに、開発したChrome拡張機能は、文字置換の動作を確認するために、ブラウザ上に表示される「ます」を「でござるよ」に置換するシンプルなものでした。content_script.jsとmanifest.jsonを使用して、ページロード時にテキスト置換を実行しますが、置換後すぐに元のテキストに戻ってしまうという問題が発生しました。

【作成したスクリプト】

content_script.js

// content_script.js
function replaceText(node) {
  if (node.nodeType === Node.TEXT_NODE) {
    node.textContent = node.textContent.replace(/ます/g, "でござるよ");
  } else {
    node.childNodes.forEach(replaceText);
  }
}

replaceText(document.body);

manifest.json

{
    "name": "text_replace",
    "description": "text_replace",
    "version": "1.0",
    "manifest_version": 3
    },
    "content_scripts": [
        {
          "js": ["content_script.js"],
          "matches": ["https://qiita.com/*"]
        }
    ]
}

2つのファイルをフォルダに保存して、chrome://extensions/ にアクセス→右上の [デベロッパーモード] をオン→[パッケージ化されていない拡張機能を読み込む] をクリックして取り込みました。

【確認したこと】

サイトを読み込んですぐは、「でござるよ」で変更されますが、

1秒くらいたつとすぐにもとの「ます」にもどってしまいました。

Chromeデベロッパーモードのコンソールで、content_script.jsの中身を打つと、文字列が変更されたまま表示されるので、何かしらの動作で上書きされてしまっているのだろうと推測しました。

【解決した方法】

Qiitaに質問をしたところ、以下の回答をいただきました。
ご回答いただいた方々ありがとうございました。

「原因までは特定していませんがどこかで更新しているのかと思います。
ページ読み込み後に更新すれば変更はされそうですね。」

window.onload = function() {
   replaceText(document.body);
}

こちらを反映して、content_script.jsを書き換えました。

content_script.js

// content_script.js
function replaceText(node) {
  if (node.nodeType === Node.TEXT_NODE) {
    node.textContent = node.textContent.replace(/ます/g, "でござるよ");
  } else {
    node.childNodes.forEach(replaceText);
  }
}

window.onload = function() {
   replaceText(document.body);
}

すると、無事に変更された文字列のまま表示されてます！やったー