今天的案例是一个待办事项列表，用户可以在配置页面管理任务（包括增加任务，结束任务，删除任务），工具栏有未完任务数量角标提示。点击弹出未完任务列表，可以在弹出面结束具体任务。具体操作如下动图。
项目github地址
1.gif
核心概念
角标通常用于消息提示，用户能通过有没有角标以及角标的数字快速知道当前有几条信息需要处理。
extension的角标是在后台逻辑(background脚本)中设置的。
api是chrome.browserAction.setBadgeText({text:‘角标数字或文字’})
- manifest.json
{
"manifest_version":2,
"name":"todo",
"version":"1",
"description": "this is a todo list extensions",
"browser_action": {
"default_popup": "todo.html",//弹出页面
"default_icon": "images/icon16.png"
},
"options_page":"options.html",//管理页面
"icons": {
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"permissions":["storage"],//需要权限
"background":{
"scripts":["common.js","eventPage.js"],//后台脚本
"persistent":false
}
}
- common.js
//获取storage存储的任务列表
function getTasks(callBack) {
chrome.storage.local.get("tasks", function (x) {
var tasks_all = x.tasks;
if (!tasks_all)
tasks_all = [];
if (callBack) {
callBack(tasks_all)
}
})
}
//将任务列表存储到storage中
function setTasks(tasks, callBack) {
chrome.storage.local.set({ tasks: tasks }, function () {
if (callBack) {
callBack()
}
})
}
- eventPage.js
//设置角标
setBadge()
//监听storage改变事件，有了改变更新角标数字
chrome.storage.onChanged.addListener(function(changes){
console.log(changes)
console.log(Object.keys(changes))
if(Object.keys(changes).find(function(x){return x=='tasks'})){
setBadge()
}
})
//设置角标的方法
function setBadge(){
getTasks(function(tasks_all){
var num=tasks_all.filter(function(x){return !(x.finished===true)}).length
var badge=num==0?"":num+"";
chrome.browserAction.setBadgeText({text:badge})
})
}
- options.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>todo list</title>
<script src="jquery.min.js"></script>//引入jquery
<script src="common.js"></script>//封装的公共方法
<script src="options.js"></script>//自己的逻辑
<style>
ul {
list-style: none;
font-size: 16px
}
a{
margin-left: 10px
}
</style>
</head>
<body>
<h1>任务管理</h1>
<button>增加任务</button>
<hr>
<h3>未完成</h3>
<ul id="unfinished">
<li>
<input type="checkbox" name="" id="">任务1
</li>
</ul>
<hr>
<h3>已完成</h3>
<ul id="finished">
<li>
<input type="checkbox" name="" id="">任务1
</li>
</ul>
</body>
</html>
- options.js
$(function () {
//页面加载取出任务列表并显示在页面上
freshTask()
//注册按钮点击事件，点击按钮提示输入文字，点击确定将任务保存到storage，并刷新任务列表
$("button").click(function () {
var task = prompt("请输入要增加的任务：")
if (task) {
getTasks(function (tasks_all) {
if (tasks_all.find(function (x) { return x.name == task })) {
alert("任务【" + task + "】已经存在不能重复添加")
} else {
tasks_all.splice(0, 0, { name: task, id: Math.random() + "" });
setTasks(tasks_all, function () {
freshTask()
})
}
})
}
})
//点击任务复选框，修改任务的状态，保存到storage，并刷新任务列表
$("body").on("change", ":checkbox", function () {
var checked = $(this).prop("checked")
var id = $(this).prop("id")
console.log(id, checked)
getTasks(function (tasks_all) {
console.log(tasks_all)
var t = tasks_all.find(function (t) { return t.id == id })
if (t)
t.finished = !(t.finished === true)
console.log(t)
setTasks(tasks_all, function () {
freshTask()
})
})
})
//点击任务删除，删除任务，更新storage，并刷新任务列表
$("body").on("click", "a", function () {
var id = $(this).closest("li").find("input").prop("id");
var text = $(this).closest("li").find("label").text();
if (confirm("是否删除任务【" + text + "】")) {
console.log(id)
getTasks(function (tasks_all) {
console.log(tasks_all)
tasks_all = tasks_all.filter(function (t) { return t.id != id })
setTasks(tasks_all, function () {
freshTask()
})
})
}
})
})
//刷新任务列表的方法
function freshTask() {
getTasks(function (tasks_all) {
var tasks_finished = tasks_all.filter(function (x) { return x.finished === true });
var tasks_unfinished = tasks_all.filter(function (x) { return !(x.finished === true) });
var html = "";
tasks_unfinished.forEach(task => {
html += '<li><label><input type="checkbox" id="' + task.id + '">' + task.name + '</label><a href="#">删除</a></li>';
});
$("#unfinished").html(html);
html = "";
tasks_finished.forEach(task => {
html += '<li><label><input type="checkbox" checked="true" id="' + task.id + '">' + task.name + '</label><a href="#">删除</a></li>';
});
$("#finished").html(html);
})
}
- todo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>todo list</title>
<script src="jquery.min.js"></script>
<script src="common.js"></script>
<script src="todo.js"></script>
<style>
ol {
padding-left: 50px;
font-size:16px;
}
li,h1{
white-space: nowrap;
}
a{
margin-left: 10px
}
</style>
</head>
<body>
<h1>待办事项</h1>
<ol id='todolist'>
<li>
<label>任务1 <a href="#">结束任务</a></label>
</li>
<li>
<label>任务1 <a href="#">结束任务</a></label>
</li>
<li>
<label>任务1 <a href="#">结束任务</a></label>
</li>
<li>
<label>任务1 <a href="#">结束任务</a></label>
</li>
</ol>
</body>
</html>
- todo.js
$(function () {
freshTask()
$("body").on("click", "a", function () {
var id = $(this).prop("id");
console.log(id)
getTasks(function (tasks_all) {
var task = tasks_all.find(function (x) { return x.id == id })
if (task) {
task.finished = true;
setTasks(tasks_all, function () {
freshTask()
})
}
})
})
})
function freshTask() {
getTasks(function (tasks_all) {
var todolist = tasks_all.filter(function (x) { return !(x.finished === true) });
var html = "";
todolist.forEach(task => {
html += ' <li><label>' + task.name + ' <a href="#" id="' + task.id + '">结束任务</a></label></li>';
});
$("#todolist").html(html);
})
}
网友评论