技術とか戦略とか

IT技術者が技術や戦略について書くブログです。

Chromeの拡張機能を使用した文字列置換

以前の記事で、URLからJavaScriptを読みこむことでブラウザに表示される文字の変換を試みました。
しかし、URLから読み込ませる方法だと、大量の文字列置換はできません。
 
そこで、今回はChrome拡張機能を使用した文字列置換を試みました。
以下、サンプルコードです。
 
manifest.jsonは、「https://developer.mozilla.org/ja/docs/Web/JavaScript」にアクセスした際に「content.js」が実行される記述としています。
最小限の記述であるため、実際に配布する際には説明を入れたりアイコンをつけたりすると良いでしょう。
 
【構成】
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"
  ]
 }]
}

 
・content.js
document.body.innerHTML=document.body.innerHTML.replace(/JavaScript/g,'[JavaScript]');
document.body.innerHTML=document.body.innerHTML.replace(/ECMAScript/g,'[ECMAScript]');
 
【動作確認】
1.Chromeを開き、下記から「拡張機能の管理」を選択

f:id:akira2kun:20210302230333j:plain

 

2.「デベロッパーモード」をONにし、「パッケージ化されていない拡張機能を読み込む」を選択

f:id:akira2kun:20210302230354j:plain

 

3.サンプルコードが存在するフォルダを選択

f:id:akira2kun:20210302230420j:plain

 

4.manifest.jsonに記述したサイトにアクセスすると、自動で文字列置換が行われる

f:id:akira2kun:20210302230439j:plain

 

5.取り込んだ拡張機能の削除は、「Chromeから削除」を選択することで行う

f:id:akira2kun:20210302230504j:plain