|
1、Chrome擴展文件
Chrome擴展文件以.crx為后綴名，在Google Chrome擴展官方網(wǎng)站下載擴展時，Chrome會將.crx文件下載到Chrome的Application Data文件夾的User Data\Temp下，一般是C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\User Data\Temp，安裝完成或者取消安裝，該文件就會被刪除。.crx實際上是一個壓縮文件，使用解壓文件打開這個文件就可以看到其中的文件目錄，下圖中是“關(guān)燈看視頻”擴展的截圖：
因此可以認為，我們實際上就是寫一個Web應(yīng)用，然后將按照Chrome的規(guī)定將一個快捷方式放在Chrome工具欄上。
2、Chrome例子 準備一個icon圖片，用來顯示在瀏覽器右上角的圖標，如： 
創(chuàng)建 manifest.json 插件描述文件： { "name": "收益率計算", "version": "0.0.1", "manifest_version": 2, // 簡單描述 "description": "累加優(yōu)惠券后計算最終實際收益率", "icons": { "16": "images/icon16.png" }, // 瀏覽器小圖表部分 "browser_action": { "default_title": "收益率計算", "default_icon": "images/icon16.png", "default_popup": "html/calc.html" }, // 引入腳本，content script 是運行在一個被稱為isolated world 的運行環(huán)境里， // 和頁面上的腳本互不干擾，因為不在一個運行環(huán)境里，所以也無法調(diào)用頁面上腳本定義的方法了 "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" } ], // 應(yīng)用協(xié)議頁面 "permissions": [ "http://*/*", "https://*/*" ], "content_security_policy": "script-src 'self'; object-src 'self'"}
創(chuàng)建彈出框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/>優(yōu)惠券金額：<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>
創(chuàng)建引入的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;// 優(yōu)惠券金額(元) 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(); });});
創(chuàng)建 include.js 文件，該文件是用來注入到指定網(wǎng)站的js腳本，不同于 app.js，為了測試，我們其中只輸出一個日志：
按如下目錄結(jié)構(gòu)將文件放入一個文件夾中： 
3、Chrome調(diào)試和打包
打開：設(shè)置 > 更多工具 > 擴展程序  加載我們的程序后，瀏覽器右下角就出現(xiàn)我們的插件了，可以進行測試，如果修改了代碼，點擊“重新加載(Ctrl + R)” 后在重新測試。
當然，我們開發(fā)好程序后，還是需要打包成 .crx 插件包的，這個很簡單，使用“打包擴展程序” 進行打包即可：
 第一次打包，密鑰文件不需要選擇，Chrome 會幫我們生成這個密鑰，在以后更新打包時再使用。 4、安裝 .crx 程序 將打包后的 crx 程序，拖到 Chrome 中，即可完成安裝。 源代碼包鏈接：https://pan.baidu.com/s/1hrQ6v2G
|
