浏览器扩展程序开发一、hello word

最新推荐文章于 2024-03-20 16:20:23 发布

chensunxu

最新推荐文章于 2024-03-20 16:20:23 发布

阅读量312

点赞数

分类专栏：工具文章标签：扩展显示标识数据 chrome 360

本文链接：https://blog.csdn.net/chensunxu/article/details/105767368

版权

工具专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文档地址：http://open.se.360.cn/open/extension_dev/getstarted.html

编写chrome插件之前，需要熟悉一下相应的chrome插件开发环境。从编写hello world开始，参考阅读官方的教程，是一个不错的选择。这里主要是基于chrome的官方教程，做了进一步讲解。

1.程序文件清单

先来看看hello world插件的文件清单，如下图所示。其中icon.png用于图标的显示,manifest.json是chrome 插件的基本配置文件，popup.html用于下拉菜单的构建。

2.icon.png 把这个图标放到目录中：

3.manifest.json文件

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

{
  "manifest_version": 2,

  "name": "Hello Word",
  "description": "这是我的一个扩展应用",
  "version": "1.0",

  "permissions": ["https://*/*", "http://*/*"],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

4 popup.html

在扩展目录中，创建一个名为popup.html的文本文件，增加如下代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 150px;
      }
      img {
        float: left;
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="./icon.png" alt="" />
      <img src="./icon.png" alt="" />
      <img src="./icon.png" alt="" />
      <img src="./icon.png" alt="" />
      <img src="./icon.png" alt="" />
      <img src="./icon.png" alt="" />
      <img src="./icon.png" alt="" />
      <img src="./icon.png" alt="" />
      <img src="./icon.png" alt="" />
    </div>
  </body>
</html>