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

最新推荐文章于 2025-06-15 11:22:50 发布

拭血

最新推荐文章于 2025-06-15 11:22:50 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： browser 文章标签： chrome extension

本文链接：https://blog.youkuaiyun.com/lsg9012/article/details/77720714

browser 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Chrome Extension中利用options_page和chrome.storage.local API来存储配置信息。在manifest文件中配置options_page和permissions是必要的，同时要注意由于安全原因，内联js和css被禁用，需要外部引入。此外，文章还提到了浏览器Local Storage的常用操作方法以及Chrome Extension提供的API在options.html中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 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;
			}
		}
	}
	//save
	chrome.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() 方法会自动关闭选项页。