Chrome浏览器支持用户自定义安装丰富的插件来方便我们的使用，特别是对于一个码农来说，一些丰富的插件能够很方便我们的日常开发。本人就安装了许多方便的插件。
固然商店里有很多插件让我们去淘，但是如果我们能自己开发一些适用于我们的插件，那就再好不过了啊。。。前段时间调试一个前端页面，需要反复的去清理浏览器的缓存，特别痛苦的每次都需要去打开设置点击清理，很繁琐。正好有这个想法，何不自己开发一个插件，一点击图标就快捷的清理缓存该多好。作为一个码农，我常常调侃的一句话就是“程序员没有什么不可能的”我知道，，如此不要脸。。废话不多说，开始吧！
google对开发者向来是比较支持的，对于开发插件这件事，提供了丰富的API文档。本文将从我自己第一次开发的插件历程，来讲解插件开发的流程和步骤，以后同志们就能各自大显身手啦。。。找了官网上的一些开发资料，有兴趣自己研究的可以看API，当然看本博客也可以。
官方API（英文）
非官方API（中文）
入门教程（中文）
上面的API和入门教程其实已将讲解的很完整了。现在来说本插件的开发：
能够选择需要清理的选项，选择清理的时间段，并且会在桌面的右下角弹出提示框。并且快捷键Alt+C也能够触发清理事件。
步骤：首先创建一个文件夹，文件夹名为你的插件名，例如本插件名就叫“Chrome clearCache”。此文件夹中将存放我们所有的资源。在创建好的文件夹中新建一个名为“manifest.json”的文件，顾名思义，这是我们插件的一个清单文件，是必须的！！manifest.json：
{ "name": "Chrome clearCache",//插件名"manifest_version":2, "version": "0.1",//插件版本号 "description": "清除浏览器缓存",//插件描述信息"author": "aggerChen","icons": { "16": "clean16.png","48": "clean48.png","128": "clean128.png" },//图标：16:浏览器按钮图标 48:扩展程序管理页面图标 128:Chrome商店图标"options_page": "popup.html", //扩展程序管理页面点击弹出的页面"browser_action": { //点击浏览器按钮图标弹出的页面"default_icon": "clean16.png","default_popup": "popup.html","default_title": "Chrome clearCache"//鼠标提示信息},"background": {//后台运行代码"scripts": ["jquery-3.2.1.min.js", "background.js"],"persistent": false//在需要的时候重启，而不是一直占用后台},"web_accessible_resources": [ //可访问的资源路径"clean48.png"],"permissions": [ //权限"browsingData", //清除缓存权限"tabs", //标签页权限"notifications"//弹出框权限],"commands": { //配置快捷键"cleanKey": { //快捷键名"suggested_key": { "default": "Alt+C" }, //键位"description": "clean cache key"//描述}}}
其中必要的配置我都有注释，更多的配置请看文档，配置清单详情。 manifest_version：表示清单版本，1已经过时，使用2即可
icons：此配置项表示插件中需要用到的图标，16*16是用在浏览器右上角按钮的图标，48*48是用在扩展程序管理页面的图标，128*128是用在Chrome商店的图标。后面的都可以不用，只配置浏览器图标也可以。
options_page：此配置表示在扩展程序页面，点击“选项”所弹出的页面。此页面通常用于对插件后台的一些配置。我是直接与popup弹出页面一样
browser_action：此配置是用来配置点击浏览器插件图标所弹出来的页面
background：此配置是必须的！！表示插件在浏览器后台进程中执行的文件，通常包含script文件和html文件。其中的配置"persistent": false表示在插件需要的时候再启动，而不是一直占用后台
permissions：此配置项表示插件需要的一些权限，API中提供了丰富的功能，所以也需要不同的权限，本插件用到了browsingData：清除缓存权限，tabs：标签页面权限，notifications：通知框权限
commands：快捷键配置，可配置多个快捷键，在程序中监听从而执行任务。3.创建好配置清单文件后，就可以创建一个html文件，用来点击按钮弹出的显示页面了，如配置中的一样，我创建的名为“popup.html”
popup.html：
<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>清理缓存</title><link href="style.css" rel="stylesheet" type="text/css"><script src="jquery-3.2.1.min.js"></script> <!--可以引用jquery文件--><script src="popup.js"></script> <!--引用页面js--></head><body><form id="options"><h1><img src="clean48.png" alt="Toast">清除缓存</h1><h2><input type="button" id="cleanBtn" name="cleanBtn" value="清除缓存" /><span id="showMsg" name="showMsg"></span></h2><div style="margin-top:20px">清除时间段：<select id="time" name="time"><option value="1">1天前</option><option value="5">5天前</option><option value="30">一个月前</option><option value="365">一年前</option></select><br/><br/><input type="checkbox" name="cleanOpt" value="appcache" checked>应用缓存（appcache）<br/><input type="checkbox" name="cleanOpt" value="cache" checked>浏览器缓存（cache）<br/><input type="checkbox" name="cleanOpt" value="cookies" checked>cookies<br/><input type="checkbox" name="cleanOpt" value="passwords" >密码（passwords）<br/><input type="checkbox" name="cleanOpt" value="downloads">下载记录（downloads）<br/><input type="checkbox" name="cleanOpt" value="fileSystems">文件系统（fileSystem）<br/><input type="checkbox" name="cleanOpt" value="formData" checked>表单数据（formData）<br/><input type="checkbox" name="cleanOpt" value="history">历史记录（history）<br/><input type="checkbox" name="cleanOpt" value="indexedDB">indexedDB<br/><input type="checkbox" name="cleanOpt" value="localStorage" checked>本地存储（localStorage）<br/><input type="checkbox" name="cleanOpt" value="serverBoundCertificates">服务器证书（serverBoundCertificates）<br/><input type="checkbox" name="cleanOpt" value="pluginData">插件数据（pluginData）<br/><input type="checkbox" name="cleanOpt" value="webSQL">webSQL<br/></div></form></body></html>
注意：此html中不能编写js代码，也不能在dom元素中直接引用js方法，例如<input type="buttn" οnclick="toClean()" /> ，只能在引用的popup.js中编写元素监听。也不可以引用网页其他来源的js，所以jquery就必须让我们自己拷贝一份到文件夹了。之所以这样，是因为在html中编写js代码更容易被劫持或攻击（官网是这个意思），所以不支持，大家还是引用js来的方便。
4.html中引用的js名为popup.js，所以创建此js文件。
popup.js：
/** author:aggerChen*/document.addEventListener('DOMContentLoaded', function () {$("#cleanBtn").on("click",function(){$("#cleanBtn").attr('disabled',true);$("#showMsg").text('缓存清除中...');$("#showMsg").fadeIn();//向扩展程序发送消息，并传递数据chrome.runtime.sendMessage({msg: 'clearCache',data: getSelectDatas(),//获取清除选项days: $("#time").val()//获取清除多长时间},function(response){//响应函数$("#cleanBtn").attr('disabled',false);$("#showMsg").text('清除成功!');$('#showMsg').delay(2000).fadeOut(500);});});});//获取选中的清理选项function getSelectDatas(){var datas = $("input[name='cleanOpt']");//获取清除哪些内容var data = {};$.each(datas,function(index,item){//组装数据if(item.checked) data[item.value] = true;});return data;}
此js在页面启动的时候，监听了“清理缓存”按钮，当点击按钮后，便去获取多选框中选择的清理选项，并组装成data json对象，调用chrome.runtime.sendMessage方法向后台代码发送执行清理消息，并传递data数据和清理事件数据，其中第二个参数为响应函数。
5.上面的popup.js是页面js,其中向后台发送了执行消息，在配置清单中我们还配置了一个background.js后台执行代码，后台代码监听popup.js发来的消息，
background.js：
//监听页面chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {if(request.msg == 'clearCache'){//如果是清理命令var days = request.days||1;toclean(days,request.data);//则调用执行清除方法}sendResponse({farewell:true});//返回信息});//监听快捷键mands.onCommand.addListener(function(command) {if (command == "cleanKey") {//如果快捷键是指定的按钮toclean(1,{ "appcache": true,//则调用执行清除方法"cache": true,"cookies": false,"downloads": false,"fileSystems": true,"formData": true,"history": false,"indexedDB": true,"localStorage": true,"serverBoundCertificates": true,"pluginData": true,"passwords": false,"webSQL": true});}});//执行清除方法function toclean(days,data){var millisecondsPerWeek = 1000 * 60 * 60 * 24 * days;var ago = (new Date()).getTime() - millisecondsPerWeek;chrome.browsingData.remove({ "since": ago }, data , function () {//弹出框new Notification('chrome chernCache', {icon: 'clean48.png',body: '清理缓存成功!'});});}
background.js中，运用了chrome.runtime.onMessage.addListener监听了前端页面传来的消息，判断是“clearCache”命令，则执行清理操作。通过request.days来获取前端传来的数据，包括清理时间段和清理的选项。
同时用了mands.onCommand.addListener方法监听了快捷键，当快捷键名为我们在配置清单中配置的快捷键cleanKey，则同样执行清理操作。
在清理方法中，调用了chrome.browsingData.remove来进行清理命令，这需要用到我们在清单中配置的清理缓存权限，其中需要三个参数，第一个为清理时间段，他需要的是1970年到现在的毫秒差，所以要相应的计算一下。第二个参数为需要清理的选项，为一个json格式：
{"appcache": true,"cache": true,"cookies": false,"downloads": false,"fileSystems": true,"formData": true,"history": false,"indexedDB": true,"localStorage": true,"serverBoundCertificates": true,"pluginData": true,"passwords": false,"webSQL": true}
我们通过前端的多选框传递json直接赋值给他，当然也可以直接写死。第三个为回调函数，当清理完成后，可以调用相应的方法。此例中是调用了notifications权限来弹出一个提示框。关于此提示框，官网配置有更详细的API，他不会局限于一个单一的网页页面，而是在整个电脑桌面都有效，也就是说，只要你不关闭浏览器，他会在桌面的任何程序中弹出。
6.至此，我们必要的文件已经创建完成了，其中还有一些css文件，和png图片，相信不需要我多讲。然后，我们的插件目录的结果如下：
7.最后一步，就是安装插件到我们的Chrome了，在浏览器地址栏输入chrome://extensions/ 进入扩展程序页面，选中“开发者模式”，点击“加载已解压的扩展程序”，然后选择我们创建的文件夹“Chrome clearCache”，就可以啦。
在浏览器的右上，就可以看到我们的插件啦。。。
在扩展程序页面，我们插件图标下面，有一个“选项”按钮，点击会打开一个页面，这就是我们在配置清单中"options_page": "popup.html" 所配置的页面，我这里是和弹出页面一样的。在此页面中，可以对我们的代码打开控制台进行调试。
如果你有兴趣，还可以打包上传到google商店，分享给众多网友。我这里就不做展示了。
至此，一个完整的插件就开发完成了，是不是很简单？同时还很有乐趣。当然你还可以开发出更出色更丰富功能的插件。我已经将此插件上传到了我的gitHub仓库，有兴趣的下载下来试试看：gitHub
喜欢的麻烦点个星星咯~
本人原创，欢迎转载，请注明出处，谢谢。
如果觉得《一个简单的Chrome浏览器“清理缓存”插件应用开发》对你有帮助，请点赞、收藏，并留下你的观点哦！
