谷歌缓存清理插件

一点点json
一点点html
一点点css
一点点js

文件结构，如图

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

代码详情：

manifest.json

[html] view plain copy
{  
    // 清单文件的版本，这个必须写，而且必须是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

[html] view plain copy
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>缓存清理</title>  
<link rel="stylesheet"www.lgzx520.cn/  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">www.hjha178.com<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' onclick='clear()'>，只能在引用的index.js中写事件监听，也不可以引用网页其它来源的js，所以jquery只能自己拷贝一份。因为在html中编写js代码更容易被劫持或者攻击，所以不支持。

index.js

[html] view plain copy
var checkedObj = {  
    "appcache": false,  
    "cache": false,  
    "cookies": false,  
    "passwords": false,  
    "downloads": false,  
    "fileSystems": false,  
    "formData": false,  
    "history": false,  
    "indexedDB": false,  
    "localStorage":www.yigouylpt2.cn false,  
    "serverBoundCertificates": false,  
    "pluginData": false,  
    "webSQL": false  
};  
  
$(function (){  
    $('.clearLeftDiv').css('font-weight', 'bold');  
    addClear();  
    $('.inputBtnDiv2').hide();  
    setInterval(clearCache, 300);  
});  
  
$('.btnDiv').click(function (){  
    $('.bodyDiv').html('www.tiaotiaoylzc.com');  
    $('.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(www.cmeidi.cn/);  
        $('.inputBtnDiv2').hide();  
        $('.inputBtnDiv').show();  
    } else{  
        $('.clearDiv').css('height', '180px');  
        $('.bodyDiv').css('height', '100px');  
        addTimeData();  
        $('.inputBtnDiv').hide(www.douniu1956.com);  
        $('.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>www.leyouzaixian2.com<input class="check" type="checkbox" name="cleanOpt" value="fileSystems" id="fileSystems" /><label for="fileSystems">文件系统</label>www.bomaoyule.cn/</div>');  
    $('.bodyDiv').append('<div><input class="check" type="checkbox" name="cleanOpt" value="formData" id="formData" /><label for="formData">表单数据</label></div>');  
    $('.bodyDiv').append('<div>www.yingka178.com<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><www.078881.cn /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

[html] view plain copy
@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/”进入扩展程序界面，选择“开发者模式”，点击“加载已解压的拓展程序”。然后选择创建的文件夹就可以了。在浏览器的右上角就可以看到插件了

谷歌缓存清理插件

猜你喜欢