Chrome 拡張機能のソース コードを表示する方法

source-code-chrome-extensions-featured

コンピューターの Chrome ブラウザーにインストールする拡張機能は、定義済みのアクティビティを実行するソース コード ファイルのグループにすぎません。 好奇心旺盛な人は、これらの拡張機能を構築する正確なコードを見たいと思うかもしれません。 Chrome で Web ページのソース コードを表示するのは、ページを右クリックしてオプションを選択するのと同じくらい簡単ですが、Chrome 拡張機能のソース コードにアクセスするのはそれほど簡単ではありません。

ただし、拡張機能のソース コードを表示できなくなるわけではありません。 次の 2 つの方法を使用すると、コンピューターで Chrome 拡張機能のソース コードを表示できるはずです。

次の方法は、Mac を使用して示されています。

ファイル エクスプローラーで Chrome 拡張機能のソース コードを表示する

Chrome にインストールした拡張機能のファイルはコンピュータに保存されますが、フォルダ名が科学的なものであるため、見つけるのは簡単ではありません。 ただし、以下の方法を使用すると、拡張ソース ファイルが配置されているフォルダーを明らかにできるはずです。

1. パソコンで Chrome を開き、次のように入力します chrome://extensions をアドレス バーに入力し、Enter キーを押します。 ブラウザで拡張機能のリストが開きます。

extsource-extensions

2. 拡張機能のページが開いたら、右上隅にある [開発者モード] というラベルの付いたボックスを選択します。 ページ上の拡張機能の詳細を確認できるはずです。

extsource-developer

3. 拡張機能の ID が画面に表示されます。 ここで行う必要があるのは、表示したいソース コード ファイルの拡張機能の ID をメモすることです。

次の例では、「Adblock for Youtube」拡張機能の ID を強調表示しています。 次の手順で、この拡張機能のソース コードを公開します。

extsource-id

4. 拡張機能の ID を取得したら、次のように入力します。 chrome://version をブラウザのアドレス バーに入力し、Enter キーを押します。 拡張ファイルが存在するフォルダーを見つけるのに役立ちます。

extsource-version

5. Chrome バージョン ページで、「プロファイル パス」の値を強調表示してクリップボードにコピーします。 次のスクリーンショットに示されています。

extsource-profile

6. Finder (または OS のファイル マネージャー) を開きます。 上部の「移動」をクリックし、「フォルダへ移動…」を選択すると、Mac の拡張機能フォルダにアクセスできます。

extsource-goto

7. クリップボードにコピーしたプロファイル パスを [フォルダーへ移動] パネルに貼り付け、[移動] をクリックしてそのフォルダーを Finder ウィンドウで開きます。

extsource-path

8. 次の画面で「Extensions」フォルダをダブルクリックして、すべての拡張機能が利用可能なフォルダを開きます。

ここに表示されるのは、紛らわしい名前の付いた多数のフォルダーです。 これらのフォルダーは、Chrome にインストールした拡張機能用ですが、拡張機能名と同じ名前ではないため、拡張機能のフォルダーを見つけるのは困難です。

上記のいずれかの手順で書き留めた拡張機能 ID と同じ名前のフォルダーを探します。 それが拡張機能のフォルダーです。

extsource-folder

9. すべての拡張機能ファイルがフォルダーにあるはずです。お気に入りのエディターでそれらを開いてコードを確認できます。

これが、サードパーティ ツールを使用せずに Chrome 拡張機能のソース コードを表示する方法でした。 拡張機能のインストールを気にしない場合は、次のセクションが役立ちます。

拡張機能を使用して Chrome 拡張機能のソース コードを表示する

1. パソコンで Chrome を開き、Chrome 拡張ソース ビューアーページにアクセスし、[Chrome に追加] をクリックします。

extsource-add

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

extsource-prompt

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

ページが読み込まれたら、Chrome の拡張機能バーにある CRX アイコンをクリックし、[ソースを表示] を選択します。

extsource-crx

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

extsource-code

結論

ブラウザにインストールした拡張機能のソース コードを確認したい場合は、上記のガイドを参考にして、2 つの簡単な方法で確認してください。

画像クレジット:ソースコードクレフ

ニュースレターを購読する!

最新のチュートリアルが受信トレイに直接配信されます

すべてのニュースレターにサインアップしてください。

サインアップすることにより、あなたは当社のプライバシー ポリシーに同意し、ヨーロッパのユーザーはデータ転送ポリシーに同意したことになります。 お客様のデータを共有することはありません。いつでも購読を解除できます。

購読