admin管理员组文章数量:1650789
Chrome浏览器支持用户自定义安装丰富的插件来方便我们的使用,特别是对于一个码农来说,一些丰富的插件能够很方便我们的日常开发。本人就安装了许多方便的插件。
固然商店里有很多插件让我们去淘,但是如果我们能自己开发一些适用于我们的插件,那就再好不过了啊。。。前段时间调试一个前端页面,需要反复的去清理浏览器的缓存,特别痛苦的每次都需要去打开设置点击清理,很繁琐。正好有这个想法,何不自己开发一个插件,一点击图标就快捷的清理缓存该多好。作为一个码农,我常常调侃的一句话就是“程序员没有什么不可能的”我知道,,如此不要脸。。废话不多说,开始吧!
google对开发者向来是比较支持的,对于开发插件这件事,提供了丰富的API文档。本文将从我自己第一次开发的插件历程,来讲解插件开发的流程和步骤,以后同志们就能各自大显身手啦。。。找了官网上的一些开发资料,有兴趣自己研究的可以看API,当然看本博客也可以。
官方API(英文)
非官方API(中文)
入门教程(中文)
上面的API和入门教程其实已将讲解的很完整了。现在来说本插件的开发:
能够选择需要清理的选项,选择清理的时间段,并且会在桌面的右下角弹出提示框。并且快捷键Alt+C也能够触发清理事件。
步骤:
- 首先创建一个文件夹,文件夹名为你的插件名,例如本插件名就叫“Chrome clearCache”。此文件夹中将存放我们所有的资源。
- 在创建好的文件夹中新建一个名为“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:快捷键配置,可配置多个快捷键,在程序中监听从而执行任务。
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}); //返回信息
});
//监听快捷键
chromemands.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来获取前端传来的数据,包括清理时间段和清理的选项。
同时用了chromemands.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浏览器“清理缓存”插件应用开发 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729540550a1205425.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论