拡張機能は、さまざまなコンポーネントで構成されていますが、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 について説明しています。
- デベロッパー ガイドには、高度な拡張機能の作成に関するドキュメントへの追加リンクが多数あります。