手把手教你如何开发chrome插件手把手教你如何开发chrome插件

2019独角兽企业重金招聘Python工程师标准>>>
文章图片

手把手教你如何开发chrome插件不管是做web开发还是做测试, 对于chrome我想大家都非常的熟悉不过了, 说到chrome的插件很多都觉得很神奇，今天我将带领大家一起来探讨如何开发chrome插件, 让你的应用也可以跑在chrome上面

在开发之前我们先来了解一下一些基础知识

chrome扩展文件
chrome扩展文件都是以.crx为后缀名, 在google chrome扩展官网上下载扩展时，chrome会将.crx文件下载到chrome的application data文件下我本地的是C:\Users\AppData\Local\Google\Chrome\Application, 安装完成或者取消安装, 该文件都会被删除，.crx实际上是一个压缩文件, 我们来看一下gmail.crx里面的内容:

文章图片

实际上就是一个web应用，只不过是安装chrome的规定方式开发而已
2. Browser Actions(扩展图标)，如下图所示的为扩展图标:

文章图片

动手写一个插件
1.新建一个文件夹名字叫MyFirstChromePlugins,在文件夹下新建manifest.json内容为:

{ "name": "MyFirstChromePlugins", "version": "0.9.0", "manifest_version": 2, "description": "Management my everyday's task lists.", "browser_action": { "default_icon": "icon.png" , "default_title": "My MyFirstChromePlugins", "default_popup": "popup.html" } }

这里name代表应用程序名,version代表版本号,description代表功能描述，browser_action代表扩展图标显示,它会定义图标地址,标题和默认的popup页面
2. 我们这里的popup.html文件

This is my fist chrome plugins

3. 将icon.png放到MyFirstChromePlugins文件夹中, MyFirstChromePlugins文件夹下内容如下:

文章图片

首先打开chrome-工具-扩展程序,展开开发人员模式, 打到“打包扩展程序”按钮

文章图片

点击打包扩展程序,执行MyFirstChromePlugins文件夹的路径

文章图片

点击确定，它会在根文件夹同一级生成MyFirstChromePlugin.pem和MyFirstChrome.crx, MyFirstChrome.pem是程序签名文件，不能删除它, 将MyFirstChrome.crx 拖进chrome窗体内,就会把这个应用安装在chrome里
接下来就可以看到简单的效果了，本篇文章只介绍了基础知识, 下一篇我将会完善代码