初めての Hello World 拡張機能を作成して、Chrome 拡張機能開発の基礎を学びます。
概要
「Hello World」の例を作成し、拡張機能をローカルに読み込み、ログの場所を特定し、その他の推奨事項を確認します。
Hello World
ユーザーが拡張機能のツールバー アイコンをクリックすると、「Hello Extensions」を表示します。
まず、拡張機能ファイルを保存する新しいディレクトリを作成します。必要に応じて、GitHub からソースコード全体をダウンロードすることもできます。
次に、このディレクトリに manifest.json
という新しいファイルを作成します。この JSON ファイルには、拡張機能の機能と構成が記述されています。たとえば、ほとんどのマニフェスト ファイルには "action"
キーが含まれています。このキーでは、Chrome で拡張機能のアクション アイコンとして使用する画像と、拡張機能のアクション アイコンがクリックされたときにポップアップで表示する HTML ページを宣言しています。
{
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}
ディレクトリにアイコンをダウンロードし、"default_icon"
キーに含まれるものと一致するようにその名前を変更します。
ポップアップ用に、hello.html
という名前のファイルを作成し、次のコードを追加します。
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
拡張機能のアクション アイコン(ツールバー アイコン)をクリックすると、ポップアップが表示されるようになりました。Chrome でローカルに読み込んでテストすることができます。すべてのファイルが保存されていることをご確認ください。
パッケージ化されていない拡張機能を読み込む
パッケージ化されていない拡張機能をデベロッパー モードで読み込むには:
- 新しいタブ��「
chrome://extensions
」と入力して [拡張機能] ページに移動します。(設計上、chrome://
URL はリンクできません)。- または、拡張機能メニューのパズルボタンをクリックし、メニューの下部にある [拡張機能を管理] を選択します。
- または、Chrome メニューをクリックし、[その他のツール] にカーソルを合わせて [拡張機能] を選択します。
- [デベロッパー モード] の横にある切り替えスイッチをクリックして、デベロッパー モードを有効にします。
- [Load unpacked] ボタンをクリックし、拡張機能のディレクトリを選択します。
完了拡張機能をインストールしました。マニフェストに拡張機能アイコンが含まれていない場合は、拡張機能の汎用アイコンが作成されます。
拡張機能を固定する
デフォルトでは、拡張機能をローカルで読み込むと、拡張機能メニュー()に表示されます。開発中に拡張機能にすばやくアクセスできるよう、拡張機能をツールバーに固定できます。
拡張機能のアクション アイコン(ツールバー アイコン)をクリックすると、ポップアップが表示されます。
拡張機能を再読み込みする
コードに戻り、拡張機能の名前を「Hello Extensions of the world!」に変更します。
{
"manifest_version": 3,
"name": "Hello Extensions of the world!",
...
}
ファイルを保存した後、ブラウザでこの変更を確認するには、拡張機能も更新する必要があります。[Extensions] ページに移動し、オン/オフの切り替えボタンの横にある更新アイコンをクリックします。
拡張機能を再読み込みするタイミング
次の表に、変更を反映するために再読み込みする必要があるコンポーネントを示します。
拡張コンポーネント | 拡張機能の再読み込み��必要 |
---|---|
マニフェスト | ○ |
Service Worker | ○ |
コンテンツ スクリプト | ○(およびホストページ) |
ポップアップには | × |
オプション ページ | × |
その他の広告表示オプションの HTML ページ | × |
コンソールのログとエラーを確認する
コンソールのログ
開発中にブラウザのコンソールログにアクセスして、コードをデバッグできます。この例では、ポップアップのログを探します。まず、hello.html
に script タグを追加します。
<html>
<body>
<h1>Hello Extensions</h1>
<script src="popup.js"></script>
</body>
</html>
popup.js
ファイルを作成し、次のコードを追加します。
console.log("This is a popup!")
コンソールでログに記録されたこのメッセージを確認するには:
- ポップアップを開きます。
- ポップアップを右クリックします。
- [検証] を選択します。
- DevTools で、[Console] パネルに移動します。
エラーログ
では、拡張機能を分割しましょう。そのためには、popup.js
で終了引用符を削除します。
console.log("This is a popup!) // ❌ broken code
[拡張機能] ページに移動し、ポップアップを開きます。[エラー] ボタンが表示されます。
[エラー] ボタンをクリックして、エラーの詳細を確認します。
Service Worker、オプション ページ、コンテンツ スクリプトのデバッグの詳細については、拡張機能のデバッグをご覧ください。
拡張機能プロジェクトを構造化する
拡張機能プロジェクトを構築するにはさまざまな方法がありますが、前提条件は拡張機能のルート ディレクトリに manifest.json ファイルを配置することだけです。次に例を示します。
TypeScript を使用する
開発に VSCode や Atom などのコードエディタを使用する場合は、npm パッケージの chrome-types を使用して Chrome API のオートコンプリートを利用できます。この npm パッケージは、Chromium のソースコードが変更されると自動的に更新されます。
🚀? 構築を開始する準備はできましたか?
次のいずれかのチュートリアルを選択して、拡張機能の学習を始めましょう。
延長 | ラボの内容 |
---|---|
すべてのページでスクリプトを実行する | すべてのページに要素を自動的に挿入するため。 |
アクティブなタブにスクリプトを挿入する | 拡張機能のアクションをクリックした後に、現在のページでコードを実行するため。 |
タブを管理する | ブラウザのタブを管理するポップアップを作成するため。 |
Service Worker でイベントを処理する | 拡張機能 Service Worker がイベントを処理する方法。 |