拡張機能では Chrome ブラウザをカスタマイズできますが、オプション ページでは拡張機能をカスタマイズできます。オプションを使用して機能を有効にし、ユーザーがニーズに関連する機能を選択できるようにします。
オプション ページの位置
オプション ページにアクセスするには、直接リンクを使用するか、ツールバーの拡張機能アイコンを右クリックしてオプションを選択します。また、ユーザーは、まず chrome://extensions
を開き、目的の拡張機能を見つけて [詳細] をクリックし、オプションのリンクをクリックすることで、オプション ページに移動できます。
オプション ページを記述する
オプション ページの例を次に示します。
options.html:
<!DOCTYPE html>
<html>
<head>
<title>My Test Extension Options</title>
</head>
<body>
<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>
以下は、オプション スクリプトの例です。options.html
と同じフォルダに保存します。これにより、storage.sync
API を使用して、複数のデバイスにわたってユーザーが希望するオプションが保存されます。
options.js:
// Saves options to chrome.storage
const saveOptions = () => {
const color = document.getElementById('color').value;
const likesColor = document.getElementById('like').checked;
chrome.storage.sync.set(
{ favoriteColor: color, likesColor: likesColor },
() => {
// Update status to let user know options were saved.
const status = document.getElementById('status');
status.textContent = 'Options saved.';
setTimeout(() => {
status.textContent = '';
}, 750);
}
);
};
// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
const restoreOptions = () => {
chrome.storage.sync.get(
{ favoriteColor: 'red', likesColor: true },
(items) => {
document.getElementById('color').value = items.favoriteColor;
document.getElementById('like').checked = items.likesColor;
}
);
};
document.addEventListener('DOMContentLoaded', restoreOptions);
document.getElementById('save').addEventListener('click', saveOptions);
最後に、拡張機能のマニフェスト ファイルに "storage"
権限を追加します。
manifest.json:
{
"name": "My extension",
...
"permissions": [
"storage"
]
...
}
オプション ページの動作を宣言する
拡張機能オプション ページには、フルページと埋め込みの 2 種類があります。オプション ページのタイプは、マニフェストでの宣言方法によって決まります。
ページ全体のオプション
新しいタブで、ページ全体のオプション ページが表示されます。オプションの HTML ファイルをマニフェストの "options_page"
フィールドに登録します。
manifest.json:
{
"name": "My extension",
...
"options_page": "options.html",
...
}
埋め込みオプション
埋め込みオプション ページを使用すると、ユーザーは埋め込みボックス内で拡張機能の管理ページから移動することなく、拡張機能のオプションを調整できます。埋め込みオプションを宣言するには、拡張機能のマニフェストの "options_ui"
フィールドに HTML ファイルを登録し、"open_in_tab"
キーを false
に設定します。
manifest.json:
{
"name": "My extension",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}
page
(文字列)- 拡張機能のルートを基準とするオプション ページの相対パスを指定します。
open_in_tab
(boolean)- 拡張機能のオプション ページを新しいタブで開くかどうかを指定します。
false
に設定すると、拡張機能のオプション ページは新しいタブで開くのではなく、chrome://extensions
に埋め込まれます。
違いを考慮する
chrome://extensions
内に埋め込まれたオプション ページは、タブ内のオプション ページからは微妙に動作が異なります。
オプション ページへのリンク
拡張機能は chrome.runtime.openOptionsPage()
を呼び出すことで、オプション ページに直接リンクできます。たとえば、次のようにポップアップに追加できます。
popup.html:
<button id="go-to-options">Go to options</button>
<script src="popup.js"></script>
popup.js:
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 は使用できません。オプション ページでタブを操作する必要がある場合は、代わりに runtime.connect()
と runtime.sendMessage()
を使用します。
メッセージング API
拡張機能のオプション ページで runtime.connect()
または runtime.sendMessage()
を使用してメッセージを送信する場合、送信者のタブは設定されず、送信者の URL がオプション ページの URL になります。
サイズ調整
埋め込みオプションでは、ページ コンテンツに基づいて独自のサイズが自動的に決定されます。ただし、コンテンツの種類によっては、埋め込みボックスのサイズが適切でない場合があります。この問題は、ウィンドウ サイズに基づいてコンテンツの形状を調整するオプション ページでよく発生します。
これが問題となる場合は、オプション ページに固定の最小サイズを指定して、埋め込みページが適切なサイズになるようにします。