chrome插件制作入门,资料,详细过程等

第一部分基本资料Getting Started 1:目前不支持标准发布版本的Chrome插件扩展,不过也有消息马上就开发了,对于我们这个不是问题.4.0使用中 2:创建一个所必要的文件夹,名字任意,用于存放所需文件,开发后,可以通过Chrome打包提交 3:manifest.json文件,存放描述信息,也可以理解为插件运行的总入口,使用JSON的格式进行定义    "name": "My First Extension", /程序名称   "version": "1.0", /版本   "description": "The first extension that I made.",/描述   "browser_action": /对浏览器的操作     "default_icon": "icon.png"/图标   ,   "permissions": /权限,用于定义所需的网络资源     "     4:可以在browser_action中对功能进行添加 "popup": "popup.html"/指定点击按钮后触发的行为, 5:弹出的html扩展名文件,进行编写弹出窗编写,允许使用Js and css,使用的时候注意HTML必须包含在文件夹内 尤其指出,其中可以使用HTML5标准的元素 插件包含的文件 1:manifest 文件,2:任意个HTML文件,3:JavaScript文件,4:图片Image文件 打包后会被压缩成特殊格式的zip文件,扩展名为.crx background page :用于保存插件的主要逻辑, 插件的逻辑分为: page action,browser action两种,background.html文件的js同时控制两种action action,可以理解为动作,也就是浏览器表现出来的行为,如弹出窗一样 browser_action 包括 a tooltip, a badge, and a popup. 可以在Manifest文件中注册所需的browser action,其中default_icon为必须的,其他均为可选(or) UI部分 Icon:大多图片格式都可以,推荐使用19像素的正方形图片,设置的方式分为两种,manifest文件内的default_icon,或者调用setIcon()方法 Tooltip:设置manifest的default_title属性,或调用setTitle()方法 Badge:用于在图标下显示的字符,字数限制在4个字符一下,可以通过setBadgeText() and setBadgeBackgroundColor()设置内容和背景色 Popup:点击后弹出的窗口.定义在manifest文件中,browser_action的popup属性 chrome.browserAction的常用方法,其中参数使用json对象,具体查看对应的API查询key setBadgeBackgroundColor: 设置Badge背景色 chrome.browserAction.setBadgeBackgroundColor(object details); setBadgeText:Badge内容 chrome.browserAction.setBadgeText(object details) setIcon:设置图标 chrome.browserAction.setIcon(object details) shetTitle:设置Tooltip chrome.browserAction.setTitle(object details) browserAction的事件 chrome.browserAction.onClicked.addListener(function(Tab tab) .); /将会在点击图标后触发 /这里的参数,比Js多了一种类型 2:为插件提供对应的options选项页面,在manifest文件中添加对应的options_page:选项,使用HTML "options_page": "options.html", 所需的HTML可以为一个完整格式的HTML文档,包含所需的html元素 Override界面: 用于替换新tab界面,区别于默认的界面,在manifest文件中进行注册 "chrome_url_overrides":      "newtab": "newtab.html"   , Page Actions: 用于出现在指定页面中的图标 "page_action":      "default_icon": "icons/foo.png", / required     "default_title": "Do action",    / optional; shown in tooltip     "popup": "popup.html"            / optional   , 区别Browser action,page action并不包含badges,但是可以控制page action是否显示,通过调用 show() and hide() methods 同样对browser的建议也适用与page action; 一些常见Page action的方法 hide;  chrome.pageAction.hide(integer tabId) setIcon chrome.pageAction.setIcon(object details) setTitle chrome.pageAction.setTitle(object details) show chrome.pageAction.show(integer tabId) 事件,类似browser action的事件 onClicked chrome.pageAction.onClicked.addListener(function(tab) .); Themes皮肤 也是打包成标准的扩展组件,但是并不包含对应的JS和HTML代码,只用主要的manifest.json文件进行设置    "version": "2.6",   "name": "camo theme",   "theme":      "images" :        "theme_frame" : "images/theme_frame_camo.png",       "theme_frame_overlay" : "images/theme_frame_stripe.png",       "theme_toolbar" : "images/theme_toolbar_camo.png",       "theme_ntp_background" : "images/theme_ntp_background_norepeat.png",       "theme_ntp_attribution" : "images/attribution.png"     ,     "colors" :        "frame" : 71, 105, 91,       "toolbar" : 207, 221, 192,       "ntp_text" : 20, 40, 0,       "ntp_link" : 36, 70, 0,       "ntp_section" : 207, 221, 192,       "button_background" : 255, 255, 255     ,     "tints" :        "buttons" : 0.33, 0.5, 0.47     ,     "properties" :        "ntp_background_alignment" : "bottom"          默认皮肤,可以通过下面的链接进行查看 http:/src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/browser_theme_provider.cc 其中tints中,使用 Hue-Saturation-Lightness  灰度 饱和 亮度进行设置,值都是在0-1之间 浏览器交互: Browser Interaction Bookmarks,Events,Tabs,Windows等 Bookmarks,收藏夹,可以创建,组织和管理收藏夹 设置权限: manifest文件中 "permissions":      "bookmarks"   , 收藏夹使用tree的形式保存对象,其中主要使用 BookmarkTreeNode对象进行访问,常用的属性有:index, title, and url. 注:树结构本身比较繁琐一些,可以使用下面方法参考进行访问     function btnclick()     chrome.bookmarks.getTree(function(ass)     console.log(ass0.children0);           for(obj in ass0.children0.children)           console.log(ass0.children0.childrenobj.title);                )      建议先查看debug方法(ps:比较繁琐,但是配合console.log比较方便查看对象结构) 其中的id使用的也是自增,由0开始 常见的方法  create , get getChildren getTree move remove removeTree search update 常见的事件 常见的事件 onChanged onChildrenReordered onCreated onMoved onRemoved 使用的例子: chrome.bookmarks.onMoved.addListener(.) chrome.bookmarks.getTree(.) /具体请查看API Event事件的使用例子 chrome.tabs.onCreated.addListener(function(tab)    appendToLog('tabs.onCreated -'               + ' window: ' + tab.windowId               + ' tab: '    + tab.id               + ' index: '  + tab.index               + ' url: '    + tab.url); ); 注意加载对应的permissions权限 tabs 事件的全部操作方法: void addListener(function callback(.) void removeListener(function callback(.) bool hasListener(function callback(.) Tabs  用于控制每个标签 , 调用时为chrome.tabs 常见的方法: captureVisibleTab connect create detectLanguage executeScript get getAllInWindow getSelected insertCSS move remove sendRequest update 常见的事件: onAttached onCreated onDetached onMoved onRemoved onSelectionChanged onUpdated Windows  Chrome中的多窗口 方法调用中可选的windowId参数,默认为当前窗口 调用对象: chrome.windows 常见的方法: create get getAll getCurrent getLastFocused remove update 常见的事件:onCreated onFocusChanged onRemoved Background Pages, 注册在manifest文件中,用于保存长时间运行的脚本,运行在插件所在的进程中,多用于类似守护线程一样的作用,用于状态的更新 获取页面的方式: var views = chrome.extension.getViews(); /获取到的数组,通过循环或者索引得到指定的view也就是js的windows对象,不过这里只局限配置在manifest中的html元素 "background_page": "background.html", Content Scripts 用于对指定页面的内容进行脚本调用 同样 需要在manifest文件中进行注册   "content_scripts":             "matches": "       "css": "mystyles.css",       "js": "jquery.js", "myscript.js"        ,   常见的属性: matches, 字符串数组,根据制定的匹配模式进行对指定URL页面的注入 js:指定的脚本文件将会被注入到符合的页面中去 可选 css:需要被嵌入的css,可选 run_at:用于设置何时进行注入,默认为document_idle,还有其他的:document_start,document_end, all_frames:boolean 默认为false 使用的方式可以参考官方文档,不过注意并不能简单的替换同名function来达到注入替换事件的效果,不过可以直接使用document.getElementById获取指定的dom组件,并进行修改. 作用域的问题上: 对于原有的变量并不能访问到,如果需要进行替换,需要进行完整的事件,变量进行重新声明替换 比较特殊的作用域:对于注入的代码,将会有一个封闭的作用域,并不会与原有的进行冲突,当却可以修改页面的DOM元素 为页面元素添加插件内图片的例子 var imgURL = chrome.extension.getURL("images/myimage.png"); document.getElementById("someImage").src = imgURL; Cross-Origin XMLHttpRequest 跨站点的异步调用,用于使用插件访问其他网站的API 分为本地与外部数据两种方面 本地插件内数据:不需要设置权限 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = handleStateChange; / Implemented elsewhere. xhr.open("GET", chrome.extension.getURL('/config_resources/config.json'), true); xhr.send(); 注:0表示本地请求成功 外部网站,需要设置manifest文件中permissions,添加对应的网站地址,更多使用在插件内部功能上 "permissions":      "   , 对于匹配的URL也可以使用模糊匹配 "http:/* "http:/*/"  表示允许访问所有的网站 ,这里注意对https也要独立的编写 内置的json转换 JSON.parse(.);可以用于将制定的字符串,转换成所需的js对象 再次提示,如果需要访问其他网站,一定注意添加权限permissions Message Passing 消息传递 Simple one-time requests:发送一个简单的json数据从一个content script发送到插件的background.html文件中,反之亦然 chrome.extension.sendRequest() 或 chrome.tabs.sendRequest() methods 可选的一个回调函数,可以用于接收返回的内容 如:定义在content script文件中 chrome.extension.sendRequest(greeting: "hello", function(response)    console.log(response.farewell); ); 在background发送使用特殊一些,需要使用getSelected获取选中的tab后,然后发送请求 chrome.tabs.getSelected(null, function(tab)    chrome.tabs.sendRequest(tab.id, greeting: "hello", function(response)      console.log(response.farewell);   ); ); 接收的代码为: chrome.extension.onRequest.addListener(   function(request, sender, sendResponse)      console.log(sender.tab ?                 "from a content script:" + sender.tab.url :                 "from the extension");     if (request.greeting = "hello")       sendResponse(farewell: "goodbye");     else       sendResponse(); / snub them.   ); Long-lived connections 长周期连接 能够保持连接,持续的进行数据收发 从content script 连接到background(插件)的代码 var port = chrome.extension.connect(name: "knockknock"); port.postMessage(joke: "Knock knock"); port.onMessage.addListener(function(msg)    if (msg.question = "Who's there?")     port.postMessage(answer: "Madame");   else if (msg.question = "Madame who?")     port.postMessage(answer: "Madame. Bovary"); ); 如果要从background插件处发起连接,需要稍作修改,去获取指定的id chrome.tabs.connect(tabId, name: "knockknock"). 设置监听连接的监听器 chrome.extension.onConnect.addListener(function(port)    console.assert(port.name = "knockknock");   port.onMessage.addListener(function(msg)      if (msg.joke = "Knock knock")       port.postMessage(question: "Who's there?");     else if (msg.answer = "Madame")       port.postMessage(question: "Madame who?");     else if (msg.answer = "Madame. Bovary")       port.postMessage(question: "I don't get it.");   ); ); 对应的监听断开方法Port.disconnect(),和对应的事件Port.onDisconnect Cross-extension messaging 跨插件消息 主要使用chrome.extension.onRequestExternal or chrome.extension.onConnectExternal 方法的细节与上述的连接事件一致 这里还是提到一下跨站点Js攻击的问题,少使用eval转换返回的字符串,而建议使用专门的JSON.parse方法 NPAPI Plugins 用于提供Js调用本地二进制代码 ,建议最后使用,也许功能很强大. Autoupdating和Packaging章节略过 因为Chrome开发自WebKit,所以可以调用其特有的API V8 Js引擎也为chrome提供了JSON对象 可以在插件内部集成所需的JS插件,如jQuery 第二部分编写一个基本插件首先，新建一个文件夹，取名PixivDayRanking（我插件的名字），这个文件夹就是这个插件的根目录，涉及到的所有文件都应该在这个文件夹内。第一步，创建一个名字叫做manifest.json的文件，用记事本打开编辑，输入以下内容：  "name": "Pixiv日榜排名插件测试版",           /程序名称  "version": "1.0",                            /版本信息  "description": "该插件用于查看Pixiv日榜排名",/程序描述  "background_page": "background.html",        /这个html页面用来保存插件的主要逻辑  "permissions":                             /权限设置，用来定义所需的网络信息，实现跨越"tabs", "http:/*","notifications",  "browser_action":                          /浏览器行为    "default_icon": "icon.gif",                /在浏览器上的小图标   "popup": "PixivRanking.html"        /点击上面的小图标后弹出的那个小窗口页面  这个文件相当于整个插件的配置文件，用于配置这个插件所需的一些信息、资源。上面的注释提供了一些简单的描述。chrome插件的所有配置信息可以去官网查看，还有很多其他类型的配置信息，这里就不多讲了。下面我们要开始编写整个插件最重要的一个文件：background.html了。在这个文件中，我将编写这个插件的主要逻辑代码，使用了jQuery库，用到了Ajax方法。因为在chrome里面支持跨域，所以用起来很方便。另外，chrome支持HTML5，所以放心的使用HTML5的一些功能吧！这个文件的结构如下：<html><head><script src=" type="text/javascript"></script><script type="text/javascript">/获取数据的主体方法function GetRankList()/获取字符串长度function getLength(str)            /过滤掉页面上一些标签、脚本、IFrame、CSS引用等     function stripAllscript(s)            function stripBody(s)          function stripIframe(s)          function stripLink(s)     </script></head><body><div><ul id="showChrome"></ul></div></body></html>可以看出来，这根一个普通的html页面基本没什么区别。下面主要讲一下GetRankList方法，其他几个方法无非就是截取字符，去除一些对本插件功能无用的一些标签而已，实现起来没什么难度，就不贴代码了: )function GetRankList()/首页获取日榜$.get(" function(data, textStatus)if(textStatus = "success")var content = null;var reg = '</head>'var len1 = data.indexOf(reg);content = data.substring(len1+getLength(reg);content = stripAllscript(content);content = stripAllscript(content);/去除所有脚本content = stripIframe(content);/去除iframecontent = stripLink(content);/去除<link>标签content = stripBody(content); /去除闭合body和htmlcontent = content.replace("</body>","").replace("</html>","");$("#showChrome").html(content);/P站登录跟未登录 排名模块用的不同DOMvar rankList = $("#showChrome .ranklist").html();if(rankList = null)rankList = $("#showChrome .ranking:eq(0)");var fristThreeRankItems = rankList.find(".rank-detail");fristThreeRankItems.each(function()var item = $(this);item.find("a:eq(0)").addClass("ran_img");var newHtml = item.find("h2").html()+"<br>"+item.find(".user").html()+"<br>"+"<span class='ranknum'>"+ item.find(".rank").html() +"</span>"item.find("h2").remove();item.find(".rank").remove();item.find(".user").remove();item.append("<p class='ran_text'>"+ newHtml + "</p><div class='clear'></div>"););var smallRankItems = rankList.find("liclass='rank'");smallRankItems.each(function()var item = $(this);var newHtml = "<span class='ranknumsmall'>"+                                                                    item.find(".rank").html() +"</span>"item.find(".rank").remove();item.find("a").before(newHtml););rankList.find("li").removeClass();rankList = $("#showChrome .ranking:eq(0)").html();$("#showChrome").html(rankList);$("#showChrome img").each(function()var src = $(this).attr("data-src");$(this).attr("src", src);$(this).removeAttr("data-src"););$("#showChrome a").each(function()var href = " + $(this).attr("href");$(this).attr("href", href).attr("target", "_blank"););var rankList = $("#showChrome").html();if(localStorage"repData" != null)if(localStorage"repData" != rankList)localStorage"repData" = rankList;elselocalStorage"repData" = rankList;elselocalStorage"repData" = null;);简单讲一下这个方法的思路：首先通过jQuery ajax去获取目标页面整个页面的内容。去除不需要的脚本标签、link标签、iframe等等。通过jQuery解析所需要的数据，然后重新组装成需要的结构。这里碰到过一个问题，那就是Pixiv（就是我获取的目标页面的网站）的首页dom结构，登录与非登录状态下，结构不一样，虽然只是标签跟样式换了下，但处理起来还是很麻烦.我这里只是做了个简单的判断，然后单独处理。这种方式虽然逻辑简单，但是代码量太多了。后面如果找到了更好的方法，我将更新这个方法。最终，我组装出了所需要的数据结构，这里我使用了HTML5的localStorage本地存储，讲这个数据结构保存到localStorage中去，供插件的popup页面调用。OK，到这里为止，这个插件的核心已经编写完毕。接下来就是用popup页面输出这个结果。接下来创建一个名字叫做PixivRanking.html的文件，用记事本编辑打开，输入下面的代码：<style type="text/css"></style><!DOCTYPE html><body><ul class="listUl" id="rankPlace" ranktype="day"></ul></body><script src=" type="text/javascript"></script> <script language="javascript">var background = chrome.extension.getBackgroundPage();background.GetRankList();/background.GetNewManList();if(localStorage"repData" = "null")$("#rankPlace").html("数据传输出错了喵！");    else        $("#rankPlace").html(localStorage"repData");$("#rankPlace").append("<a class='linkMore' href=' target='_blank'>更多</a>");    $("li:even").css("background","#F8F8F8");$(".changeRank").bind("click",function()var ranktype = $(this).attr("ranktype");/alert(ranktype);$("ranktype=" + ranktype + "").css("display","block");$(".listUl").not("ranktype=" + ranktype + "").css("display","none"););</script>可以看出来，这特么就是一个html页面啊！css代码我就不贴了，有骗字数的嫌疑.这里的思路是：先准备好一个容器：<ul id="rankPlace"></ul>，用于最终输出数据；chrome.extension.getBackgroundPage()，用来获取插件的BackgroundPage对象，也就是上面我们创建的那个background.html。这个方法是chrome的扩展API，详细可以查看官方API文档，这里不做过多解释；取到BackgroundPage对象后，就可以访问到background.html中的方法了！是不是很方便！这是chrome插件开发中的一个重要技巧，就是可以互相调用不同页面中的js方法；最后用脚本访问localStorage，将取到的数据插入到之前准备好的标签容器中。OK大功告成！额，等等，怎样才能看到效果呢？！好吧，最后一步，打开chrome，点击右上角的扳手->工具->扩展程序，然后在扩展程序页面中，勾选开发人员模式这个勾选框，然后点击载入正在开发的扩展程序，然后选到最先创建的那个PixivDayRanking文件夹。然后chrome上就有了一个小图标！真帅！赶紧点击看看！这简直酷毙了！怎么样，有没有觉得写一个chrome插件很简单呢？基本跟普通前端开发没有什么太大的区别，唯一需要熟悉的就是manifest的配置以及chrome浏览器的一些API。赶紧动手来制作你自己的chrome插件吧！ : )第三部分编写插件详细过程Chrome的更新速度可以说前无古人，现在我每天开机的第一件事就是打开Chrome检查是不是有了新版本。界面清爽、操作人性化、网络备份资料和快速的启动速度令我爱不释手，还有它拥有众多的扩展程序，相对于firefox的插件来说，数量上和质量上稍显不足，但相信chrome将会很快在扩展上超越firefox，firefox上内存占用上实在不令人满意，也许我使用firefox的一个原因就是因为firebug，不过相信chrome平台的类firebug插件也会很快出现。Chrome的扩展开发十分简单，我们只需要掌握web开发的htm+CSS+Javascript，就能很快开发出自己的扩展。你需要了解的内容在开发前首先要掌握一些基础知识。1、Chrome扩展文件Chrome扩展文件以.crx为后缀名，在Google Chrome扩展官方网站下载扩展时，Chrome会将.crx文件下载到Chrome的Application Data文件夹的User DataTemp下，一般是C:Documents and SettingsUserLocal SettingsApplication DataGoogleChromeUser DataTemp，安装完成或者取消安装，该文件就会被删除。.crx实际上是一个压缩文件，使用解压文件打开这个文件就可以看到其中的文件目录，下图中是“关灯看视频”扩展的截图：因此可以认为，我们实际上就是写一个Web应用，然后将按照Chrome的规定将一个快捷方式放在Chrome工具栏上。2、Browser Actions（扩展图标）把Browser Actions翻译成扩展图标不是很准确，但它的功能就是把你的应用显示在Chrome工具栏上。我们在上面看到一个文件manifest.json，就是使用这个文件来把相应的图标和其他参数注册到Browser Actions。比如下图中就是EverNote的扩展图标。3、Page Actions（地址栏图标）如果你熟悉一些Chrome插件的话，你一定会发现有些扩展的图标不是显示在地址栏的右边，而是显示在地址内部右方，这就是Page Actions地址栏图标。可以看出上面中有三个Page Actions，图中我标出的是Chrome添加书签，现在你就会发现其实这个也是Chrome的扩展，只不是它是直接内置在Chrome的。Page Actions与Browser Actions的区别就是Page Actions不是随时都是显示的，必须在特定的页面中这个功能才能使用。因此在开发中注意：如果不是全部页面中都能使用的功能请使用Page Actions方式。4、popup弹出窗口popup属于Browser Actions，当点击图标时出现这个窗口，可以在里面放置任何html元素，它的宽度是自适应的。当然，这个弹出窗口不会被Chrome拦截的:)如下图中是evernote的popup窗口：5、Background Pages后台页面这个窗口不会显示，它是扩展程序的后台服务，它会一直保持运行。比如在一些需要数据保存程序中，如果当前用户关闭popup，就需要Background Pages来进行相应的操作。自己动手做一个我们以一个简单的任务管理程序来一步步讲解。上图是界面实现，我们首先完成界面的显示部分，首先建立一个新文件夹，以扩展应用的名称为标题，我们这里的应用叫做MyTaskList。然后把找一个图标文件，放到文件夹中，也可直接右键下载我的这个图标：图标文件不要小于19px*19px，但最好也不要超过这个尺寸，虽然大图它会自适应，但会使得应用文件变大。然后完成和未完成状态的两个图标放到资源文件中，可以建立任意文件夹放进去，因为CSS文件把定义它们的路径。建立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"    其中name代表应用程序名，version代表版本号，description代表功能描述。这些在安装扩展后就能看到，见下图：browser_action代表扩展图标段显示，它会定义图标地址、标题（也就是鼠标悬停提示）和默认的popup页面。我们这里定义的popup页面为popup.html。接下来开始定义popup.html显示，它不需要使用<html>、<head>和<body>标签，可以直接写上样式、脚本和html。我们的popup.html源码为：?<style type="text/css">*margin:0;padding:0;bodycolor:#333;overflow: hidden;margin: 0px;padding:5px;background: white;font-size:12px;imgmargin:0 4px;#addItemDivcolor:#ccc;.hidedisplay:none;.showdisplay:block;.taskItemcursor:pointer;inputwidth:100%;label.onwidth:12px; display:inline-block; height:12px; background:url(images/bg_task_on.gif) no-repeat 0px 2px;label.offwidth:12px; display:inline-block; height:12px; background:url(images/bg_task_off.gif) no-repeat 0px 2px;</style><div id="newItem" class="gray">添加新项</div><div id="addDiv" class="hide"><input type="text" id="txtTitle" /></div><div id="taskItemList">    <div class="taskItem">        <label class="on"></label><span class="taskTitle">新任务</span>    </div>    <div class="taskItem">        <label class="off"></label><span class="taskTitle">已完成任务</span>    </div></div>打开预览，样子就已经出来了：这样我们文件就已经建立完成，文件列表如下：现在就可以先尝试把它打包装到自己的Chrome里。首先打开Chrome-工具-扩展程序，展开开发人员模式，打到“打包扩展程序”按钮：点击“打包扩展程序”，弹出打包选择文件窗口，在扩展程序根目标中找到我们建立的文件夹，私有密码文件第一次不用选择：点击确定，它会在根文件夹同一级生成MyTaskList.crx和MyTaskList.pem，MyTaskList.pem是程序签名文件，以新版本的开发中还需要这个文件，不要删除它。把MyTaskList.crx拖进Chrome窗体内，就会把这个应用MyTaskList安装在Chrome里。我们的这个简单的模型就能看到效果了，下一节我们就会完善其中的代码。手把手教你开发Chrome扩展二：为html添加行为上一节我们已经讲了Chrome扩展的基础知识，并构建了基础的html，这一节我们将就html DOM添加部分添加脚本，即脚本在我们的popup页面中进行的操作，页面所产生的变化。正常情况下数据处理加载完成状态，这些数据是从本地数据读取的。点击“添加新项”，出现输入框，输入文字后回车提交数据：添加完成后将数据存储，同时添加DOM元素：考虑到功能最简化处理，点击已标为完成的任务，将提示“删除或重置为未完成”：以上功能为最核心功能，可以在此基础上进行扩展，比如任务分组，修改任务，任务提醒，网络同步数据等等。下面开始相应的脚本内容。为了避免全局变量，使用匿名函数方式，所有事件处理及数据绑定均在此函数中进行，同时定义与jQuery中的$()类似的函数：?(function()    var $=function(id)return document.getElementById(id);)();建立Tasks对象，定义show()函数和hide()函数，同时存储几个常用的DOM对象。?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')其中show()函数和hide()函数均使用了链式调用，每次执行此函数均会返回对象本身，这样对象就可以使用形如类似jQuery书写方式来使用此函数。然后注册事件：?/./初始化init:function()    /*注册事件*/    /打开添加文本框    Tasks.$addItemDiv.addEventListener('click',function()        Tasks.show(Tasks.$addItemInput).hide(Tasks.$addItemDiv);        Tasks.$txtTaskTitle.focus();    ,true);    /回车添加    Tasks.$txtTaskTitle