选项

为了让用户自定义您的扩展程序的行为，您可能会提供一个选项页面。如果这样做的话，选项页面的链接将会在扩展程序管理页面（chrome://extensions）中显示，单击“选项”链接打开一个新标签页，指向您的选项页面。

第一步：在清单文件中声明您的选项页面

manifest.json

  1. {
  2.   "name": "我的扩展程序",
  3.   ...
  4.   "options_page": "options.html",
  5.   ...
  6. }

第二步：编写您的选项页面

如下是一个选项页面的例子：

options.html

  1. <html>
  2. <head><title>我的测试扩展程序选项</title></head>
  4. <body>
  6. 我最喜欢的颜色：
  7. <select id="color">
  8.  <option value="red">红</option>
  9.  <option value="green">绿</option>
  10.  <option value="blue">蓝</option>
  11.  <option value="yellow">黄</option>
  12. </select>
  14. <br>
  15. <div id="status"></div>
  16. <button id="save">保存</button>
  17. </body>
  19. <script src="options.js"></script>
  21. </html>

options.js

  1. // 将选项保存在 localStorage 中。
  2. function save_options() {
  3.   var select = document.getElementById("color");
  4.   var color = select.children[select.selectedIndex].value;
  5.   localStorage["favorite_color"] = color;
  7.   // 更新状态，告诉用户选项已保存。
  8.   var status = document.getElementById("status");
  9.   status.innerHTML = "Options Saved.";
  10.   setTimeout(function() {
  11.     status.innerHTML = "";
  12.   }, 750);
  13. }
  15. // 从保存在 localStorage 中的值恢复选定的内容。
  16. function restore_options() {
  17.   var favorite = localStorage["favorite_color"];
  18.   if (!favorite) {
  19.     return;
  20.   }
  21.   var select = document.getElementById("color");
  22.   for (var i = 0; i < select.children.length; i++) {
  23.     var child = select.children[i];
  24.     if (child.value == favorite) {
  25.       child.selected = "true";
  26.       break;
  27.     }
  28.   }
  29. }
  30. document.addEventListener('DOMContentLoaded', restore_options);
  31. document.querySelector('#save').addEventListener('click', save_options);