開発ガイド--ブラウザユーザーインタフェース--オプションページ(Options)
オプション(Options)
オプションページを提供することで、ユーザーが拡張をカスタマイズできるようにしたい場合があります.そうすると、拡張プログラムでページが管理されます(chrome://extensions)からも開くことができます.オプションリンクをクリックすると、新しいラベルページが開き、オプションページを指します.
原文はこう書いてある
To allow users to customize the behavior of your extension, you may wish to provide an options page. If you do, a link to it will be provided from the extensions management page at chrome://extensions. Clicking the Options link opens a new tab pointing at your options page.
ステップ1:Manifestファイルでオプションページを宣言する
原文はこう書いてある
Step 1: Declare your options page in the manifest
ステップ2:オプションページの作成
原文はこう書いてある
Step 2: Write your options page
これは、オプションページの例です.
原文はこう書いてある
Here is an example options page:
重要な説明この機能は4.0.222.xバージョン後の正式なメインバージョンに追加します. 原文はこう書いてある
This feature is checked in to the trunk and should land in official builds sometime after version 4.0.222.x.デフォルトのCSSスタイルを提供し、異なる拡張オプションページの外観を一致させる予定です.crbugでcom/25317に星を加えて更新を促進します. 原文はこう書いてある
We plan on providing some default css styles to encourage a consistent look across different extensions' options pages. You can star crbug.com/25317 to be notified of updates.
オプションページを提供することで、ユーザーが拡張をカスタマイズできるようにしたい場合があります.そうすると、拡張プログラムでページが管理されます(chrome://extensions)からも開くことができます.オプションリンクをクリックすると、新しいラベルページが開き、オプションページを指します.
原文はこう書いてある
To allow users to customize the behavior of your extension, you may wish to provide an options page. If you do, a link to it will be provided from the extensions management page at chrome://extensions. Clicking the Options link opens a new tab pointing at your options page.
ステップ1:Manifestファイルでオプションページを宣言する
原文はこう書いてある
Step 1: Declare your options page in the manifest
{
"name": "My extension",
...
"options_page": "options.html",
...
}
ステップ2:オプションページの作成
原文はこう書いてある
Step 2: Write your options page
これは、オプションページの例です.
原文はこう書いてある
Here is an example options page:
<html>
<head><title>My Test Extension Options</title></head>
<script type="text/javascript">
// localStorage。
function save_options() {
var select = document.getElementById("color");
var color = select.children[select.selectedIndex].value;
localStorage["favorite_color"] = color;
// , 。
var status = document.getElementById("status");
status.innerHTML = "Options Saved.";
setTimeout(function() {
status.innerHTML = "";
}, 750);
}
// localStorage 。
function restore_options() {
var favorite = localStorage["favorite_color"];
if (!favorite) {
return;
}
var select = document.getElementById("color");
for (var i = 0; i < select.children.length; i++) {
var child = select.children[i];
if (child.value == favorite) {
child.selected = "true";
break;
}
}
}
</script>
<body onload="restore_options()">
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>
<br>
<button onclick="save_options()">Save</button>
</body>
</html>
重要な説明
This feature is checked in to the trunk and should land in official builds sometime after version 4.0.222.x.
We plan on providing some default css styles to encourage a consistent look across different extensions' options pages. You can star crbug.com/25317 to be notified of updates.