オプション ページを提供して、ユーザーが拡張機能の動作をカスタマイズできるようにします。拡張機能のオプションを表示するには、ツールバーの拡張機能アイコンを右クリックしてオプションを選択するか、拡張機能の管理ページ（chrome://extensions）に移動して目的の拡張機能を見つけて [詳細] をクリックし、オプションのリンクをクリックします。
オプション ページを記述する
オプション ページの例を以下に示します。
<!DOCTYPE html>
<html>
<head><title>My Test Extension Options</title></head>
<body>
Favorite color:
<select id="color">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="yellow">yellow</option>
</select>
<label>
<input type="checkbox" id="like">
I like colors.
</label>
<div id="status"></div>
<button id="save">Save</button>
<script src="options.js"></script>
</body>
</html>
storage.sync API を使用すると、複数のデバイスでユーザーが希望するオプションを保存できます。
// Saves options to chrome.storage
function save_options() {
var color = document.getElementById('color').value;
var likesColor = document.getElementById('like').checked;
chrome.storage.sync.set({
favoriteColor: color,
likesColor: likesColor
}, function() {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Options saved.';
setTimeout(function() {
status.textContent = '';
}, 750);
});
}
// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
// Use default value color = 'red' and likesColor = true.
chrome.storage.sync.get({
favoriteColor: 'red',
likesColor: true
}, function(items) {
document.getElementById('color').value = items.favoriteColor;
document.getElementById('like').checked = items.likesColor;
});
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
save_options);
オプション ページの動作を宣言する
拡張機能オプション ページには、フルページと埋め込みの 2 種類があります。オプションのタイプは、マニフェストで宣言する方法によって決まります。
ページ全体のオプション
拡張機能のオプション ページが新しいタブに表示されます。オプション HTML ファイルは、options_page フィールドに登録されます。
{
"name": "My extension",
...
"options_page": "options.html",
...
}
埋め込みオプション
埋め込みオプションを使用すると、ユーザーは埋め込みボックス内で拡張機能の管理ページから移動することなく、拡張機能のオプションを調整できます。埋め込みオプションを宣言するには、拡張機能のマニフェストの options_ui フィールドに HTML ファイルを登録し、open_in_tab キーを false に設定します。
{
"name": "My extension",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}
page（文字列）拡張機能のルートを基準とするオプション ページの相対パス。
open_in_tab(boolean)埋め込みオプション ページを宣言するには、
falseとして指定します。trueの場合、拡張機能のオプション ページが chrome://extensions に埋め込まれるのではなく、新しいタブで開きます。
違いを考慮する
chrome://extensions に埋め込まれたオプション ページは、タブ内にホストされないことに関し、動作が若干異なります。
オプション ページへのリンク
拡張機能は、chrome.runtime.openOptionsPage() を呼び出すことで、オプション ページに直接リンクできます。
<button id="go-to-options">Go to options</button>
document.querySelector('#go-to-options').addEventListener('click', function() {
if (chrome.runtime.openOptionsPage) {
chrome.runtime.openOptionsPage();
} else {
window.open(chrome.runtime.getURL('options.html'));
}
});
Tabs API
拡張機能の埋め込みオプション ページのコードはタブ内でホストされないため、Tabs API の使用方法に影響します。
- tabs.query は、拡張機能のオプション ページの URL 内のタブを検出しません。
- オプション ページが開いても、tabs.onCreated は呼び出されません。
- tabs.onUpdated はオプション ページの読み込み状態が変化しても起動しない。
- tabs.connect または tabs.sendMessage を使用してオプション ページと通信できない
オプション ページで含まれているタブを操作する必要がある場合は、runtime.connect と runtime.sendMessage を使用すると、これらの制限を回避できます。
メッセージング API
拡張機能のオプション ページで runtime.connect または runtime.sendMessage を使用してメッセージを送信する場合、[送信者] タブは設定されず、送信者の URL がオプション ページの URL になります。
サイズ調整
埋め込みオプションでは、ページ コンテンツに基づいて独自のサイズが自動的に決定されます。ただし、コンテンツの種類によっては、埋め込みボックスのサイズが適切でない場合があります。この問題は、ウィンドウ サイズに基づいてコンテンツの形状を調整するオプション ページでよく発生します。
これが問題となる場合は、オプション ページに固定の最小サイズを指定して、埋め込みページが適切なサイズになるようにします。