|
你可以提供一個(gè)選項(xiàng)頁面(Options Pages)讓用戶自定義你的擴(kuò)展。如果設(shè)置了選項(xiàng)頁面，那么擴(kuò)展管理頁chrome://extensions將會(huì)有一個(gè)鏈接指向選項(xiàng)頁面。
定義選項(xiàng)頁面包括兩步：
- {
- "name": "My extension",
- ...
- "options_page": "options.html",
- ...
- }
復(fù)制代碼
上例中，options_page代表選項(xiàng)頁面，options.html是具體的文件地址。
選項(xiàng)頁面是一個(gè)典型的網(wǎng)頁，下面是一個(gè)選項(xiàng)頁面的例子：
- <html>
- <head><title>My Test Extension Options</title></head>
- <script type="text/javascript">
- // Saves options to localStorage.
- function save_options() {
- var select = document.getElementById("color");
- var color = select.children[select.selectedIndex].value;
- localStorage["favorite_color"] = color;
- // Update status to let user know options were saved.
- var status = document.getElementById("status");
- status.innerHTML = "Options Saved.";
- setTimeout(function() {
- status.innerHTML = "";
- }, 750);
- }
- // Restores select box state to saved value from 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>
復(fù)制代碼
早期版本的chrome可能不支持這個(gè)功能。
我們正計(jì)劃提供一個(gè)默認(rèn)的css來使得不同擴(kuò)展的選項(xiàng)頁面保持風(fēng)格一致，你可以從這里(http:///25317)查看最新的進(jìn)展。
上面的例子中使用LOCALSTORAGE保存數(shù)據(jù)，具體介紹可以查看《使用LOCALSTORAGE保存數(shù)據(jù)》
原文 http://code.google.com/chrome/extensions/options.html
由ChromeChina翻譯，轉(zhuǎn)載注明出處http://dev./
|
