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

摘要: 手把手教你如何开发chrome插件

手把手教你如何开发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文件

<div id="newItem" class="gray">This is my fist chrome plugins</div>

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



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



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



点击确定，它会在根文件夹同一级生成MyFirstChromePlugin.pem和MyFirstChrome.crx, MyFirstChrome.pem是程序签名文件，不能删除它, 将MyFirstChrome.crx 拖进chrome窗体内,就会把这个应用安装在chrome里

接下来就可以看到简单的效果了，本篇文章只介绍了基础知识, 下一篇我将会完善代码