版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/catoop/article/details/70246058
1、Chrome擴充檔案
Chrome擴充檔案以.crx為字尾名，在
Google Chrome擴充官方網站 下載下傳擴充時，Chrome會将.crx檔案下載下傳到Chrome的Application Data檔案夾的User Data\Temp下，一般是C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\User Data\Temp，安裝完成或者取消安裝，該檔案就會被删除。.crx實際上是一個壓縮檔案，使用解壓檔案打開這個檔案就可以看到其中的檔案目錄，下圖中是“ 關燈看視訊”擴充的截圖：
是以可以認為，我們實際上就是寫一個Web應用，然後将按照Chrome的規定将一個快捷方式放在Chrome工具欄上。
2、Chrome例子
準備一個icon圖檔，用來顯示在浏覽器右上角的圖示，如：
建立 manifest.json 插件描述檔案：
-
{
-
"name": "收益率計算",
-
"version": "0.0.1",
-
"manifest_version": 2,
-
// 簡單描述
-
"description": "累加優惠券後計算最終實際收益率",
-
"icons": {
-
"16": "images/icon16.png"
-
},
-
// 浏覽器小圖表部分
-
"browser_action": {
-
"default_title": "收益率計算",
-
"default_icon": "images/icon16.png",
-
"default_popup": "html/calc.html"
-
},
-
// 引入腳本，content script 是運作在一個被稱為isolated world 的運作環境裡，
-
// 和頁面上的腳本互不幹擾，因為不在一個運作環境裡，是以也無法調用頁面上腳本定義的方法了
-
"content_scripts": [
-
{
-
"js": ["scripts/include.js"],
-
// 滿足什麼條件下使用該腳本
-
"matches": [
-
//"http://*/*",
-
//"https://*/*"
-
"http://*.baidu.com/*",
-
"https://*.baidu.com/*"
-
],
-
// 什麼情況下運作【指定文檔何時加載腳本 document_start\document_end\document_idel】
-
"run_at": "document_end"
-
}
-
],
-
// 應用協定頁面
-
"permissions": [
-
"http://*/*",
-
"https://*/*"
-
],
-
"content_security_policy": "script-src 'self'; object-src 'self'"
-
}
建立彈出框HTML頁面 calc.html：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>收益率電腦</title>
-
</head>
-
<body>
-
本金：<input id="benjin" value="30000"/><br/>
-
收益率：<input id="lilv1" value="0.08"/><br/>
-
投資期限(天)：<input id="days" value="90"/><br/>
-
優惠券金額：<input id="coupon" value="450"/><br/>
-
最終收益率：<input id="lilv2" readonly="true" /><br/>
-
<input id="calcBtn" type="button" value="計算" /><br/>
-
<script src="../scripts/jquery-1.12.3.min.js"></script>
-
<script src="../scripts/app.js"></script>
-
</body>
-
</html>
建立引入的app.js檔案：
其中 jquery-1.12.3.min.js 為 jquery 庫。
-
function calc(){
-
var money = $('#benjin').val()-0;// 本金
-
var days = $('#days').val()-0;// 投資期限
-
var lilv = $('#lilv1').val()-0;// 收益率
-
var coupon = $('#coupon').val()-0;// 優惠券金額(元)
-
var lilv2 = (money * lilv / 365 * days + coupon) / days * 365 / money;
-
lilv2 = (lilv2 * 100).toFixed(2);
-
$('#lilv2').val(lilv2 + "%");
-
}
-
$(document).ready(function(){
-
$("#calcBtn").click(function(){
-
calc();
-
});
-
});
建立 include.js 檔案，該檔案是用來注入到指定網站的js腳本，不同于 app.js，為了測試，我們其中隻輸出一個日志：
-
console.log('頁面加載被載入');
按如下目錄結構将檔案放入一個檔案夾中：
3、Chrome調試和打包
打開：設定 > 更多工具 > 擴充程式
加載我們的程式後，浏覽器右下角就出現我們的插件了，可以進行測試，如果修改了代碼，點選“重新加載(Ctrl + R)” 後在重新測試。
當然，我們開發好程式後，還是需要打包成 .crx 插件包的，這個很簡單，使用“打包擴充程式” 進行打包即可：
第一次打包，密鑰檔案不需要選擇，Chrome 會幫我們生成這個密鑰，在以後更新打包時再使用。
4、安裝 .crx 程式
将打包後的 crx 程式，拖到 Chrome 中，即可完成安裝。
源代碼包連結：https://pan.baidu.com/s/1hrQ6v2G
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)