Hello World 拡張機能

初めての Hello World 拡張機能を作成して、Chrome 拡張機能開発の基礎を学びます。

概要

「Hello World」の例を作成し、拡張機能をローカルに読み込み、ログの場所を特定し、その他の推奨事項を確認します。

Hello World

ユーザーが拡張機能のツールバー アイコンをクリックすると、「Hello Extensions」を表示します。

Hello 拡張機能
Hello 拡張機能のポップアップ

まず、拡張機能ファイルを保存する新しいディレクトリを作成します。必要に応じて、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 でローカルに読み込んでテストすることができます。すべてのファイルが保存されていることをご確認ください。

パッケージ化されていない拡張機能を読み込む

パッケージ化されていない拡張機能をデベロッパー モードで読み込むには:

  1. 新しいタブに「chrome://extensions」と入力して [拡張機能] ページに移動します。（設計上、chrome:// URL はリンクできません）。
    • または、拡張機能メニューのパズルボタンをクリックし、メニューの下部にある [拡張機能を管理] を選択します。
    • または、Chrome メニューをクリックし、[その他のツール] にカーソルを合わせて [拡張機能] を選択します。
  2. [デベロッパー モード] の横にある切り替えスイッチをクリックして、デベロッパー モードを有効にします。
  3. [Load unpacked] ボタンをクリックし、拡張機能のディレクトリを選択します。
    [広告表示オプション] ページ
    拡張機能ページ（chrome://extensions）

完了拡張機能をインストールしました。マニフェストに拡張機能アイコンが含まれていない場合は、拡張機能の汎用アイコンが作成されます。

拡張機能を固定する

デフォルトでは、拡張機能をローカルで読み込むと、拡張機能メニュー（パズル）に表示されます。開発中に拡張機能にすばやくアクセスできるよう、拡張機能をツールバーに固定できます。

拡張機能の固定
拡張機能の固定

拡張機能のアクション アイコン（ツールバー アイコン）をクリックすると、ポップアップが表示されます。

Hello World 拡張機能
Hello World 拡張機能

拡張機能を再読み込みする

コードに戻り、拡張機能の名前を「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!")

コンソールでログに記録されたこのメッセージを確認するには:

  1. ポップアップを開きます。
  2. ポップアップを右クリックします。
  3. [検証] を選択します。
    ポップアップを調査しています。
    ポップアップの調査
  4. DevTools で、[Console] パネルに移動します。
    DevTools コードパネル
    ポップアップの検査

エラーログ

では、拡張機能を分割しましょう。そのためには、popup.js で終了引用符を削除します。

console.log("This is a popup!) // ❌ broken code

[拡張機能] ページに移動し、ポップアップを開きます。[エラー] ボタンが表示されます。

エラーボタンがある拡張機能ページ

[エラー] ボタンをクリックして、エラーの詳細を確認します。

拡張機能のエラーの詳細

Service Worker、オプション ページ、コンテンツ スクリプトのデバッグの詳細については、拡張機能のデバッグをご覧ください。

拡張機能プロジェクトを構造化する

拡張機能プロジェクトを構築するにはさまざまな方法がありますが、前提条件は拡張機能のルート ディレクトリに manifest.json ファイルを配置することだけです。次に例を示します。

拡張機能フォルダの内容: manifest.json、background.js、script フォルダ、ポップアップ フォルダ、images フォルダ。

TypeScript を使用する

開発に VSCode や Atom などのコードエディタを使用する場合は、npm パッケージの chrome-types を使用して Chrome API のオートコンプリートを利用できます。この npm パッケージは、Chromium のソースコードが変更されると自動的に更新されます。

🚀? 構築を開始する準備はできましたか？

次のいずれかのチュートリアルを選択して、拡張機能の学習を始めましょう。

延長 ラボの内容
すべてのページでスクリプトを実行する すべてのページに要素を自動的に挿入するため。
アクティブなタブにスクリプトを挿入する 拡張機能のアクションをクリックした後に、現在のページでコードを実行するため。
タブを管理する ブラウザのタブを管理するポップアップを作成するため。
Service Worker でイベントを処理する 拡張機能 Service Worker がイベントを処理する方法。