谷歌缓存清理插件

最新推荐文章于 2024-02-21 11:15:41 发布

我只是代码搬运工

最新推荐文章于 2024-02-21 11:15:41 发布

阅读量1.5k

点赞数 3

分类专栏： js 文章标签： js 缓存清理 jquery json

本文链接：https://blog.csdn.net/u010825190/article/details/80657588

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

所需知识

json
html
css
js

文件结构，如图

扩展程序安装后，Chrome就会读取扩展程序中的manifest.json，这个配置文件名固定为manifest.json，内容是按照json格式描述的扩展相关信息，如扩展名称、版本、更新地址、请求的权限、扩展的UI界面入口等等。

代码详情：

manifest.json

{
    // 清单文件的版本，这个必须写，而且必须是2
    "manifest_version": 2,
    // 插件的名称
    "name": "清除缓存",
    // 插件的版本
    "version": "1.0",
    // 插件描述
    "description": "清除缓存",
    // 图标，一般偷懒全部用一个尺寸的也没问题
    "icons":
    {
        "16": "image/aaa.png",
        "48": "image/bbb.png",
        "128": "image/ccc.png"
    },
    // 会一直常驻的后台JS或后台页面
    "background":
    {
        // 2种指定方式，如果指定JS，那么会自动生成一个背景页
        "page": "index.html"
        //"scripts": ["js/background.js"]
    },
    // 浏览器右上角图标设置，browser_action、page_action、app必须三选一
    "browser_action": 
    {
        "default_icon": "image/aaa.png",
        // 图标悬停时的标题，可选
        "default_title": "清理缓存",
        "default_popup": "index.html"
    },
	"permissions": ["browsingData"]
}

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>缓存清理</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class='clearDiv'>
		<div class='clearLeftDiv btnDiv'>清理缓存</div>
		<div class='otherDiv btnDiv'>时间转换</div>
		<div class='bodyDiv'></div>
		<div class="inputBtnDiv"><input class="btnClass" type="button" value="保存" id="btn1" /><input class="btnClass" type="button" value="手动清除" id="btn2" /></div>
		<div class="inputBtnDiv2"><input class="btnClass" type="button" value="转换" id="timeBtn" /></div>
	</div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

注意：此html中不能写js代码，也不能在dom元素中直接引用js方法，如：<input type='button' οnclick='clear()'>，只能在引用的index.js中写事件监听，也不可以引用网页其它来源的js，所以jquery只能自己拷贝一份。因为在html中编写js代码更容易被劫持或者攻击，所以不支持。

index.js

var checkedObj = {
	"appcache": false,
	"cache": false,
	"cookies": false,
	"passwords": false,
	"downloads": false,
	"fileSystems": false,
	"formData": false,
	"history": false,
	"indexedDB": false,
	"localStorage": false,
	"serverBoundCertificates": false,
	"pluginData": false,
	"webSQL": false
};

$(function (){
	$('.clearLeftDiv').css('font-weight', 'bold');
	addClear();
	$('.inputBtnDiv2').hide();
	setInterval(clearCache, 300);
});

$('.btnDiv').click(function (){
	$('.bodyDiv').html('');
	$('.btnDiv').css('font-weight', 'unset');
	$(this).css('font-weight', 'bold');
	if(this.className.indexOf('clearLeftDiv') > -1){
		$('.clearDiv').css('height', '450px');
		$('.bodyDiv').css('height', '370px');
		addClear();
		$('.inputBtnDiv2').hide();
		$('.inputBtnDiv').show();
	} else{
		$('.clearDiv').css('height', '180px');
		$('.bodyDiv').css('height', '100px');
		addTimeData();
		$('.inputBtnDiv').hide();
		$('.inputBtnDiv2').show();
	}
});

function addClear(){
	$('.bodyDiv').append('<div><input class="check" type="checkbox" name="cleanOpt" value="appcache" id="appcache" /><label for="appcache">应用缓存</label></div>');
	$('.bodyDiv').append('<div><input class="check" type="checkbox" name="cleanOpt" value="cache" id="cache" /><label for="cache">浏览器缓存</label></div>');
	$('.bodyDiv').append('<div><input class="check" type="checkbox" name="cleanOpt" value="cookies" id="cookies" /><label for="cookies">COOKIES</label></div>');
	$('.bodyDiv').append('<div><input class="check" type="checkbox" name="cleanOpt" value="passwords" id="passwords" /><label for="passwords">保存的密码</label></div>');
	$('.bodyDiv').append('<div><input class="check" type="checkbox" name="cleanOpt" value="downloads" id="downloads" /><label for="downloads">下载记录</label></div>');
	$('.bodyDiv').append('<div><input class="check" type="checkbox" name="cleanOpt" value="fileSystems" id="fileSystems" /><label for="fileSystems">文件系统</label></div>');
	$('.bodyDiv').append('<div><input class="check" type="checkbox" name="cleanOpt" value="formData" id="formData" /><label for="formData">表单数据</label></div>');
	$('.bodyDiv').append('<div><input class="check" type="checkbox" name="cleanOpt" value="history" id="history" /><label for="history">历史记录</label></div>');
	$('.bodyDiv').append('<div><input class="check" type="checkbox" name="cleanOpt" value="indexedDB" id="indexedDB" /><label for="indexedDB">indexedDB</label></div>');
	$('.bodyDiv').append('<div><input class="check" type="checkbox" name="cleanOpt" value="localStorage" id="localStorage" /><label for="localStorage">本地存储</label></div>');
	$('.bodyDiv').append('<div><input class="check" type="checkbox" name="cleanOpt" value="serverBoundCertificates" id="serverBoundCertificates" /><label for="serverBoundCertificates">服务器证书</label></div>');
	$('.bodyDiv').append('<div><input class="check" type="checkbox" name="cleanOpt" value="pluginData" id="pluginData" /><label for="pluginData">插件数据</label></div>');
	$('.bodyDiv').append('<div><input class="check" type="checkbox" name="cleanOpt" value="webSQL" id="webSQL" /><label for="webSQL">WebSQL</label></div>');	
	if(localStorage.checkedObj){
		checkedObj = JSON.parse(localStorage.checkedObj);
	}
	for(var i in checkedObj){
		$('#'+i).prop('checked', checkedObj[i]);
	}
	$('.bodyDiv input').unbind();
	$('.bodyDiv input').on('click', function (){
		checkedObj[this.id] = this.checked;
	});
}

document.addEventListener('DOMContentLoaded', function () {
	$("#btn1").on('click', function (){
		localStorage.checkedObj = JSON.stringify(checkedObj);
	});
	$("#btn2").on("click",function(){
		var fileter = {};
		fileter.since = 0;
		//向拓展程序发送消息
		chrome.browsingData.remove(fileter, getSelectDatas(), function(){
			
		});
	});
});

function clearCache(){
	var fileter = {};
	fileter.since = 0;
	chrome.browsingData.remove(fileter, getSelectDatas(), function(){
		
	});
}

//获取选中的清理选项  
function getSelectDatas(){
    var datas = $("input[name='cleanOpt']");
    var data = {};
    $.each(datas, function(index, item){
		if(item.checked){
			data[item.value] = true;
		}
    });
    return data;
}

function addTimeData(){
	$('.bodyDiv').append('<div class="timeDiv">格式：<select id="timeType">' +
		'<option value="yyyy-MM-dd hh:mm:ss" selected=selected>yyyy-MM-dd hh:mm:ss</option>' +
		'<option value="yyyyMMddhhmmss">yyyyMMddhhmmss</option>' +
		'<option value="yyyy-MM-dd">yyyy-MM-dd</option>' +
		'<option value="yyyyMMdd">yyyyMMdd</option>' +
		'<option value="hh:mm:ss">hh:mm:ss</option>' +
		'</select></div>');
	$('.bodyDiv').append('<div class="timeDiv">时间戳：<input type="text" id="times"></div>');
	$('.bodyDiv').append('<div class="timeDiv">格式化：<input type="text" id="formatTime"></div>');
	$("#times").on('change', function (){
		if(this.value && !isNaN(Number(this.value))){
			$('#formatTime').val(new Date(Number(this.value)).format($('#timeType').val()));
		}
	});
	$('#timeBtn').on('change', function (){
		if(this.value && !isNaN(Number(this.value))){
			$('#formatTime').val(new Date(Number(this.value)).format($('#timeType').val()));
		}
	});
}

Date.prototype.format = function (format){
	var obj = {
		"M+": this.getMonth() + 1,
		"d+": this.getDate(),
		"h+": this.getHours(),
		"m+": this.getMinutes(),
		"s+": this.getSeconds(),
		"q+": Math.floor((this.getMonth()+3)/3),
		"S": this.getMilliseconds()
	};
	if(/(y+)/.test(format)){
		format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
	}
	for(var i in obj){
		if(new RegExp("("+ i +")").test(format)){
			format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? obj[i] : ("00"+ obj[i]).substr((""+ obj[i]).length));
		}
	}
	return format;
}

style.css

@CHARSET "UTF-8";

.clearDiv{
	width: 220px;
	height: 450px;
	display: flex;
	align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.clearDiv div{
	display: flex;
	align-items: center;
}

.clearLeftDiv, .otherDiv{
	width: 38%;
	height: 30px;
	justify-content: space-around;
	font-size: 14px;
	cursor: pointer;
}

.bodyDiv{
	width: 100%;
	height: 370px;
	border: 1px solid beige;
	flex-wrap: wrap;
}

.bodyDiv div{
	width: 100%;
}

.bodyDiv div input.check{
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.bodyDiv div label{
	cursor: pointer;
}

.btnClass{
	width: 80px;
	height: 25px;
	cursor: pointer;
}

.inputBtnDiv{
	justify-content: space-around;
	width: 90%;
}

.timeDiv{
	display: flex;
    justify-content: space-around;
}

最后在浏览器地址栏输入“chrome://extensions/”进入扩展程序界面，选择“开发者模式”，点击“加载已解压的拓展程序”。然后选择创建的文件夹就可以了。在浏览器的右上角就可以看到插件了

我只是代码搬运工

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
谷歌缓存清理插件

所需知识一点点json 一点点html 一点点css 一点点js文件结构，如图扩展程序安装后，Chrome就会读取扩展程序中的manifest.json，这个配置文件名固定为manifest.json，内容是按照json格式描述的扩展相关信息，如扩展名称、版本、更新地址、请求的权限、扩展的UI界面入口等等。代码详情：manifest.json{ // 清单...
复制链接

扫一扫

专栏目录