开发指南--浏览器用户界面--选项页面(Options)

最新推荐文章于 2022-08-01 15:32:26 发布

zouli

最新推荐文章于 2022-08-01 15:32:26 发布

阅读量287

点赞数

分类专栏： Google Chrome 扩展程序文章标签：浏览器 Chrome CSS 配置管理 HTML

Google Chrome 扩展程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

[size=x-large][b]选项(Options)[/b][/size]
你可能想通过提供一个选项页，来允许用户对你的扩展进行自定义配置。如果这样做，系统会在扩展程序管理页面(chrome://extensions)中提供一个链接指向它。点击选项链接会打开一个新的标签页来指向你的选项页面。
[quote="原文"]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.[/quote]
[color=green][b][size=large]第一步：在Manifest文件中声明你的选项页面[/size][/b][/color]
[quote="原文"]Step 1: Declare your options page in the manifest[/quote]

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}

[color=green][b][size=large]第二步：编写你的选项页面[/size][/b][/color]
[quote="原文"]Step 2: Write your options page[/quote]
这是一个选项页面的例子：
[quote="原文"]Here is an example options page:[/quote]


<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>

[color=green][b][size=large]重要说明[/size][/b][/color]
[list]
[*]这个功能在4.0.222.x版本后的某个正式主干版本中加入。
[quote="原文"]This feature is checked in to the trunk and should land in official builds sometime after version 4.0.222.x.[/quote]
[*]我们计划提供一些默认的CSS样式，以使不同扩展的选项页面外观一致。你可以在crbug.com/25317中加星来促进更新。
[quote="原文"]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.[/quote]
[/list]

zouli

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
开发指南--浏览器用户界面--选项页面(Options)

[size=x-large][b]选项(Options)[/b][/size]你可能想通过提供一个选项页，来允许用户对你的扩展进行自定义配置。如果这样做，系统会在扩展程序管理页面(chrome://extensions)中提供一个链接指向它。点击选项链接会打开一个新的标签页来指向你的选项页面。[quote="原文"]To allow users to customize the behav...
复制链接

扫一扫

专栏目录