谷歌緩存清理插件
阿新 • • 發佈：2018-06-12
請求 load har ons items Go chm pass mms
- 一點點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/”進入擴展程序界面，選擇“開發者模式”，點擊“加載已解壓的拓展程序”。然後選擇創建的文件夾就可以了。在瀏覽器的右上角就可以看到插件了
谷歌緩存清理插件