Chrome插件开发

叁歲伎倆 2022-06-07 04:05 440阅读 0赞

编写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文件。  
![这里写图片描述][SouthEast]  
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

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="jquery-3.2.1.js"></script>
            <script src="youkuvip.js"></script>
        </head>
    
        <body>
        <div style="width:200px;text-align:center" id="about-box" >
            <p><img src="youkuvip.png"style="width:48px;height:48px"/></p>
            <h2>优酷VIP助手</h2>
            <p>版本：v1.0.1</p>
            <p>作者：zxd</p>
            <p>@copyright 2017，不可用于商业用途</p>
        </div>
        </body>
    </html>

2.4 popup.js  
击该按钮即可以触发插件的应用逻辑。业务逻辑代码。  
2.5 将插件安装到chrome浏览器中  
![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]

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

[SouthEast]: /images/20220607/de928b5b2afb4243a93f48ccbbe362cb.png
[SouthEast 1]: /images/20220607/83c8a52c0ff348f296d809d0b725449d.png
[SouthEast 2]: /images/20220607/4e6b257f58d043129f0b04a5ee4b4817.png