带选项页面的扩展带选项页面的扩展

参考原文
知识点：

options_page
localStorage

有一些扩展允许用户进行个性化设置，这样就需要向用户提供一个选项页面。Chrome 通过 Manifest 文件的 options_page 属性为开发者提供了这样的接口，可以为扩展指定一个选项页面。
当用户在扩展图标上点击右键，选择菜单中的“选项”后，就会打开这个页面，例如：

文章图片
对于没有图标的扩展，可以在 chrome://extensions 页面中单击“选项”。

对于网站来说，用户的设置通常保存在 Cookies 中，或者保存在网站服务器的数据库中。对于 JavaScript 来说，一些数据可以保存在变量中，但如果用户重新启动浏览器，这些数据就会消失。那么如何在扩展中保存用户的设置呢？
我们可以使用 HTML5 新增的 localStorage 接口。localStorage 是
HTML5 新增的方法，它允许 JavaScript 在用户计算机硬盘上永久储存数据（除非用户主动删除）。
但 localStorage 也有一些限制：

首先是 localStorage 和 Cookies 类似，都有域的限制，运行在不同域的 JavaScript 无法调用其他域 localStorage的数据。
其次是单个域在 localStorage 中存储数据的大小通常有限制（虽然 W3C 没有给出限制），对于Chrome这个限制是 5MB。
最后 localStorage 只能储存字符串型的数据，无法保存数组和对象，但可以通过 join、toString 和 JSON.stringify 等方法先转换成字符串再储存。

【带选项页面的扩展】通过声明 unlimitedStorage 权限，Chrome 扩展和应用可以突破这一限制。

下面我们写一个小 Demo 来说明，这个插件根据用户的选项返回豆瓣电影中正在热映的电影和即将上映的电影。相关信息可从以下 API 获得。

正在热映：https://api.douban.com/v2/movie/in_theaters
即将上映：https://api.douban.com/v2/movie/coming_soon

编写 manifest.json 文件：

{ "manifest_version": 2, "name": "豆瓣电影", "version": "1.0", "description": "查看最近热映和准备上映的电影", "icons": { "16": "images/icon.png", "48": "images/icon.png", "128": "images/icon.png" },"browser_action": { "default_icon": { "19": "images/icon.png", "38": "images/icon.png" }, "default_title": "豆瓣电影", "default_popup": "popup.html" },// 指定选项页文件路径 "options_page": "options.html","permissions": [ "https://api.douban.com/v2/movie/*" ] }

下面开始编写 options.html 文件：

类型选项 - 锐客网

在选项页我们做一个下拉选项框和一个确定按钮，来供用户选择。

文章图片
由于 Chrome 不允许将JavaScript内嵌在HTML文件中，所以我们单独编写一个options.js脚本文件，并在HTML文件中引用它。编写 options.js 文件：

// 从 localStorage 中获取 option，默认值为 "in_theaters" var option = localStorage.option || "in_theaters"; document.getElementById('option').value = https://www.it610.com/article/option; // 根据用户选项把 option 信息保存到 localStorage 中 document.getElementById('save').onclick = function(){ localStorage.option = document.getElementById('option').value; alert('保存成功。'); }

从 options.js 的代码中可以看到，localStorage 的读取和写入方法很简单，和 JavaScript 中的变量读写方法类似。
localStorage 除了使用 localStorage.namespace 的方法引用和写入数据外，还可以使用 localStorage['namespace'] 的形式。请注意第二种方法
namespace 要用引号包围，单引号和双引号都可以。
如果想彻底删除一个数据，可以使用 localStorage.removeItem('namespace') 方法。
为了显示电影条目，我们为扩展指定了一个 popup 页面，下面来编写 popup.html。

* { margin: 0; padding: 0; }body { width: 350px; height: 500px; }#movie_list { font-size: 14px; padding: 5px; }

编写 movie.js 文件：

function httpRequest(url, callback){ var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.setRequestHeader('X-PINGOTHER', 'pingpong'); xhr.setRequestHeader('Content-Type', 'application/xml'); xhr.onreadystatechange = function(){ var res = JSON.parse(xhr.responseText); callback(res); }; xhr.send(); }function showMovie(res){ var i; var title = res['title'] var HTML = '' + title + ' '; var movies = res['subjects']; for (i=0; i' + movie.title + ' '; } document.getElementById('movie_list').innerHTML = HTML; }var option = localStorage.option; // 如果 option 不存在则使用默认值 'in_theaters' option = option?option:'in_theaters'; var url = 'https://api.douban.com/v2/movie/' + option; httpRequest(url, showMovie);

完成后的效果：