Chrome 插件开发，入门Demo

悠悠 2022-06-17 07:07 249阅读 0赞

1、Chrome扩展文件

Chrome扩展文件以.crx为后缀名，在[Google Chrome扩展官方网站][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实际上是一个压缩文件，使用解压文件打开这个文件就可以看到其中的文件目录，下图中是“[关灯看视频][Link 1]”扩展的截图：

![Center][]

因此可以认为，我们实际上就是写一个Web应用，然后将按照Chrome的规定将一个快捷方式放在Chrome工具栏上。

2、Chrome例子

准备一个icon图片，用来显示在浏览器右上角的图标，如：

![Center 1][]

创建 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 库。

创建 include.js 文件，该文件是用来注入到指定网站的js脚本，不同于 app.js，为了测试，我们其中只输出一个日志：

console.log('页面加载被载入');

按如下目录结构将文件放入一个文件夹中：

![Center 2][]

3、Chrome调试和打包

打开：设置 > 更多工具 > 扩展程序

![Center 3][]

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

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

![Center 4][]

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

4、安装 .crx 程序

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

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

[Google Chrome]: https://chrome.google.com/extensions?hl=zh-CN
[Link 1]: https://chrome.google.com/extensions/detail/bfbmjmiodbnnpllbbbfblcplfjjepjdn?hl=zh-CN
[Center]: /images/20220617/eb31c2df13e1427d859ba423709f1181.png
[Center 1]: /images/20220617/98f2030e809e4f178da5aae65a58022d.png
[Center 2]: /images/20220617/bb2266e21cb24f79bada8739a6b1840c.png
[Center 3]: /images/20220617/de4dfb9966624ab9b681ea4cad659a01.png
[Center 4]: /images/20220617/44ccedeb67a44a2c9e2e8b5e20bfa544.png