Edge浏览器扩展开发入门

857 阅读1分钟

一、简介

Microsoft Edge 扩展是开发人员用来添加或修改 Microsoft Edge 功能以改进用户的浏览体验的小型应用,扩展提供对目标受众很重要的利基体验或功能。

edge1.png

二、开发入门

一个基本的Edge扩展应该包含以下几个组成部分:

  • 包含基本平台信息的应用程序清单 JSON 文件(Manifest)。
  • 定义该函数的 JavaScript 文件。
  • 定义用户界面的 HTML 和 CSS 文件。

示例插件

1、新建 manifest.json 官方规定的应用程序清单文件

该清单文件是扩展的蓝图文件,它包括扩展的版本号、扩展的标题以及运行扩展所需的权限等信息。

{
    "manifest_version": 3,
    "name": "Edge浏览器插件开发入门",
    "version": "0.5",
    "description": "Edge浏览器插件开发入门。",
    "icons": {
        "16": "icons/colors16.png",
        "32": "icons/colors32.png",
        "48": "icons/colors48.png",
        "64": "icons/colors64.png",
        "128": "icons/colors128.png"
    },
    "action": {
        "default_popup": "html/colors.html"
    }
}

// manifest_version 清单文件版本为固定的3,老版本为2
// name 插件名称
// version 插件版本
// description 插件描述信息
// icons 浏览器会自动调整选择合适大小的图标
// action.default_popup 启动扩展时加载的文件

// 更多配置请查看微软官方文档

2、colors.html 动扩展时加载的文件

<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <title>Edge浏览器插件开发入门。</title>
    </head>

    <body>
        <img src="../icons/colors128.png" />
    </body>
</html>

3、Edge浏览器加载插件

edge2.png

edge3.png

edge4.png

edge5.png

edge6.png