一個簡單的Chrome浏覽器“清理緩存”插件應用開發

Chrome浏覽器支援使用者自定義安裝豐富的插件來友善我們的使用，特别是對于一個碼農來說，一些豐富的插件能夠很友善我們的日常開發。本人就安裝了許多友善的插件。

固然商店裡有很多插件讓我們去淘，但是如果我們能自己開發一些适用于我們的插件，那就再好不過了啊。。。前段時間調試一個前端頁面，需要反複的去清理浏覽器的緩存，特别痛苦的每次都需要去打開設定點選清理，很繁瑣。正好有這個想法，何不自己開發一個插件，一點選圖示就快捷的清理緩存該多好。作為一個碼農，我常常調侃的一句話就是“程式員沒有什麼不可能的”

一個簡單的Chrome浏覽器“清理緩存”插件應用開發

我知道，，如此不要臉。。廢話不多說，開始吧！

google對開發者向來是比較支援的，對于開發插件這件事，提供了豐富的API文檔。本文将從我自己第一次開發的插件曆程，來講解插件開發的流程和步驟，以後同志們就能各自大顯身手啦。。。找了官網上的一些開發資料，有興趣自己研究的可以看API，當然看本部落格也可以。

官方API（英文）

非官方API（中文）

入門教程（中文）

上面的API和入門教程其實已将講解的很完整了。現在來說本插件的開發：

能夠選擇需要清理的選項，選擇清理的時間段，并且會在桌面的右下角彈出提示框。并且快捷鍵Alt+C也能夠觸發清理事件。

一個簡單的Chrome浏覽器“清理緩存”插件應用開發

步驟：

首先建立一個檔案夾，檔案夾名為你的插件名，例如本插件名就叫“Chrome clearCache”。此檔案夾中将存放我們所有的資源。
在建立好的檔案夾中建立一個名為“manifest.json”的檔案，顧名思義，這是我們插件的一個清單檔案，是必須的！！

manifest.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"                //描述
		}
	}
	
}

其中必要的配置我都有注釋，更多的配置請看文檔，配置清單詳情。

manifest_version：表示清單版本，1已經過時，使用2即可
icons：此配置項表示插件中需要用到的圖示，16*16是用在浏覽器右上角按鈕的圖示，48*48是用在擴充程式管理頁面的圖示，128*128是用在Chrome商店的圖示。後面的都可以不用，隻配置浏覽器圖示也可以。
options_page：此配置表示在擴充程式頁面，點選“選項”所彈出的頁面。此頁面通常用于對插件背景的一些配置。我是直接與popup彈出頁面一樣
browser_action：此配置是用來配置點選浏覽器插件圖示所彈出來的頁面
background：此配置是必須的！！表示插件在浏覽器背景程序中執行的檔案，通常包含script檔案和html檔案。其中的配置"persistent": false表示在插件需要的時候再啟動，而不是一直占用背景
permissions：此配置項表示插件需要的一些權限，API中提供了豐富的功能，是以也需要不同的權限，本插件用到了browsingData：清除緩存權限，tabs：标簽頁面權限，notifications：通知框權限
commands：快捷鍵配置，可配置多個快捷鍵，在程式中監聽進而執行任務。

3.建立好配置清單檔案後，就可以建立一個html檔案，用來點選按鈕彈出的顯示頁面了，如配置中的一樣，我建立的名為“popup.html”

popup.html：

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>清理緩存</title>
    <link href="style.css" target="_blank" rel="external nofollow"  rel="stylesheet" type="text/css">
	<script src="jquery-3.2.1.min.js"></script>                     <!--可以引用jquery檔案-->
	<script src="popup.js"></script>                                <!--引用頁面js-->
  </head>
  <body>
	<form id="options">
		<h1>
		  <img src="clean48.png" alt="Toast">清除緩存
		</h1>
		
		<h2>
			<input type="button" id="cleanBtn" name="cleanBtn" value="清除緩存" />
			<span id="showMsg" name="showMsg"></span>
		</h2>
		<div style="margin-top:20px">
			清除時間段：
			<select id="time" name="time">
				<option value="1">1天前</option>
				<option value="5">5天前</option>
				<option value="30">一個月前</option>
				<option value="365">一年前</option>
			</select><br/><br/>
			<input type="checkbox" name="cleanOpt" value="appcache" checked>應用緩存（appcache）<br/>
			<input type="checkbox" name="cleanOpt" value="cache"    checked>浏覽器緩存（cache）<br/>
			<input type="checkbox" name="cleanOpt" value="cookies"  checked>cookies<br/>
			<input type="checkbox" name="cleanOpt" value="passwords" >密碼（passwords）<br/>
			<input type="checkbox" name="cleanOpt" value="downloads">下載下傳記錄（downloads）<br/>
			<input type="checkbox" name="cleanOpt" value="fileSystems">檔案系統（fileSystem）<br/>
			<input type="checkbox" name="cleanOpt" value="formData" checked>表單資料（formData）<br/>
			<input type="checkbox" name="cleanOpt" value="history">曆史記錄（history）<br/>
			<input type="checkbox" name="cleanOpt" value="indexedDB">indexedDB<br/>
			<input type="checkbox" name="cleanOpt" value="localStorage" checked>本地存儲（localStorage）<br/>
			<input type="checkbox" name="cleanOpt" value="serverBoundCertificates">伺服器證書（serverBoundCertificates）<br/>
			<input type="checkbox" name="cleanOpt" value="pluginData">插件資料（pluginData）<br/>
			<input type="checkbox" name="cleanOpt" value="webSQL">webSQL<br/>
		</div>
    </form>
  </body>
</html>

注意：此html中不能編寫js代碼，也不能在dom元素中直接引用js方法，例如<input type="buttn" οnclick="toClean()" /> ，隻能在引用的popup.js中編寫元素監聽。也不可以引用網頁其他來源的js，是以jquery就必須讓我們自己拷貝一份到檔案夾了。之是以這樣，是因為在html中編寫js代碼更容易被劫持或攻擊（官網是這個意思），是以不支援，大家還是引用js來的友善。

4.html中引用的js名為popup.js，是以建立此js檔案。

popup.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在頁面啟動的時候，監聽了“清理緩存”按鈕，當點選按鈕後，便去擷取多選框中選擇的清理選項，并組裝成data json對象，調用chrome.runtime.sendMessage方法向背景代碼發送執行清理消息，并傳遞data資料和清理事件資料，其中第二個參數為響應函數。

5.上面的popup.js是頁面js,其中向背景發送了執行消息，在配置清單中我們還配置了一個background.js背景執行代碼，背景代碼監聽popup.js發來的消息，

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

background.js中，運用了 chrome.runtime.onMessage.addListener監聽了前端頁面傳來的消息，判斷是“clearCache”指令，則執行清理操作。通過request.days來擷取前端傳來的資料，包括清理時間段和清理的選項。

同時用了chrome.commands.onCommand.addListener方法監聽了快捷鍵，當快捷鍵名為我們在配置清單中配置的快捷鍵cleanKey，則同樣執行清理操作。

在清理方法中，調用了chrome.browsingData.remove來進行清理指令，這需要用到我們在清單中配置的清理緩存權限，其中需要三個參數，第一個為清理時間段，他需要的是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直接指派給他，當然也可以直接寫死。第三個為回調函數，當清理完成後，可以調用相應的方法。此例中是調用了notifications權限來彈出一個提示框。關于此提示框，官網配置有更詳細的API，他不會局限于一個單一的網頁頁面，而是在整個電腦桌面都有效，也就是說，隻要你不關閉浏覽器，他會在桌面的任何程式中彈出。

6.至此，我們必要的檔案已經建立完成了，其中還有一些css檔案，和png圖檔，相信不需要我多講。然後，我們的插件目錄的結果如下：

一個簡單的Chrome浏覽器“清理緩存”插件應用開發

7.最後一步，就是安裝插件到我們的Chrome了，在浏覽器位址欄輸入chrome://extensions/ 進入擴充程式頁面，選中“開發者模式”，點選“加載已解壓的擴充程式”，然後選擇我們建立的檔案夾“Chrome clearCache”，就可以啦。

一個簡單的Chrome浏覽器“清理緩存”插件應用開發

在浏覽器的右上，就可以看到我們的插件啦。。。

一個簡單的Chrome浏覽器“清理緩存”插件應用開發

在擴充程式頁面，我們插件圖示下面，有一個“選項”按鈕，點選會打開一個頁面，這就是我們在配置清單中"options_page": "popup.html" 所配置的頁面，我這裡是和彈出頁面一樣的。在此頁面中，可以對我們的代碼打開控制台進行調試。

一個簡單的Chrome浏覽器“清理緩存”插件應用開發

如果你有興趣，還可以打包上傳到google商店，分享給衆多網友。我這裡就不做展示了。

至此，一個完整的插件就開發完成了，是不是很簡單？同時還很有樂趣。當然你還可以開發出更出色更豐富功能的插件。我已經将此插件上傳到了我的gitHub倉庫，有興趣的下載下傳下來試試看：gitHub

喜歡的麻煩點個星星咯~

本人原創，歡迎轉載，請注明出處，謝謝。

一個簡單的Chrome浏覽器“清理緩存”插件應用開發

繼續閱讀

Xcode 8 安裝插件（KSImageNamed）閃退

ztree插件使用執行個體

HTML5 Canvas版的鬥地主登場！

微軟的軟體就是臃腫

插件資源管理

MacVim

Vim 安裝 YouCompleteMe 插件

mac 安裝vim 插件YouCompleteMe

Fedora25下vim智能補全插件YouCompleteMe安裝

YoucompleteMe安裝

PDF.js的使用

ZeroClipboard跨浏覽器複制，flash複制，複制内容

淺談對插件Plugin設計方法的認識

selenium 自動搶課——電子科大自動搶課腳本前言：使用方法：`代碼：

linux下的完美網銀們（google chrome, ubuntu10.04）

用mybatis的generator插件在項目中自動生成dao及entity