以前の記事で、URLからJavaScriptを読みこむことでブラウザに表示される文字の変換を試みました。
しかし、URLから読み込ませる方法だと、大量の文字列置換はできません。
そこで、今回はChromeの拡張機能を使用した文字列置換を試みました。
以下、サンプルコードです。
manifest.jsonは、「https://developer.mozilla.org/ja/docs/Web/JavaScript」にアクセスした際に「content.js」が実行される記述としています。
最小限の記述であるため、実際に配布する際には説明を入れたりアイコンをつけたりすると良いでしょう。
【構成】
1 2 |
test┳manifest.json ┗content.js |
【サンプルコード】
・manifest.json
1 2 3 4 5 6 7 8 9 10 11 |
{ "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
1 2 |
document.body.innerHTML=document.body.innerHTML.replace(/JavaScript/g,'[JavaScript]'); document.body.innerHTML=document.body.innerHTML.replace(/ECMAScript/g,'[ECMAScript]'); |
【動作確認】
1.Chromeを開き、下記から「拡張機能の管理」を選択

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

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

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

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

いかがでしたでしょうか?
今回は文字列置換を例として挙げましたが、他にも、リンクの埋め込み、広告の削除、といったことが可能です。
Chromeの拡張機能は既に色々な機能が公開されていますので、どのようなことができるのかを既存の拡張機能を見て調べても良いかもしれません。
コメント