このページは Cloud Translation API によって翻訳されました。

Hello World 拡張機能

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

概要

「Hello World」という拡張機能のローカルの読み込み、ログの検索、その他の推奨事項の確認を行うことができます。

Hello World

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

まず、拡張機能のファイルを保存するための新しいディレクトリを作成します。お好みで、フルバージョンのダウンロードも GitHub からソースコードを入手できます。

次に、このディレクトリに manifest.json という新しいファイルを作成します。この JSON ファイルは、拡張機能の機能、構成などです。たとえば、ほとんどのマニフェストファイルには、宣言する "action" キーが含まれています。 Chrome が拡張機能のアクションアイコンとして使用する画像と、拡張機能のアクションアイコンをクリックします。

{
  "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 メニューをクリックし、[その他のツール] にカーソルを合わせて [拡張機能] を選択します。
[Developer mode] の横にある切り替えスイッチをクリックして、デベロッパーモードを有効にします。
[Load unpacked] ボタンをクリックして拡張機能のディレクトリを選択します。 <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 拡張機能ページ（chrome://extensions）
をご覧ください。

やった！拡張機能がインストールされました。画像に拡張機能のアイコンが含まれていない場合その拡張機能の汎用アイコンが作成されます。

拡張機能を固定する

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

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

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

コードに戻り、拡張機能の名前を「Hello Extensions of the world!」に変更します。使用します。

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world!",
  ...
}

ファイルを保存した後、ブラウザでこの変更を確認するには、拡張機能も更新する必要があります。経路 [拡張機能] ページを開き、[オン] / [オフ] の切り替えの横にある更新アイコンをクリックします。

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

拡張機能を再読み込みするタイミング

次の表に、変更を表示するために再読み込みする必要があるコンポーネントを示します。

拡張機能コンポーネント	拡張機能の再読み込みが必要です
マニフェスト	○
Service Worker	○
コンテンツスクリプト	○（ホストページを含む）
ポップアップ	いいえ
オプションページ	いいえ
その他の拡張機能（HTML）ページ	いいえ

コンソールのログとエラーを検索する

コンソールログ

開発中は、ブラウザのコンソールログにアクセスすることでコードをデバッグできます。この例では、ポップアップのログが見つかります。まず、スクリプトタグを hello.html に追加します。

<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

popup.js ファイルを作成し、次のコードを追加します。

console.log("This is a popup!")

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

ポップアップを開きます。
ポップアップを右クリックします。
[検証] を選択します。 <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> ポップアップを検査しています。
DevTools で、[Console] パネルに移動します。 <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> ポップアップを検査する
をご覧ください。

エラーログ

では、拡張機能を解除しましょう。そのためには、popup.js 内の閉じ引用符を削除します。

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

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

エラーボタンが表示されている拡張機能ページ

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

拡張機能のエラーの詳細

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

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

拡張機能プロジェクトの構造にはさまざまな方法があります。ただし前提条件は拡張機能のルートディレクトリにある manifest.json ファイルは、次の例のようになります。

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

TypeScript を使用する

VSCode や Atom などのコードエディタを使用して開発している場合は、npm 予測入力機能を活用するには、chrome-types パッケージを Chrome API です。この npm パッケージは、Chromium のソースコードがビルドされると自動的に更新されます。できます。

🚀? 制作を始める準備はできましたか？

以下のチュートリアルのいずれかを選択して、拡張機能の学習を開始してください。

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