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

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

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

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