はじめに
Chrome Web Storeなどで配布されているChromeの拡張機能に、コードを埋め込んで任意のコードを実行させる方法を紹介します。
配布されている拡張機能がどんな動きをするのかを知るために使えるかもしれません。
Chrome拡張機能ディレクトリ
OSによって微妙に異なりますが、Chrome Web Storeからインストールした拡張は、macOSの場合はこの位置に保存されます。
/Users/user/Library/Application Support/Google/Chrome/{Profile name}/Extensions/
今回は実験用として Dark Reader をインストールしてみました。
この拡張機能はWebstoreでのIDが eimadpbcbfnmbkopoojfekhnkhdbieeh なので、この名前のディレクトリで保存されています。
$ ls -l ~/Library/Application\ Support/Google/Chrome/Profile\ 4/Extensions/
total 0
drwx------@ 4 user staff 128 2 10 16:48 eimadpbcbfnmbkopoojfekhnkhdbieeh # ←これ
直接改変するとエラー
場所を特定できたので動きを分析したいだけであればもう十分ですが、実際にコードに変更を入れてそれを読み込ませてみます。
直接変更を加えるとブラウザ側でエラーが発生する仕様になっているので、一旦適当な作業用ディレクトリにコードを退避してから作業します。
直接改変した際に発生するエラー：
改変してみる
ということでデスクトップにコピーして作業します。
$ cp -r ./eimadpbcbfnmbkopoojfekhnkhdbieeh ~/Desktop
今回は作業ディレクトリ直下のmain.jsに Hello chrome! と表示させるコードを追加してみました。
console.log('Hello chrome!');
今回はこれだけです。
コードの編集が終わったら 拡張機能のページ の「デベロッパーモード」から「パッケージ化されていない拡張機能を読み込む」と進みます。
するとディレクトリの選択が求められるので、先程コピーした作業用ディレクトリの manifest.json が含まれれるディレクトリを選択します。
これで準備完了です！
ページを開いてみる
準備が整ったので、実際に改変した拡張機能のコードが実行される様子を見てみます。
今回は試しにブラウザコンソールに 'Hello chrome!' と出力するコードを追加してみました。
ブラウザコンソールを開いた状態で適当なページを開いてみます。
きちんと出力されているのが確認できますね。
気になった拡張機能をデバッグしてみるのに使えそうですね。
以上、拡張機能にコードを埋め込む方法でした。