option(选项页)

所谓options页，就是插件的设置页面，有2个入口，一个是右键图标有一个“选项”菜单，还有一个在插件管理页面：

option(选项页) - 图1

option(选项页) - 图2

在Chrome40以前，options页面和其它普通页面没什么区别，Chrome40以后则有了一些变化。

我们先看老版的options：

  1. {
  2.  // Chrome40以前的插件配置页写法
  3.  "options_page": "options.html",
  4. }

这个页面里面的内容就随你自己发挥了，配置之后在插件管理页就会看到一个选项按钮入口，点进去就是打开一个网页，没啥好讲的。

效果:

option(选项页) - 图3

再来看新版的optionsV2：

  1. {
  2.  "options_ui":
  3.  {
  4.  "page": "options.html",
  5.  // 添加一些默认的样式，推荐使用
  6.  "chrome_style": true
  7.  },
  8. }

options.html的代码我们没有任何改动，只是配置文件改了，之后效果如下：

option(选项页) - 图4

看起来是不是高大上了？

几点注意：

  • 为了兼容，建议2种都写，如果都写了，Chrome40以后会默认读取新版的方式；
  • 新版options中不能使用alert；
  • 数据存储建议用chrome.storage，因为会随用户自动同步；