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图片，用来显示在浏览器右上角的图标，如：

Chrome 插件开发，入门Demo

创建 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('页面加载被载入');

按如下目录结构将文件放入一个文件夹中： Chrome 插件开发，入门Demo

3、Chrome调试和打包
打开：设置 > 更多工具 > 扩展程序 Chrome 插件开发，入门Demo

加载我们的程序后，浏览器右下角就出现我们的插件了，可以进行测试，如果修改了代码，点击“重新加载(Ctrl + R)” 后在重新测试。

当然，我们开发好程序后，还是需要打包成 .crx 插件包的，这个很简单，使用“打包扩展程序” 进行打包即可：
Chrome 插件开发，入门Demo

第一次打包，密钥文件不需要选择，Chrome 会帮我们生成这个密钥，在以后更新打包时再使用。

4、安装 .crx 程序将打包后的 crx 程序，拖到 Chrome 中，即可完成安装。

源代码包链接：https://pan.baidu.com/s/1hrQ6v2G

秒客网

Chrome 插件开发，入门Demo

相关文章