一个简单的Chrome浏览器“清理缓存”插件应用开发

Chrome浏览器支持用户自定义安装丰富的插件来方便我们的使用，特别是对于一个码农来说，一些丰富的插件能够很方便我们的日常开发。本人就安装了许多方便的插件。

固然商店里有很多插件让我们去淘，但是如果我们能自己开发一些适用于我们的插件，那就再好不过了啊。。。前段时间调试一个前端页面，需要反复的去清理浏览器的缓存，特别痛苦的每次都需要去打开设置点击清理，很繁琐。正好有这个想法，何不自己开发一个插件，一点击图标就快捷的清理缓存该多好。作为一个码农，我常常调侃的一句话就是“程序员没有什么不可能的”

一个简单的Chrome浏览器“清理缓存”插件应用开发

我知道，，如此不要脸。。废话不多说，开始吧！

google对开发者向来是比较支持的，对于开发插件这件事，提供了丰富的API文档。本文将从我自己第一次开发的插件历程，来讲解插件开发的流程和步骤，以后同志们就能各自大显身手啦。。。找了官网上的一些开发资料，有兴趣自己研究的可以看API，当然看本博客也可以。

官方API（英文）

非官方API（中文）

入门教程（中文）

上面的API和入门教程其实已将讲解的很完整了。现在来说本插件的开发：

能够选择需要清理的选项，选择清理的时间段，并且会在桌面的右下角弹出提示框。并且快捷键Alt+C也能够触发清理事件。

一个简单的Chrome浏览器“清理缓存”插件应用开发

步骤：

首先创建一个文件夹，文件夹名为你的插件名，例如本插件名就叫“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" target="_blank" rel="external nofollow"  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});		//返回信息
});

//监听快捷键
chrome.commands.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来获取前端传来的数据，包括清理时间段和清理的选项。

同时用了chrome.commands.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图片，相信不需要我多讲。然后，我们的插件目录的结果如下：

一个简单的Chrome浏览器“清理缓存”插件应用开发

7.最后一步，就是安装插件到我们的Chrome了，在浏览器地址栏输入chrome://extensions/ 进入扩展程序页面，选中“开发者模式”，点击“加载已解压的扩展程序”，然后选择我们创建的文件夹“Chrome clearCache”，就可以啦。

一个简单的Chrome浏览器“清理缓存”插件应用开发

在浏览器的右上，就可以看到我们的插件啦。。。

一个简单的Chrome浏览器“清理缓存”插件应用开发

在扩展程序页面，我们插件图标下面，有一个“选项”按钮，点击会打开一个页面，这就是我们在配置清单中"options_page": "popup.html" 所配置的页面，我这里是和弹出页面一样的。在此页面中，可以对我们的代码打开控制台进行调试。

一个简单的Chrome浏览器“清理缓存”插件应用开发

如果你有兴趣，还可以打包上传到google商店，分享给众多网友。我这里就不做展示了。

至此，一个完整的插件就开发完成了，是不是很简单？同时还很有乐趣。当然你还可以开发出更出色更丰富功能的插件。我已经将此插件上传到了我的gitHub仓库，有兴趣的下载下来试试看：gitHub

喜欢的麻烦点个星星咯~

本人原创，欢迎转载，请注明出处，谢谢。

一个简单的Chrome浏览器“清理缓存”插件应用开发

继续阅读

Xcode 8 安装插件（KSImageNamed）闪退

ztree插件使用实例

HTML5 Canvas版的斗地主登场！

微软的软件就是臃肿

插件资源管理

MacVim

Vim 安装 YouCompleteMe 插件

mac 安装vim 插件YouCompleteMe

Fedora25下vim智能补全插件YouCompleteMe安装

YoucompleteMe安装

PDF.js的使用

ZeroClipboard跨浏览器复制，flash复制，复制内容

浅谈对插件Plugin设计方法的认识

selenium 自动抢课——电子科大自动抢课脚本前言：使用方法：`代码：

linux下的完美网银们（google chrome, ubuntu10.04）

用mybatis的generator插件在项目中自动生成dao及entity