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

<!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代码,就会执行业务逻辑啦。
简单写到这……

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

止步前行

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值