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

始める

拡張機能は、さまざまなコンポーネントで構成されていますが、1 つにまとまっています。コンポーネントには、バックグラウンドスクリプト、コンテンツスクリプト、オプションページ、UI 要素、さまざまなロジックファイルを含めることができます。拡張機能のコンポーネントは、ウェブ開発技術（HTML、CSS、JavaScript）を使用して作成されます。拡張機能のコンポーネントは機能によって異なるため、すべてのオプションが必要になるわけではありません。

このチュートリアルでは、developer.chrome.com にあるページの背景色をユーザーが変更できる拡張機能を作成します。ここでは、多くのコアコンポーネントを使用して、関係性を簡単に紹介します。

まず、拡張機能のファイルを格納する新しいディレクトリを作成します。

完成した拡張機能はこちらでご確認いただけます。

マニフェストを作成する

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

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2
}

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

chrome://extensions に移動して [拡張機能の管理] ページを開きます。
- 拡張機能の管理ページは、Chrome メニューをクリックし、[その他のツール] にカーソルを合わせて [拡張機能] を選択することによっても開くことができます。
[デベロッパーモード] の横にある切り替えスイッチをクリックして、デベロッパーモードを有効にします。
[LOAD UNPACKED] ボタンをクリックし、拡張機能のディレクトリを選択します。

拡張機能の読み込み

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

手順を追加

拡張機能はインストールされていますが、指示はありません。background.js というファイルを作成して拡張機能ディレクトリに配置し、バックグラウンドスクリプトを導入します。

バックグラウンドスクリプトやその他多くの重要なコンポーネントは、マニフェストに登録する必要があります。マニフェストにバックグラウンドスクリプトを登録すると、参照するファイルとそのファイルの動作を拡張機能に指示します。

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

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

この拡張機能は、インストール後すぐに永続変数からの情報を必要とします。まず、バックグラウンドスクリプトで runtime.onInstalled のリスニングイベントを含めます。この拡張機能は、onInstalled リスナー内で storage API を使用して値を設定します。これにより、複数の拡張コンポーネントがその値にアクセスして更新できるようになります。

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log("The color is green.");
  });
});

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

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

拡張機能の管理ページに戻り、[再読み込み] リンクをクリックします。新しいフィールドの [ビューを検査] に青色のリンク（バックグラウンドページ）が表示されます。

ビューを調べる

リンクをクリックしてバックグラウンドスクリプトのコンソールログ「The color is green.」を表示します

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

拡張機能にはさまざまな形式のユーザーインターフェースがありますが、ここではポップアップを使用します。 popup.html という名前のファイルを作成してディレクトリに追加します。この拡張機能は、ボタンを使用して背景色を変更します。

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>

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

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

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

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "manifest_version": 2
}

また、拡張機能の管理ページ、権限に関する警告、ファビコンにも画像が表示されます。これらのイメージは、マニフェストの icons に指定します。

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  "manifest_version": 2
}

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

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

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })
      ],
          actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

拡張機能は、マニフェスト内の declarativeContent API にアクセスする権限が必要です。

{
  "name": "Getting Started Example",
...
  "permissions": ["declarativeContent", "storage"],
...
}

ポップアップ

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

ポップアップ UI の最後のステップは、ボタンに色を追加することです。以下のコードを含む popup.js というファイルを作成して、拡張機能ディレクトリに追加します。

let changeColor = document.getElementById('changeColor');

chrome.storage.sync.get('color', function(data) {
  changeColor.style.backgroundColor = data.color;
  changeColor.setAttribute('value', data.color);
});

このコードは、popup.html からボタンを取得し、ストレージから色値をリクエストします。その色がボタンの背景として適用されます。popup.html の popup.js に script タグを含めます。

<!DOCTYPE html>
<html>
...
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>
</html>

拡張機能を再読み込みすると、緑色のボタンが表示されます。

レイヤロジック

これで、この拡張機能は、developer.chrome.com のユーザーがポップアップを利用できるようになり、色付きのボタンを表示するようになりましたが、さらにユーザー操作を行うためのロジックが必要です。popup.js を更新して次のコードを含めます。

let changeColor = document.getElementById('changeColor');
...
changeColor.onclick = function(element) {
  let color = element.target.value;
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(
        tabs[0].id,
        {code: 'document.body.style.backgroundColor = "' + color + '";'});
  });
};

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

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

{
  "name": "Getting Started Example",
...
  "permissions": ["activeTab", "declarativeContent", "storage"],
...
}

これで拡張機能は完全に機能するようになりました。拡張機能を再読み込みして、このページを更新します。ポップアップを開いて、ボタンをクリックして緑色にします。しかし、ユーザーによっては背景を別の色に変更したい場合もあります。

ユーザーにオプションを提供する

現在のところ、この拡張機能では背景を緑色に変更することしかできません。オプションページを追加することで、ユーザーは拡張機能の機能をより細かく制御でき、ブラウジングエクスペリエンスをさらにカスタマイズできます。

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="buttonDiv">
    </div>
    <div>
      <p>Choose a different background color!</p>
    </div>
  </body>
  <script src="options.js"></script>
</html>

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

{
  "name": "Getting Started Example",
  ...
  "options_page": "options.html",
  ...
  "manifest_version": 2
}

拡張機能を再読み込みして、[詳細] をクリックします。

ビューを調べる

詳細ページを下にスクロールし、[拡張機能のオプション] を選択してオプションページを開きますが、現在は空白になっています。

拡張機能のオプション

最後のステップは、オプションのロジックの追加です。拡張機能ディレクトリに、次のコードを含む options.js というファイルを作成します。

let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
function constructOptions(kButtonColors) {
  for (let item of kButtonColors) {
    let button = document.createElement('button');
    button.style.backgroundColor = item;
    button.addEventListener('click', function() {
      chrome.storage.sync.set({color: item}, function() {
        console.log('color is ' + item);
      })
    });
    page.appendChild(button);
  }
}
constructOptions(kButtonColors);

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

次のステップ

これで完了です。このディレクトリには、シンプルながらも完全に機能する Chrome 拡張機能が含まれています。

次のステップ

Chrome 拡張機能の概要では、拡張機能のアーキテクチャ全般について、また、デベロッパーが知っておくべき特定のコンセプトについて、詳しく説明しています。
拡張機能のデバッグに使用できるオプションについては、デバッグチュートリアルをご覧ください。
Chrome 拡張機能では、オープンウェブで提供されている以上の強力な API にアクセスできます。chrome.* API のドキュメントでは、各 API について説明しています。
デベロッパーガイドには、高度な拡張機能の作成に関するドキュメントへの追加リンクが多数あります。

始める

マニフェストを作成する

手順を追加

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

レイヤロジック

ユーザーにオプションを提供する

次のステップ

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