Chrome拡張機能のソースコードを見る方法
Chrome拡張機能を作るに当たって、他の拡張機能がどういう実装をしているのか知りたくなりソースコードを見る方法がないか調べてみました。
結果、簡単に中身を見ることができたので3つ方法をご紹介します。
Chrome extension source
まず1つ目はChrome拡張機能のソースコードが確認できるChrome拡張機能Chrome extension source viewerです。
![Chrome extension source viewer - Chrome ウェブストア](https://prod-files-secure.s3.us-west-2.amazonaws.com/3b8084dc-07d1-4420-98b2-e8e14c2bc711/1018ae89-b35a-45e8-9662-324d24afd986/p_140_1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T064502Z&X-Amz-Expires=3600&X-Amz-Signature=0fa0f57dcbacf8e41c6350b4cea76e480c9baa7b9b7c2b8bf39f2ad427140bc9&X-Amz-SignedHeaders=host&x-id=GetObject)
使い方は簡単で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というオンラインツールを使う方法です。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/3b8084dc-07d1-4420-98b2-e8e14c2bc711/c4065e12-35a8-4afd-9d73-5267da749bde/p_140_2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T064502Z&X-Amz-Expires=3600&X-Amz-Signature=ea113e82942e2d42144616a3c3856ad49ba388a26f77730928182d098aeb103f&X-Amz-SignedHeaders=host&x-id=GetObject)
こちらも使用方法は簡単で、サイトにアクセスしたら一番上のテキストフィールドにソースコードを見たい拡張機能のURLを入力し、「Open this viewer」ボタンをクリックするだけです。
インストールした拡張機能の確認
Macの場合インストールした拡張機能のファイルは~/Library/Application\ Support/Google/Chrome/Default/Extensions/
に保存されています。
ls
コマンドを実行すると32桁のアルファベットからなるディレクトリが存在しています。
これは拡張機能のIDになっていてChromeウェブストアの拡張機能のURLや拡張機能の管理ページ(chrome://extensions/
)から確認することができます。
loading...
loading...
この方法はあまり使うことはないと思いますが、インターネットに繋がらない環境でソースコードを確認したい時などは良いかもしれません。