Chrome Extension options_page & storage【谷歌浏览器扩展之选项页和storage】

来源：互联网发布：优盘启动 windows pe 编辑：程序博客网时间：2024/06/08 18:03

使用 chrome.storage.local API 存储 options_page 页的配置信息，须在 manifes 文件里配置 options_page 和 permissions，页面已禁止内嵌的 js 和 css（style标签），须引入文件方可。

"options_page": "options.html","permissions": ["storage"]

浏览器的 Local Storage 常用方法：

localStorage.setItem(k, JSON.stringify(v));
JSON.parse(localStorage.getItem(k));
localStorage.removeItem(k);
localStorage.clear();

Chrome Extension 提供的 API 方法：

//获取chrome.storage.local.get(keys, function(valueArray) {    console.log(valueArray);});//存储chrome.storage.local.set({'value': theValue}, function() {    console.log('success');});//删除chrome.storage.local.remove(keys，function() {    console.log('success');});//清除全部chrome.storage.local.clear(function() {    console.log('clear all');});

使用的实例：

options.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8" />    <title>选项</title><link href="/options.css" rel="stylesheet" /></head><body><div class="_ex_wapper"><h1>图片尺寸大小 _ 选项</h1><ul id="_ex_cityli"><li><label><input type="radio" name="_ex_size" value="240">>=240</label></li><li><label><input type="radio" name="_ex_size" checked="checked" value="400">>=400(400*400)</label></li><li><label><input type="radio" name="_ex_size" value="600">>=600</label></li><li><label><input type="radio" name="_ex_size" value="800">>=800</label></li><li><label><input type="radio" name="_ex_size" value="1000">>=1000</label></li><li style="width: 360px;"><label><input type="radio" name="_ex_size" value="1">自定义<input type="text" id="_ex_usize1" size="3"> * <input type="text" id="_ex_usize2" size="3">(如：640*480、500*500)</label></li></ul><div class="clearfix"></div><div class="_ex_likename">重名文件：<select id="_ex_likename"><option value="prompt">弹窗让用户决定</option><option value="overwrite" selected>覆盖替换</option><option value="uniquify">防重</option></select></div><p><button id="_ex_flush">保 存</button>  (400*400: 宽度大于等于400，高度大于等于400)</p><div class="_ex_tips">* 360极速浏览器，可在“下载设置” 中将 下载前询问保存文件到哪 选项去掉</div></div><script type="text/javascript" src="/options.js"></script></body></html>

options.css

body{background:#ccc;}._ex_wapper{background:#fafafa;max-width:700px;min-height:390px;margin:0auto;}._ex_wapper h1{padding:15px;font-size:16px;border-bottom:1pxsolid#aaa;}._ex_wapper ul{list-style:none;}._ex_wapper ul li{width:150px;float:left;padding:6px2px;}._ex_wapper ul li a{margin-left:12px;font-size:11px;text-decoration:none;}.clearfix{clear:both;}._ex_wapper p{padding:10px0038px;clear:both;display:block;border-top:1pxsolid#ccc;}._ex_wapper p span{color:red;}._ex_likename,._ex_tips{margin:30px0045px;}

options.js 也可引入 jQuery 或其他js库

//默认选择chrome.storage.local.get('_ex_favpicture_likename', function(valueArray) {if( valueArray._ex_favpicture_likename ){document.querySelector('#_ex_likename option[value="'+ valueArray._ex_favpicture_likename +'"]').selected = true}});chrome.storage.local.get('_ex_favpicture_size', function(valueArray) {    var oexinpu = document.getElementsByName('_ex_size'),_ex_size = JSON.parse(valueArray._ex_favpicture_size);//console.log(_ex_size.type);if(_ex_size.type){for(var i=0; i<oexinpu.length; i++){if(oexinpu[i].value == _ex_size.type){oexinpu[i].checked = true;if(_ex_size.type == 1){document.getElementById('_ex_usize1').value = _ex_size.width;document.getElementById('_ex_usize2').value = _ex_size.height;}break;}}}});//保存选项document.getElementById('_ex_flush').onclick = function(){var oexinpu = document.getElementsByName('_ex_size'),olikename = document.getElementById('_ex_likename').value,oexsize = {width: 400, height: 400};if(oexinpu){for(var i=0; i<oexinpu.length; i++){if( oexinpu[i].checked ){if(oexinpu[i].value == 1){oexsize = {type: 1,width: parseInt( document.getElementById('_ex_usize1').value ),height: parseInt( document.getElementById('_ex_usize2').value )};if( oexsize.width < 0 || oexsize.height < 0 ){alert('请设置尺寸值');return;}}else{oexsize = {type: oexinpu[i].value,width: parseInt( oexinpu[i].value ),height: parseInt( oexinpu[i].value )};}break;}}}//savechrome.storage.local.set({'_ex_favpicture_likename': olikename}, function() { });chrome.storage.local.set({'_ex_favpicture_size': JSON.stringify(oexsize)}, function() {alert('保存成功');//刷新  重新加载应用chrome.runtime.reload();});}

以上是选项页的全部代码，其中，保存后刷新应用所调用的 chrome.runtime.reload() 方法会自动关闭选项页。

阅读全文

0 0