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

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});      //返回信息
});//监听快捷键
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图片，相信不需要我多讲。然后，我们的插件目录的结果如下：

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

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

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

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

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

喜欢的麻烦点个星星咯~

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

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

Chrome浏览器截屏插件的开发
目录第一章绪论 1 1.1选题背景及意义 1 1.2发展现状研究 2 1.2.1浏览器简介 2 1.2.2 浏览器发展历程 2 1.2.3 浏览器分类 3 1.2.4 chrome浏览器简介 3 ...
搜索引擎快捷导航：一个简单的chrome插件（教程）
搜索引擎快捷导航使用方法 :下载crx扩展名文件,拖入chrome应用管理界面即可 github地址:https://github.com/mouday/chrome-search-tool 编写一 ...
如何彻底禁用Chrome浏览器的缓存功能
禁止Chrome浏览器的缓存功能有几种方式: 使用Shift + F5强制刷新缓存.实际使用中我们发现,这种方法对于部分网页的更改并不能做到释放缓存的作用,尤其是无法释放DNS缓存. 使用隐身模式Sh ...
Flash正式成为Googel Chrome浏览器内置插件
3月30日,Google Chrome浏览器官方博客宣布Flash正式成为Google Chrome浏览器内置插件.从此,Flash将随同Google Chrome的版本同时发布,并且附带自动更新功能 ...
如意报表插件如何安装_Google Chrome浏览器如何安装插件应用
首先提前庆祝中华人民共和国成立七十周年! 顺祝各位国庆快乐! 浏览器插件应用是基于浏览器并且给浏览器增加功能的相对于浏览器系统的软件,说起浏览器插件应用怎么牛逼,怎么好玩,怎么有用,如 ...
如何用 Python开发一个简单的 Webkit 浏览器
在这篇教程中,我们会用 Python 的 PyQt 框架编写一个简单的 web 浏览器.关于 PyQt ,你可能已经有所耳闻了,它是 Qt 框架下的一系列 Python 组件,而 Qt(发音类似&qu ...
如何使用Chrome浏览器查看缓存？
前言:本文将告诉大家如何使用Chrome浏览器查看缓存. Chrome浏览器的缓存文件的位置首先,我们需要启动Chrome浏览器,在Chrome浏览器的地址栏中输入chrome://version, ...
开源Chrome浏览器网络代理插件：Retween
Retween是一个Chrome浏览器网络代理插件. 开源地址:Retween开源地址
python实现一个简单的图片浏览器
上一个博客中学习了如何在网页上进行简单的图片爬取,目的是制作一个简单的图片浏览器,然后可以选择喜欢的图片筛选到另一个文件夹中. 爬取图片的博客链接:https://blog.csdn.net/yql_ ...

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

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

最新文章

热门文章