はじめに

拡張機能は、異なるがまとまりのあるコンポーネントで構成されています。 コンポーネントには、バックグラウンドスクリプト、コンテンツスクリプト、オプションペー 拡張機能コンポーネントは、HTML、CSS、JavaScriptなどのweb開発技術を使用して作成されます。 拡張子”sコンポーネントに依存し、その機能が必要としない毎のオプションです。,

このチュートリアルを拡張するユーザでの変化の背景色のページdeveloper.chrome.com. で多くの基幹部品に導入実証の関係。

開始するには、拡張子”のファイルを保持する新しいディレクトリを作成します。

完成した拡張機能はこちらからダウンロードできます。

マニフェストを作成します#

拡張機能はマニフェストから始まります。 manifest.jsonという名前のファイルを作成し、次のコードを含めるか、ここからファイルをダウンロードします。,

マニフェストファイルを保持するディレクトリは、現在の状態で開発者モードの拡張機能として追加できます。

1. chrome://extensionsに移動して、拡張機能の管理ページを開きます。
   • 拡張機能の管理ページは、Chromeメニューをクリックし、その他のツールの上にマウスを置いて拡張機能を選択することでも開くことができます。
2. 開発者モードを有効にするには、開発者モードの横にあるトグルスイッチをクリックします。
3. LOAD UNPACKEDボタンをクリックし、拡張ディレクトリを選択します。

Ta-da！, 拡張機能が正常にインストールされました。 マニフェストにはアイコンが含まれていないため、拡張機能の汎用ツールバーアイコンが作成されます。

Add instruction#

拡張機能はインストールされていますが、命令はありません。 background.jsというタイトルのファイルを作成するか、ここにダウンロードして拡張機能ディレクトリ内に配置して、バックグラウンドスクリプト

, 登録の背景スクリプト、マニフェストは拡張するファイルを参考に、そのファイルは行する

拡張機能は、非永続的なバックグラウンドスクリプトが含まれていることを認識し、登録されたファイルをスキャンして、リッスンする必要があ

この拡張機能は、インストールされるとすぐに永続変数からの情報が必要になります。 まず、runtime.onInstalledのリスニングイベントをバックグラウンドスクリプトに含めます。 内部onInstalledリスナー、拡張機能はストレージAPIを使用して値を設定します。, これは複数の拡張子部品へのアクセスする値を更新します。

ストレージAPIを含むほとんどのApiは、拡張機能が使用するには、マニフェストの"permissions"フィールドの下に登録する必要があります。

拡張機能の管理ページに戻り、[Reload]リンクをクリックします。 新しいフィールドInspect viewsは、青いリンクの背景ページで使用できるようになります。,

バックグラウンドスクリプト”のコンソールログ”を表示するには、リンクをクリックします。The color is green.“

ユーザーインターフェイスを導入#

拡張機能は、ユーザーインターフェイスの多くの形式を持つことができますが、これはポップアップを使用します。 popup.htmlというタイトルのファイルを作成してディレクトリに追加するか、ここからダウンロードします。 この拡張機能は、ボタンを使用して背景色を変更します。

バックグラウンドスクリプトと同様に、このファイルはpage_actionの下のマニフェストでポップアップとして指定する必要があります。,

ツールバーアイコンの指定は、page_actiondefault_iconsフィールドのpage_actionの下にも含まれています。 ここにimagesフォルダをダウンロードして解凍し、拡張機能のディレクトリに配置します。 拡張機能がイメージの使用方法を認識できるように、マニフェストを更新します。

拡張機能には、拡張機能の管理ページ、権限の警告、およびファビコンにも画像が表示されます。 これらのイメージは、マニフェストでiconsの下に指定されています。,

この段階で拡張機能を再読み込みすると、グレースケールアイコンが含まれますが、機能の違いは含まれません。 page_actionはマニフェストで宣言されているため、ユーザーがpopup.htmlと対話できるタイミングをブラウザーに通知するのは拡張機能

declarativeContentruntime.onInstalledリスナーイベント内のAPIを使用して、宣言されたルールをバックグラウンドスクリプトに追加します。

拡張機能には、マニフェスト内のdeclarativeContentAPIにアクセスするためのアクセス許可が必要です。,

ユーザーが"developer.chrome.com"を含むURLに移動すると、ブラウザーのツールバーにフルカラーのページアクションアイコンが表示されるようになりました。 のアイコンがフルカラー、ユーザーをクリックしてビューポップアップ.html。

ポップアップUIの最後のステップは、ボタンに色を追加することです。 https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.jsという名前のファイルを作成し、次のコードを含むファイルを拡張ディレクトリに追加するか、ここにダウンロードします。

このコードはpopup.htmlからボタンを取得し、ストレージから色の値を要求します。, 次に、ボタンの背景として色を適用します。 https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.jsにスクリプトタグを含めますpopup.html。

緑色のボタンを表示するには、拡張機能をリロードします。

レイヤーロジック#

拡張機能は現在、ポップアップをユーザーが使用できるようにする必要があります知っていますdeveloper.chrome.com 色付きのボタンを表示しますが、さらにユーザーとの対話のためのロジッ 次のコードを含めるには、https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.jsを更新します。,

更新されたコードは、ボタンにonclickイベントを追加し、プログラム的に挿入されたコンテンツスクリプトをトリガします。 これにより、ページの背景色がボタンと同じ色になります。 使用プ注入できるユーザが呼び出されたコンテンツのスクリプトではなく、自動車を挿入し不要なコードをホームページです。

マニフェストには、activeTab拡張機能にtabsAPIへの一時的なアクセスを許可する権限が必要です。 これにより、拡張機能はtabs.executeScriptを呼び出すことができます。,

拡張機能は完全に機能しました！ 拡張機能をリロードし、このページを更新し、ポップアップを開き、ボタンをクリックして緑色にします！ ただし、一部のユーザーは、背景を別の色に変更したい場合があります。

ユーザーにオプションを与える#

拡張機能では、現在、ユーザーが背景を緑色に変更できるだけです。 を含むオプションのページのユーザーの管理を拡張機能”s”機能性、さらにカスタマイズを閲覧です。,

まず、options.htmlというディレクトリにファイルを作成し、次のコードを含めるか、ここからダウンロードします。

次に、マニフェストにオプションページを登録します。

拡張機能をリロードし、[詳細]をクリックします。

詳細ページを下にスクロールし、拡張オプションを選択してオプションページを表示しますが、現在は空白で表示されます。

最後のステップは、オプションロジックを追加することです。, 拡張子ディレクトリにoptions.jsというファイルを次のコードで作成するか、ここからダウンロードしてください。

四つの色のオプションは、onclickイベントリスナーを持つオプションページ上のボタンとして生成されます。 ユーザーがボタンをクリックすると、拡張機能のグローバルストレージ内の色の値が更新されます。 すべての拡張子のファイルはグローバルストレージから色情報を取得するため、他の値を更新する必要はありません。

おめでとうございます！ このディレクトリには、単純ではあるが完全に機能するChrome拡張機能が含まれています。

次は何ですか？,

• Chrome拡張機能の概要は少しバックアップされ、拡張機能アーキテクチャ全般についての多くの詳細が記入されており、開発者はよく知りたい
• について学ぶオプションのためのデバッグ拡張子のデバッグチュートリアルです。
• Chrome拡張機能は、オープンウェブ上で利用可能なものを超えて強力なApiにアクセスできます。 クローム。*Apiドキュメントは、各APIについて説明します。
• 開発者ガイドには、高度な拡張機能の作成に関連するドキュメントへの数十の追加リンクがあります。,

---