Chrome拡張機能のソースコードを見る方法

Chrome拡張機能を作るに当たって、他の拡張機能がどういう実装をしているのか知りたくなりソースコードを見る方法がないか調べてみました。

結果、簡単に中身を見ることができたので3つ方法をご紹介します。

Chrome extension source

まず1つ目はChrome拡張機能のソースコードが確認できるChrome拡張機能Chrome extension source viewerです。

使い方は簡単でChromeウェブストアからChrome extension source viewerを追加し、ソースコードを見たい拡張機能のページでChrome extension source viewerのアイコンをクリックします。

すると「Download as zip」と「View source」の2つボタンが表示されるので「View source」ボタンをクリックするとブラウザ上でソースコードが確認できます。 「Download as zip」ボタンをクリックするとzipファイルでソースコードを丸々ゲットできます。

CRX Viewer（オンラインツール）

2つ目はCRX Viewerというオンラインツールを使う方法です。

こちらも使用方法は簡単で、サイトにアクセスしたら一番上のテキストフィールドにソースコードを見たい拡張機能のURLを入力し、「Open this viewer」ボタンをクリックするだけです。

インストールした拡張機能の確認

Macの場合インストールした拡張機能のファイルは~/Library/Application\ Support/Google/Chrome/Default/Extensions/に保存されています。

lsコマンドを実行すると32桁のアルファベットからなるディレクトリが存在しています。 これは拡張機能のIDになっていてChromeウェブストアの拡張機能のURLや拡張機能の管理ページ（chrome://extensions/）から確認することができます。

loading...

loading...

この方法はあまり使うことはないと思いますが、インターネットに繋がらない環境でソースコードを確認したい時などは良いかもしれません。