Chrome插件my task list_task list chrome插件-CSDN博客

这是Chrome插件，my task list的源文件，文件构成如下：
manifest.json
popup.html
其他的为icon
popup.html的源文件如下：

</pre><pre>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Task List</title>
<style type="text/css">
*{margin:0;padding:0;}
body{min-width:200px;color:#333;overflow: hidden;margin: 0px;padding:10px;background: white;font-size:12px;}
img{margin:0 4px;}
#addItemDiv{color:#ccc;height:20px;}
.hide{display:none;}
.show{display:block;}
.taskItem{cursor:pointer;padding:2px 0;}
input{width:100%;}
label.on{width:12px; display:inline-block; height:12px; background:url(images/bg_task_on.gif) no-repeat 0px 2px;}
label.off{width:12px; display:inline-block; height:12px; background:url(images/bg_task_off.gif) no-repeat 0px 2px;}
</style>
</head>
<body>
<div id="addItemDiv">添加新项</div>
<div id="addItemInput" class="hide"><input type="text" id="txtTaskTitle"></div>
<div id="taskItemList">
<div class="taskItem" id="task_1" title="4-13 14:50:37"><label class="on"></label><span class="taskTitle">俄方挼额</span></div></div>
<script type="text/javascript">
(function(){
	var $=function(id){return document.getElementById(id);}
	var Tasks = {
		show:function(obj){
			obj.className='';
			return this;
		},
		hide:function(obj){
			obj.className='hide';
			return this;
		},
		//存储dom
		$addItemDiv:$('addItemDiv'),
		$addItemInput:$('addItemInput'),
		$txtTaskTitle:$('txtTaskTitle'),
		$taskItemList:$('taskItemList'),
		//指针
		index:window.localStorage.getItem('Tasks:index'),
		//初始化
		init:function(){
			if(!Tasks.index){
				window.localStorage.setItem('Tasks:index',Tasks.index=0);
			}
			/*注册事件*/
			//打开添加文本框
			Tasks.$addItemDiv.addEventListener('click',function(){
				Tasks.show(Tasks.$addItemInput).hide(Tasks.$addItemDiv);
				Tasks.$txtTaskTitle.focus();
			},true);
			//回车添加
			Tasks.$txtTaskTitle.addEventListener('keyup',function(ev){
				var ev=ev || window.event;
				if(ev.keyCode==13){
					var task={
						id:0,
						task_item:$('txtTaskTitle').value,
						add_time:new Date(),
						is_finished:false
					};
					Tasks.Add(task);
					Tasks.AppendHtml(task);
					Tasks.$txtTaskTitle.value='';
					Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv);
				}
				ev.preventDefault();
			},true);
			//取消
			Tasks.$txtTaskTitle.addEventListener('blur',function(){
				Tasks.$txtTaskTitle.value='';
				Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv);
			},true);
			//初始化数据
			if(window.localStorage.length-1){
				var task_list=[];
				var key;
				for(var i=0,len=window.localStorage.length;i<len;i++){
					key=window.localStorage.key(i);
					if(/task:\d+/.test(key)){
						task_list.push(JSON.parse(window.localStorage.getItem(key)));
					}
				}
				for(var i=0,len=task_list.length;i<len;i++){
					Tasks.AppendHtml(task_list[i]);
				}
			}
		},
		//增加
		Add:function(task){
			//更新指针
			window.localStorage.setItem('Tasks:index', ++Tasks.index);
			task.id=Tasks.index;
			window.localStorage.setItem("task:"+ Tasks.index, JSON.stringify(task));
		},
		//修改
		Edit:function(task){
			window.localStorage.setItem("task:"+ task.id, JSON.stringify(task));
		},
		//删除
		Del:function(task){
			window.localStorage.removeItem("task:"+ task.id);
		},
		AppendHtml:function(task){
			var oDiv=document.createElement('div');
			oDiv.className='taskItem';
			oDiv.setAttribute('id','task_' + task.id);
			var addTime=new Date(task.add_time);
			var timeString=addTime.getMonth() + '-' + addTime.getDate() + ' ' + addTime.getHours() + ':' + addTime.getMinutes() + ':' + addTime.getSeconds();
			oDiv.setAttribute('title',timeString);
			var oLabel=document.createElement('label');
			oLabel.className= task.is_finished ? 'off' : 'on';
			var oSpan=document.createElement('span');
			oSpan.className='taskTitle';
			var oText=document.createTextNode(task.task_item);
			oSpan.appendChild(oText);
			oDiv.appendChild(oLabel);
			oDiv.appendChild(oSpan);
			//注册事件
			oDiv.addEventListener('click',function(){
				if(!task.is_finished){
					task.is_finished=!task.is_finished;
					var lbl=this.getElementsByTagName('label')[0];
					lbl.className= (lbl.className=='on') ? 'off' : 'on';
					Tasks.Edit(task);
				}else{
					if(confirm('是否确定要删除此项？\r\n\r\n点击确定删除，点击取消置为未完成。')){
						Tasks.Del(task);
						Tasks.RemoveHtml(task);
					}else{
						task.is_finished=!task.is_finished;
						var lbl=this.getElementsByTagName('label')[0];
						lbl.className= (lbl.className=='on') ? 'off' : 'on';
						Tasks.Edit(task);
					}
				}
			},true);
			Tasks.$taskItemList.appendChild(oDiv);	
		},
		RemoveHtml:function(task){
			var taskListDiv=Tasks.$taskItemList.getElementsByTagName('div');
			for(var i=0,len=taskListDiv.length;i<len;i++){
				var id=parseInt(taskListDiv[i].getAttribute('id').substring(5));
				if(id==task.id){
					Tasks.$taskItemList.removeChild(taskListDiv[i]);
					break;
				}
			}
		}
	}
	Tasks.init();
})();
</script>




</body></html>

manifest.json代码如下：

{  
  "name": "MyTaskList",  
  "version": "0.9.0",  
  "description": "Management my everyday's task lists.",  
  "browser_action": {  
    "default_icon": "icon.png" ,
    "default_title": "My Task List",
    "default_popup": "popup.html"
  }  
}