Chrome插件开发

编写chrome插件之前，需要熟悉一下相应的chrome插件开发环境。 在chrome中编写插件和写网页应用基本一致，采用的是javascript+css+html的方式，所以对于用过chrome浏览器审阅过一些网页的源码，写过网页或者脚本的人而言，编写chrome的插件感觉到还是比较熟悉的。

一、chrome插件和用户的几种交互方式

（1）、browser action：即在浏览器的右上角有一个新增的显示插件图标的按钮，用户点击该按钮即可以触发插件的应用逻辑； （2）、backgroud javascript：这种情况下插件没有对应的图标和按钮，在chrome启动时，插件运行在自己的单独的背景线程中。与用户的交互方式通常是在某些相关网页加载完之后，通过javascript对该网页进行修改，将插件逻辑嵌入到页面html代码中。 （3）、page action：这种插件形式在需要时在浏览器地址栏中弹出一个图标。

二、通过browser action实现插件 2.1 程序的文件清单 先来看看插件的文件清单，如下图所示。其中youkuvip.png用于图标的显示，manifest.json是chrome插件的基本配置文件，popup.html用于下拉菜单的构建，youkuvip.js是和popup.html对应的js文件和html文件。 2.2 manifest.json文件

{
    "manifest_version":2,
    "name":"one-click",
    "description":"chrome extension",
    "version":"1.0",
    "permissions":[
        "https://*/*",
        "http://*/*"
        ],
    "browser_action":{
        "default_icon":"youkuvip.png",
        "default_popup":"popup.html"
        }
}

manifest.json是chrome插件的配置文件，其基本内容如上所示。”manifest_version”字段默认设置为2。permissions字段设置了插件的基本权限，即具有访问所有http链接的权限。browser_action字段中default_icon和default_popup分别和之前的youkuvip.png，popup.html文件相对应。

2.3 popup.html

    
    
        
        
        
        
    

    
    

        

        优酷VIP助手
        
版本：v1.0.1
        
作者：zxd
        
@copyright 2017，不可用于商业用途
    
    

2.4 popup.js 击该按钮即可以触发插件的应用逻辑。业务逻辑代码。 2.5 将插件安装到chrome浏览器中

点击浏览器边上的小按钮，就会执行youkuvip.js文件里的js代码，就会执行业务逻辑啦。 简单写到这……