Chrome插件开发

最新推荐文章于 2024-09-03 16:40:55 发布

止步前行

最新推荐文章于 2024-09-03 16:40:55 发布

阅读量1.4k

点赞数 1

分类专栏： code 文章标签：插件开发

本文链接：https://blog.csdn.net/zxd1435513775/article/details/78190133

版权

code 专栏收录该内容

9 篇文章 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文件。
这里写图片描述
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浏览器中
这里写图片描述