Chrome插件开发

来源：互联网发布：陕西软件测试培训编辑：程序博客网时间：2024/06/06 16:49

编写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

<!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浏览器中
这里写图片描述

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

阅读全文

0 0