Chrome拡張機能のソースコードを表示・確認する2つの方法

パソコンのChromeブラウザにインストールした拡張機能は、その実態として、あらかじめ定義された動作を実行するソースコードファイルの集まりです。「自分が使っている拡張機能がどのようなコードで作られているのか見てみたい」と考える方もいるでしょう。Webページのソースコードならページ上で右クリックして項目を選ぶだけで簡単に表示できますが、Chrome拡張機能のソースコードへのアクセスはそれほど単純ではありません。

とはいえ、その理由で諦める必要はありません。以下で紹介する2つの方法を使えば、パソコン上でChrome拡張機能のソースコードを表示できます。

なお、本記事の手順はMacを使用して解説しています。

方法1:Finder(ファイルマネージャー)から拡張機能のソースコードを表示する

Chromeにインストールした拡張機能のファイルはパソコン内に保存されていますが、フォルダ名が意味の分からない英数字の羅列になっているため、簡単には見つかりません。以下の手順に従えば、拡張機能のソースファイルが保存されているフォルダを特定できます。

1. パソコンでChromeを開き、アドレスバーに chrome://extensions と入力してEnterキーを押します。ブラウザに拡張機能の一覧が表示されます。

2. 拡張機能ページが開いたら、右上にある「デベロッパー モード」のスイッチをオンにします。これにより、各拡張機能の詳細情報が表示されるようになります。

3. 画面に各拡張機能のIDが表示されます。ここで必要なのは、ソースコードを確認したい拡張機能のIDを控えておくことです。

この例では「Adblock for Youtube」拡張機能のIDをハイライトしています。以降の手順で、この拡張機能のソースコードを表示していきます。

4. 拡張機能のIDが分かったら、今度はアドレスバーに chrome://version と入力してEnterキーを押します。ここから、拡張機能ファイルが保存されているフォルダの場所を特定できます。

5. Chromeのバージョン情報ページで「プロフィール パス(Profile Path)」の値を選択し、クリップボードにコピーします。下のスクリーンショットの位置に表示されています。

6. Finder(Mac以外のOSではファイルマネージャー)を開き、上部メニューの「移動」をクリックして「フォルダへ移動…」を選択します。これでMac上の拡張機能フォルダへアクセスできるようになります。

7. 「フォルダへ移動」の入力欄に、先ほどコピーしたプロフィールパスを貼り付け、「移動」をクリックします。該当フォルダがFinderウィンドウで開きます。

8. 表示された画面で「Extensions」フォルダをダブルクリックして開きます。ここには、インストール済みのすべての拡張機能が格納されています。

フォルダの中には、一見して意味の分からない名前のフォルダが多数並んでいます。これらは確かにChromeにインストールした拡張機能のフォルダですが、フォルダ名は拡張機能の名前と一致しないため、目的のものを見つけにくくなっています。

そこで、先ほど控えておいた拡張機能IDと同じ名前のフォルダを探してください。それが目的の拡張機能のフォルダです。

9. フォルダ内には拡張機能のファイルがすべて含まれています。お好みのエディタで開けば、コードの中身を自由に確認できます。

以上が、サードパーティ製ツールを使わずにChrome拡張機能のソースコードを表示する方法です。拡張機能を追加しても構わないという方は、次のセクションの方法もおすすめです。

方法2:専用拡張機能を使ってソースコードを表示する

1. パソコンでChromeを開き、Chromeウェブストアの「Chrome extension source viewer」のページにアクセスして「Chromeに追加」をクリックします。

2. 続く画面で「拡張機能を追加」をクリックします。

3. 拡張機能がブラウザに追加されたら、Chromeウェブストアで任意の拡張機能のページ(例：Markdown Previewのページ)を開きます。

ページが読み込まれたら、Chromeツールバー上のCRXアイコンをクリックし、「View source(ソースを表示)」を選択します。

4. 選択した拡張機能のソースコードが、Chromeウィンドウ内に表示されます。

まとめ

ブラウザにインストールした拡張機能のソースコードが気になる方は、本ガイドで紹介した2つの簡単な方法をぜひ試してみてください。フォルダを直接辿る方法なら追加インストール不要、専用拡張機能を使う方法ならワンクリックで手軽に確認できるなど、それぞれにメリットがあります。用途に合わせて使い分けてみてください。