Chrome拡張機能で文字列置換を行う方法

プログラミング

2021.04.142024.07.16

以前の記事で、URLからJavaScriptを読みこむことでブラウザに表示される文字の変換を試みました。
しかし、URLから読み込ませる方法だと、大量の文字列置換はできません。

そこで、今回はChromeの拡張機能を使用した文字列置換を試みました。
以下、サンプルコードです。

manifest.jsonは、「https://developer.mozilla.org/ja/docs/Web/JavaScript」にアクセスした際に「content.js」が実行される記述としています。
最小限の記述であるため、実際に配布する際には説明を入れたりアイコンをつけたりすると良いでしょう。

【構成】

test┳manifest.json
　　┗content.js

1 2	test┳manifest.json 　　┗content.js

【サンプルコード】

・manifest.json

{
  "name": "test",
  "version": "1.0.0",
  "manifest_version": 2,
  "content_scripts": ［{
    "matches": ［"https://developer.mozilla.org/ja/docs/Web/JavaScript"］,
    "js": ［
      "content.js"
    ］
  }］
}

{

"name": "test",

"version": "1.0.0",

"manifest_version": 2,

"content_scripts": ［{

"matches": ［"https://developer.mozilla.org/ja/docs/Web/JavaScript"］,

"js": ［

"content.js"

］

}］

}

・content.js

document.body.innerHTML=document.body.innerHTML.replace(/JavaScript/g,'［JavaScript］');
document.body.innerHTML=document.body.innerHTML.replace(/ECMAScript/g,'［ECMAScript］');

1 2	document.body.innerHTML=document.body.innerHTML.replace(/JavaScript/g,'［JavaScript］'); document.body.innerHTML=document.body.innerHTML.replace(/ECMAScript/g,'［ECMAScript］');