谷歌缓存清理插件

Posted qwangxiao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谷歌缓存清理插件相关的知识，希望对你有一定的参考价值。

  1.     一点点json
  2.     一点点html
  3.     一点点css
  4.     一点点js

文件结构，如图

    技术分享图片

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

代码详情：

manifest.json

[html] view plain copy
  1. {  
  2.     // 清单文件的版本，这个必须写，而且必须是2  
  3.     "manifest_version": 2,  
  4.     // 插件的名称  
  5.     "name": "清除缓存",  
  6.     // 插件的版本  
  7.     "version": "1.0",  
  8.     // 插件描述  
  9.     "description": "清除缓存",  
  10.     // 图标，一般偷懒全部用一个尺寸的也没问题  
  11.     "icons":  
  12.     {  
  13.         "16": "image/aaa.png",  
  14.         "48": "image/bbb.png",  
  15.         "128": "image/ccc.png"  
  16.     },  
  17.     // 会一直常驻的后台JS或后台页面  
  18.     "background":  
  19.     {  
  20.         // 2种指定方式，如果指定JS，那么会自动生成一个背景页  
  21.         "page": "index.html"  
  22.         //"scripts": ["js/background.js"]  
  23.     },  
  24.     // 浏览器右上角图标设置，browser_action、page_action、app必须三选一  
  25.     "browser_action":   
  26.     {  
  27.         "default_icon": "image/aaa.png",  
  28.         // 图标悬停时的标题，可选  
  29.         "default_title": "清理缓存",  
  30.         "default_popup": "index.html"  
  31.     },  
  32.     "permissions": ["browsingData"]  
  33. }  

index.html

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>缓存清理</title>  
  6. <link rel="stylesheet"www.lgzx520.cn/  href="style.css">  
  7. </head>  
  8. <body>  
  9.     <div class=‘clearDiv‘>  
  10.         <div class=‘clearLeftDiv btnDiv‘>清理缓存</div>  
  11.         <div class=‘otherDiv btnDiv‘>时间转换</div>  
  12.         <div class=‘bodyDiv‘></div>  
  13.         <div class="inputBtnDiv"><input class="btnClass" type="button" value="保存" id="btn1" /><input class="btnClass" type="button" value="手动清除" id="btn2" /></div>  
  14.         <div class="inputBtnDiv2">www.hjha178.com<input class="btnClass" type="button" value="转换" id="timeBtn" /></div>  
  15.     </div>  
  16. <script type="text/javascript" src="jquery-3.3.1.min.js"></script>  
  17. <script type="text/javascript" src="index.js"></script>  
  18. </body>  
  19. </html>  

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

index.js

[html] view plain copy
  1. var checkedObj = {  
  2.     "appcache": false,  
  3.     "cache": false,  
  4.     "cookies": false,  
  5.     "passwords": false,  
  6.     "downloads": false,  
  7.     "fileSystems": false,  
  8.     "formData": false,  
  9.     "history": false,  
  10.     "indexedDB": false,  
  11.     "localStorage":www.yigouylpt2.cn false,  
  12.     "serverBoundCertificates": false,  
  13.     "pluginData": false,  
  14.     "webSQL": false  
  15. };  
  16.   
  17. $(function (){  
  18.     $(‘.clearLeftDiv‘).css(‘font-weight‘, ‘bold‘);  
  19.     addClear();  
  20.     $(‘.inputBtnDiv2‘).hide();  
  21.     setInterval(clearCache, 300);  
  22. });  
  23.   
  24. $(‘.btnDiv‘).click(function (){  
  25.     $(‘.bodyDiv‘).html(‘www.tiaotiaoylzc.com‘);  
  26.     $(‘.btnDiv‘).css(‘font-weight‘, ‘unset‘);  
  27.     $(this).css(‘font-weight‘, ‘bold‘);  
  28.     if(this.className.indexOf(‘clearLeftDiv‘) > -1){  
  29.         $(‘.clearDiv‘).css(‘height‘, ‘450px‘);  
  30.         $(‘.bodyDiv‘).css(‘height‘, ‘370px‘);  
  31.         addClear(www.cmeidi.cn/);  
  32.         $(‘.inputBtnDiv2‘).hide();  
  33.         $(‘.inputBtnDiv‘).show();  
  34.     } else{  
  35.         $(‘.clearDiv‘).css(‘height‘, ‘180px‘);  
  36.         $(‘.bodyDiv‘).css(‘height‘, ‘100px‘);  
  37.         addTimeData();  
  38.         $(‘.inputBtnDiv‘).hide(www.douniu1956.com);  
  39.         $(‘.inputBtnDiv2‘).show();  
  40.     }  
  41. });  
  42.   
  43. function addClear(){  
  44.     $(‘.bodyDiv‘).append(‘<div><input class="check" type="checkbox" name="cleanOpt" value="appcache" id="appcache" /><label for="appcache">应用缓存</label></div>‘);  
  45.     $(‘.bodyDiv‘).append(‘<div><input class="check" type="checkbox" name="cleanOpt" value="cache" id="cache" /><label for="cache">浏览器缓存</label></div>‘);  
  46.     $(‘.bodyDiv‘).append(‘<div><input class="check" type="checkbox" name="cleanOpt" value="cookies" id="cookies" /><label for="cookies">COOKIES</label></div>‘);  
  47.     $(‘.bodyDiv‘).append(‘<div><input class="check" type="checkbox" name="cleanOpt" value="passwords" id="passwords" /><label for="passwords">保存的密码</label></div>‘);  
  48.     $(‘.bodyDiv‘).append(‘<div><input class="check" type="checkbox" name="cleanOpt" value="downloads" id="downloads" /><label for="downloads">下载记录</label></div>‘);  
  49.     $(‘.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>‘);  
  50.     $(‘.bodyDiv‘).append(‘<div><input class="check" type="checkbox" name="cleanOpt" value="formData" id="formData" /><label for="formData">表单数据</label></div>‘);  
  51.     $(‘.bodyDiv‘).append(‘<div>www.yingka178.com<input class="check" type="checkbox" name="cleanOpt" value="history" id="history" /><label for="history">历史记录</label></div>‘);  
  52.     $(‘.bodyDiv‘).append(‘<div><input class="check" type="checkbox" name="cleanOpt" value="indexedDB" id="indexedDB" /><label for="indexedDB">indexedDB</label></div>‘);  
  53.     $(‘.bodyDiv‘).append(‘<div><input class="check" type="checkbox" name="cleanOpt" value="localStorage" id="localStorage" /><label for="localStorage">本地存储</label><www.078881.cn /div>‘);  
  54.     $(‘.bodyDiv‘).append(‘<div><input class="check" type="checkbox" name="cleanOpt" value="serverBoundCertificates" id="serverBoundCertificates" /><label for="serverBoundCertificates">服务器证书</label></div>‘);  
  55.     $(‘.bodyDiv‘).append(‘<div><input class="check" type="checkbox" name="cleanOpt" value="pluginData" id="pluginData" /><label for="pluginData">插件数据</label></div>‘);  
  56.     $(‘.bodyDiv‘).append(‘<div><input class="check" type="checkbox" name="cleanOpt" value="webSQL" id="webSQL" /><label for="webSQL">WebSQL</label></div>‘);    
  57.     if(localStorage.checkedObj){  
  58.         checkedObj = JSON.parse(localStorage.checkedObj);  
  59.     }  
  60.     for(var i in checkedObj){  
  61.         $(‘#‘+i).prop(‘checked‘, checkedObj[i]);  
  62.     }  
  63.     $(‘.bodyDiv input‘).unbind();  
  64.     $(‘.bodyDiv input‘).on(‘click‘, function (){  
  65.         checkedObj[this.id] = this.checked;  
  66.     });  
  67. }  
  68.   
  69. document.addEventListener(‘DOMContentLoaded‘, function () {  
  70.     $("#btn1").on(‘click‘, function (){  
  71.         localStorage.checkedObj = JSON.stringify(checkedObj);  
  72.     });  
  73.     $("#btn2").on("click",function(){  
  74.         var fileter = {};  
  75.         fileter.since = 0;  
  76.         //向拓展程序发送消息  
  77.         chrome.browsingData.remove(fileter, getSelectDatas(), function(){  
  78.               
  79.         });  
  80.     });  
  81. });  
  82.   
  83. function clearCache(){  
  84.     var fileter = {};  
  85.     fileter.since = 0;  
  86.     chrome.browsingData.remove(fileter, getSelectDatas(), function(){  
  87.           
  88.     });  
  89. }  
  90.   
  91. //获取选中的清理选项    
  92. function getSelectDatas(){  
  93.     var datas = $("input[name=‘cleanOpt‘]");  
  94.     var data = {};  
  95.     $.each(datas, function(index, item){  
  96.         if(item.checked){  
  97.             data[item.value] = true;  
  98.         }  
  99.     });  
  100.     return data;  
  101. }  
  102.   
  103. function addTimeData(){  
  104.     $(‘.bodyDiv‘).append(‘<div class="timeDiv">格式：<select id="timeType">‘ +  
  105.         ‘<option value="yyyy-MM-dd hh:mm:ss" selected=selected>yyyy-MM-dd hh:mm:ss</option>‘ +  
  106.         ‘<option value="yyyyMMddhhmmss">yyyyMMddhhmmss</option>‘ +  
  107.         ‘<option value="yyyy-MM-dd">yyyy-MM-dd</option>‘ +  
  108.         ‘<option value="yyyyMMdd">yyyyMMdd</option>‘ +  
  109.         ‘<option value="hh:mm:ss">hh:mm:ss</option>‘ +  
  110.         ‘</select></div>‘);  
  111.     $(‘.bodyDiv‘).append(‘<div class="timeDiv">时间戳：<input type="text" id="times"></div>‘);  
  112.     $(‘.bodyDiv‘).append(‘<div class="timeDiv">格式化：<input type="text" id="formatTime"></div>‘);  
  113.     $("#times").on(‘change‘, function (){  
  114.         if(this.value && !isNaN(Number(this.value))){  
  115.             $(‘#formatTime‘).val(new Date(Number(this.value)).format($(‘#timeType‘).val()));  
  116.         }  
  117.     });  
  118.     $(‘#timeBtn‘).on(‘change‘, function (){  
  119.         if(this.value && !isNaN(Number(this.value))){  
  120.             $(‘#formatTime‘).val(new Date(Number(this.value)).format($(‘#timeType‘).val()));  
  121.         }  
  122.     });  
  123. }  
  124.   
  125. Date.prototype.format = function (format){  
  126.     var obj = {  
  127.         "M+": this.getMonth() + 1,  
  128.         "d+": this.getDate(),  
  129.         "h+": this.getHours(),  
  130.         "m+": this.getMinutes(),  
  131.         "s+": this.getSeconds(),  
  132.         "q+": Math.floor((this.getMonth()+3)/3),  
  133.         "S": this.getMilliseconds()  
  134.     };  
  135.     if(/(y+)/.test(format)){  
  136.         format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));  
  137.     }  
  138.     for(var i in obj){  
  139.         if(new RegExp("("+ i +")").test(format)){  
  140.             format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? obj[i] : ("00"+ obj[i]).substr((""+ obj[i]).length));  
  141.         }  
  142.     }  
  143.     return format;  
  144. }  

style.css

[html] view plain copy
  1. @CHARSET "UTF-8";  
  2.   
  3. .clearDiv{  
  4.     width: 220px;  
  5.     height: 450px;  
  6.     display: flex;  
  7.     align-items: center;  
  8.     justify-content: space-around;  
  9.     flex-wrap: wrap;  
  10. }  
  11.   
  12. .clearDiv div{  
  13.     display: flex;  
  14.     align-items: center;  
  15. }  
  16.   
  17. .clearLeftDiv, .otherDiv{  
  18.     width: 38%;  
  19.     height: 30px;  
  20.     justify-content: space-around;  
  21.     font-size: 14px;  
  22.     cursor: pointer;  
  23. }  
  24.   
  25. .bodyDiv{  
  26.     width: 100%;  
  27.     height: 370px;  
  28.     border: 1px solid beige;  
  29.     flex-wrap: wrap;  
  30. }  
  31.   
  32. .bodyDiv div{  
  33.     width: 100%;  
  34. }  
  35.   
  36. .bodyDiv div input.check{  
  37.     width: 16px;  
  38.     height: 16px;  
  39.     cursor: pointer;  
  40. }  
  41.   
  42. .bodyDiv div label{  
  43.     cursor: pointer;  
  44. }  
  45.   
  46. .btnClass{  
  47.     width: 80px;  
  48.     height: 25px;  
  49.     cursor: pointer;  
  50. }  
  51.   
  52. .inputBtnDiv{  
  53.     justify-content: space-around;  
  54.     width: 90%;  
  55. }  
  56.   
  57. .timeDiv{  
  58.     display: flex;  
  59.     justify-content: space-around;  
  60. }  

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

以上是关于谷歌缓存清理插件的主要内容，如果未能解决你的问题，请参考以下文章

浏览器清理缓存怎么清理

如何播放谷歌浏览器的缓存视频

生成javadoc_清理缓存和索引_插件的下载等

discuz 后台卸载插件后 板块列表不显示，需清理缓存

怎么样清理浏览器缓存?

chrome怎么清除缓存