Chrome插件开发，⼊门Demo
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 插件描述⽂件：
1. {
2. "name": "收益率计算",jquery下载文件插件
3. "version": "0.0.1",
4. "manifest_version": 2,
5. // 简单描述
6. "description": "累加优惠券后计算最终实际收益率",
7.
8. "icons": {sumproduct怎么用详细步骤
9. "16": "images/icon16.png"
10. },
11.
12. // 浏览器⼩图表部分
13. "browser_action": {
14. "default_title": "收益率计算",
15. "default_icon": "images/icon16.png",
16. "default_popup": "html/calc.html"
17. },
18.
19. // 引⼊脚本，content script 是运⾏在⼀个被称为isolated world 的运⾏环境⾥，
20. // 和页⾯上的脚本互不⼲扰，因为不在⼀个运⾏环境⾥，所以也⽆法调⽤页⾯上脚本定义的⽅法
了
21. "content_scripts": [
22. {
23. "js": ["scripts/include.js"],
24. // 满⾜什么条件下使⽤该脚本
25. "matches": [
26. //"*/*",
year计算工龄
27. //"*/*"
28. "*.baidu/*",
29. "*.baidu/*"
30. ],
internally是什么意思
31. // 什么情况下运⾏【指定⽂档何时加载脚本 document_start\document_end\document_idel】
32. "run_at": "document_end"
33. }
34. ],
35. // 应⽤协议页⾯
36. "permissions": [
37. "*/*",
38. "*/*"
39. ],
40. "content_security_policy": "script-src 'self'; object-src 'self'"
41. }
创建弹出框HTML页⾯ calc.html：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>收益率计算器</title>
6.
7. </head>
8. <body>
9. 本⾦：<input id="benjin" value="30000"/><br/>
10. 收益率：<input id="lilv1" value="0.08"/><br/>
11. 投资期限(天)：<input id="days" value="90"/><br/>
12. 优惠券⾦额：<input id="coupon" value="450"/><br/>
13. 最终收益率：<input id="lilv2" readonly="true" /><br/>
14. <input id="calcBtn" type="button" value="计算" /><br/>
15. <script src="../scripts/jquery-1.12.3.min.js"></script>
16. <script src="../scripts/app.js"></script>
17. </body>
18. </html>
创建引⼊的app.js⽂件：
其中 jquery-1.12.3.min.js 为 jquery 库。
1. function calc(){
2. var money = $('#benjin').val()-0;// 本⾦
3. var days = $('#days').val()-0;// 投资期限
4. var lilv = $('#lilv1').val()-0;// 收益率
5. var coupon = $('#coupon').val()-0;// 优惠券⾦额(元)
6. var lilv2 = (money * lilv / 365 * days + coupon) / days * 365 / money;
7. lilv2 = (lilv2 * 100).toFixed(2);
8. $('#lilv2').val(lilv2 + "%");
9. }
10.
11. $(document).ready(function(){
mediumtext类型
12. $("#calcBtn").click(function(){
13. calc();
14. });
dirname和basename15. });
创建 include.js ⽂件，该⽂件是⽤来注⼊到指定⽹站的js脚本，不同于 app.js，为了测试，我们其中只输出⼀个⽇志：
1. console.log('页⾯加载被载⼊');
按如下⽬录结构将⽂件放⼊⼀个⽂件夹中：
3、Chrome调试和打包
打开：设置 > 更多⼯具 > 扩展程序
加载我们的程序后，浏览器右下⾓就出现我们的插件了，可以进⾏测试，如果修改了代码，点击“重新加载(Ctrl + R)” 后在重新测试。
当然，我们开发好程序后，还是需要打包成 .crx 插件包的，这个很简单，使⽤“打包扩展程序” 进⾏打包即可：
第⼀次打包，密钥⽂件不需要选择，Chrome 会帮我们⽣成这个密钥，在以后更新打包时再使⽤。4、安装 .crx 程序
将打包后的 crx 程序，拖到 Chrome 中，即可完成安装。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。