Edge浏览器扩展开发入门

最新推荐文章于 2024-02-16 20:12:28 发布

ycfxhsw

最新推荐文章于 2024-02-16 20:12:28 发布

阅读量4k

点赞数 3

分类专栏：前端文章标签： edge 前端 html javascript

本文链接：https://blog.csdn.net/qq_44102261/article/details/128864382

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、简介

Microsoft Edge 扩展是开发人员用来添加或修改 Microsoft Edge 功能以改进用户的浏览体验的小型应用，扩展提供对目标受众很重要的利基体验或功能。
在这里插入图片描述

二、开发入门

一个基本的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>