到目前位置我们只接触了一种页面，那就是popup_page，点击图标弹出页面。
这片文章介绍另一种页面叫做options_page。有点儿类似于系统设置的意思。所以这种页面要实现的功能也应该是extension的设置类任务。
这次的案例我们通过options_page来修改颜色属性，并存储到storage。popup_page从storage取出颜色，并设置自己的背景色。
项目github地址效果如下。
1.gif
- manifest.json
{
"manifest_version": 2,
"name": "optionspage",
"version": "1",
"description": "this is a optionspage extension",
"browser_action": {
"default_popup": "index.html",//这是弹出页
"default_icon": "images/icon16.png"
},
"icons": {
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"options_page":"options.html",//设置配置页
"permissions":["storage"]//需要存储权限
}
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<script src="jquery.min.js"></script>
<script src="index.js"></script>
<style>
body{
width: 200px;
text-align: center
}
</style>
</head>
<body>
<h1>这是首页</h1>
</body>
</html>
- index.js
$(function(){
//页面加载后从storage中取出颜色然后修改body的背景色
chrome.storage.local.get("bodyColor", function (x) {
if (x.bodyColor) {
$("body").css("backgroundColor","#"+x.bodyColor);
} else {
$("body").css("backgroundColor","#FFFFFF");
}
})
})
- options.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<script src="jquery.min.js"></script>
<script src="jscolor.js"></script>
<script src="options.js"></script>
</head>
<body>
<h1>这是配置页</h1>
<input id='jscolor' class='jscolor' name="jscolor">
<button>保存</button>
</body>
</html>
- options.js
$(function () {
//从storage去取出颜色
chrome.storage.local.get("bodyColor", function (x) {
if (x.bodyColor) {
document.getElementById('jscolor').jscolor.fromString(x.bodyColor);
} else {
document.getElementById('jscolor').jscolor.fromString("FFFFFF");
}
})
$("button").click(function(){
//保存设置的颜色
chrome.storage.local.set({bodyColor:$("#jscolor").val()})
})
})
网友评论