始める
Chrome 拡張機能の開発へようこそ。初めての Chrome 拡張機能を作成して配布するために必要な情報をすべて確認します。
概要
拡張機能とは
Chrome 拡張機能は、ユーザー インターフェースのカスタマイズ、ブラウザのイベントの監視、ウェブの変更によって、ブラウジングの利便性を高めます。拡張機能のその他の例については、Chrome ウェブストアをご覧ください。
どのように構築されているのか?
作業内容
拡張機能の用語
Chrome 拡張機能は、さまざまな役割を担う要素で構成されています。
マニフェスト
拡張機能のマニフェストは、特定のファイル名を持つ必要がある唯一のファイル(manifest.json)です。また、拡張機能のルート ディレクトリに配置する必要があります。このマニフェストでは、重要なメタデータの記録、リソースの定義、権限の宣言、バックグラウンドとページで実行するファイルの指定を行います。
Service Worker
Service Worker はバックグラウンドで動作し、ブックマークの削除やタブの閉じるなどのブラウザ イベントを処理します。DOM にアクセスできませんが、このユースケースでは DOM をオフスクリーン ドキュメントと組み合わせることができます。
コンテンツ スクリプト
コンテンツ スクリプトは、ウェブページのコンテキスト内で JavaScript を実行します。
ツールバーのアクション
ユーザーが拡張機能のツールバー アイコンをクリックしたときにコードを実行するか、Action API を使用してポップアップを表示します。
サイドパネル
ブラウザのサイドパネルにカスタム UI を表示します。
DeclarativeNetRequest
ネットワーク リクエストを傍受、ブロック、変更する。
Chrome ウェブストアに公開する
ご自身で拡張機能を作成する場合は、開始チュートリアルをご覧ください。Chrome ウェブストアに公開するには、まず以下の点に注意する必要があります。
ポリシーについて理解する
Chrome ウェブストアで配布する拡張機能は、デベロッパー プログラム ポリシーに準拠している必要があります。これらのポリシーを確認して、拡張機能が Chrome ウェブストアでホストされるようにしてください。
すべての拡張機能のロジックを含める
コードを記述する際は、すべてのロジックを拡張機能のパッケージに含める必要があることに留意してください。つまり、実行時に追加の JavaScript コードをダウンロードすることはできません。拡張機能のセキュリティを改善するは、リモートでホストされるコードの実行に代わる方法を提供します。
チュートリアル
以下のチュートリアルを選択して、拡張機能の学習を始めましょう。
最初の拡張機能
最初の Hello World 拡張機能を作成します。ここでは、拡張機能の開発ワークフローに慣れることができます。
すべてのページでスクリプトを実行する
指定したサイトに要素を自動的に追加する方法を確認します。
アクティブなタブにスクリプトを挿入する
ツールバー アイコンをクリックして、現在のページのスタイルを簡略化する方法を学習します。
タブ マネージャーを作成する
タブを管理するポップアップの作成方法を説明します。
Service Worker でイベントを処理する
拡張機能 Service Worker を作成してデバッグする方法を学習します。
拡張機能をデバッグする
デバッグ中にログとエラー メッセージを確認する方法について学びます。