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

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

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

1. 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里

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