当前位置 > 谷歌浏览器> 正文

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

2023-08-27 14:00:46 谷歌浏览器 / 插件 / 清理 / 清单 / 弹出 / 缓存 /

浏览器支持用户自定义安装丰富的插件来方便我们的使用，尤其是对于一个码农来说，一些丰富的插件可以非常方便我们的日常开发。我安装了很多方便的插件。

虽然商店里有很多插件可供我们搜索，但是如果我们能够开发一些适合我们的插件那就太好了。。。前段时间调试前端页面时，需要反复清除浏览器缓存。特别痛苦的是每次都要打开设置点击清除，非常繁琐。有了这个想法，何不自己开发一个插件，一键图标快速清除缓存那就太好了。作为一名码农，我经常调侃一句话“程序员没有不可能”

我知道，太无耻了。。话不多说，让我们开始吧！

一直以来对开发者的支持比较多，为插件的开发提供了丰富的API文档。本文将从我第一次开发的插件流程开始讲解插件开发的流程和步骤，同志们以后一定能大显身手。。。我在官网上找到了一些开发资料。有兴趣自行研究的可以阅读API，当然也可以阅读这篇博客。

官方API（英文）

非官方API（中文）

入门教程（中文）

上面的API和入门教程其实已经解释得很完整了。现在来说说这个插件的开发：

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

怎么清除历史浏览记录_ie浏览器怎么清除浏览记录_谷歌浏览器清除历史插件

步：

首先创建一个文件夹，文件夹名称就是你的插件名称，比如这个插件的名称是“ ”。该文件夹将存放我们所有的资产。在创建的文件夹中创建一个名为“.json”的新文件。顾名思义，这是我们插件的清单文件，这是必须的！！ .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"                //描述
		}
	}
	
}

我对必要的配置有评论。更多配置请参见文档和配置列表详细信息。 3、创建配置列表文件后，可以创建一个html文件，点击按钮即可弹出显示页面。在配置中，我创建的名称是“popup.html”

弹出.html：



  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    清理缓存
    <link href="style.css" rel="stylesheet" type="text/css">
	<script src="jquery-3.2.1.min.js"></script>                     
	<script src="popup.js"></script>                                
  
  <body>
	
		
		  清除缓存
		
		
		
			
			
		
		
			清除时间段：
			


			应用缓存（appcache）

			浏览器缓存（cache）

			cookies

			密码（passwords）

			下载记录（downloads）

			文件系统（fileSystem）

			表单数据（formData）

			历史记录（history）

			indexedDB

			本地存储（localStorage）

			服务器证书（serverBoundCertificates）

			插件数据（pluginData）

			webSQL

注意：该html中不能写JS代码，dom元素中不能直接引用js方法，如ο=“()”/>，元素监控只能写在引用的popup.js中。也不可能引用网页其他来源的js，所以我们必须自己复制一份到文件夹中。原因是在html中写js代码比较容易被劫持或者攻击（官网就是这个意思），所以不支持，方便大家引用js。

4.html中引用的js叫做popup.js，所以创建这个js文件。

弹出.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监听“清除缓存”按钮。点击按钮时，会获取多选框中选中的清理选项，组装成数据json对象，并调用..方法将清理发送到后台代码消息，并传入数据data和清理事件数据，其中第二个参数是响应函数。

5、上面的popup.js是页面js，向后台发送执行消息。在配置列表中，我们还配置了一段.js后台执行代码。后台代码监听popup.js发送的消息。

.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: '清理缓存成功!'
		});
	});
}

.js中，...用于监听来自前端页面的消息，如果判断为“”命令，则进行清理操作。使用.days从前端获取数据，包括清洁时间段和清洁选项。

同时使用mands..方法来监听快捷键。当快捷键名称是我们在配置列表中配置的快捷键时，也会进行清理操作。

方法中调用..执行命令，需要我们在列表中配置的清理缓存权限，需要三个参数，第一个是清理时间段，他需要的是从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直接赋值给他，当然我们也可以直接写死。第三个是回调函数，当清理完成后，可以调用相应的方法。本例中调用权限弹出提示框。关于这个提示框，官网配置有比较详细的API。它不会局限于单个网页，而是在整个计算机桌面上有效。也就是说，只要不关闭浏览器，任何桌面上都会弹出该程序。

6、至此，我们所需要的文件已经创建完毕，包括一些css文件，还有png图片谷歌浏览器清除历史插件