创建 Edge 浏览器扩展教程(上)

创建 Edge 浏览器扩展教程(上)

介绍

在如今日益数字化的时代,浏览器插件在提升用户体验、增加功能以及改善工作流程方面扮演着重要角色。本篇博文将为大家分享如何开发一个 Edge 浏览器插件,并提供一个真实可用的示例项目供参考。我们将使用 Markdown 语法进行编写,并通过代码段展示实际可用的代码。

开始之前

  1. 官方教程地址: https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension?tabs=v3
  2. 创建清单 .json 文件
  3. 添加图标
  4. 打开默认弹出对话框

后续步骤

本教程的目标是从空目录开始构建 Microsoft Edge 扩展。您正在构建一个扩展,弹出当天的 NASA 图片。在本教程中,你将了解如何通过以下方式创建扩展:

  1. 创建文件: manifest.json
  2. 添加图标
  3. 打开默认弹出对话框

开始之前

若要测试在本教程中生成的已完成扩展,请从 MicrosoftEdge-Extensions 存储库下载源代码>扩展获取-开始-part1。源代码已从清单 V2 更新到清单 V3。

1:创建清单 .json 文件

每个扩展包的根目录都必须有一个文件。清单提供扩展、扩展包版本、扩展名称和说明等的详细信息:manifest.json

以下代码概述了文件中所需的基本信息:

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "An extension to display the NASA picture of the day."
}

2 :添加图标

首先在项目中创建目录以存储图标图像文件。这些图标用于用户选择用于启动扩展的按钮的背景图像。

项目的目录结构如下:

- part1
  - manifest.json
  - icons
    - nasapod16x16.png
    - nasapod32x32.png
    - nasapod48x48.png
    - nasapod128x128.png

接下来,将图标添加到清单文件中,更新文件如下所示:

json 复制代码
{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "An extension to display the NASA picture of the day.",
    "icons": {
        "16": "icons/nasapod16x16.png",
        "32": "icons/nasapod32x32.png",
        "48": "icons/nasapod48x48.png",
        "128": "icons/nasapod128x128.png"
    }
}

3:打开默认弹出对话框

现在,创建一个用于在用户启动扩展时运行的HTML文件。该文件将作为模态对话框显示,以显示星星图片。确保将图片文件添加到images文件夹中。项目的目录结构如下:

- part1
  - manifest.json
  - icons
    - nasapod16x16.png
    - nasapod32x32.png
    - nasapod48x48.png
    - nasapod128x128.png
  - images
    - stars.jpeg
  - popup
    - popup.html

在popup.html文件中,添加以下代码以显示星星图片:

html 复制代码
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>NASA picture of the day</title>
    </head>
    <body>
        <div>
            <img src="/images/stars.jpeg" alt="Display the stars image" />
        </div>
    </body>
</html>

最后,在清单文件中注册弹出窗口,更新文件如下所示:

json 复制代码
{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "An extension to display the NASA picture of the day.",
    "icons": {
        "16": "icons/nasapod16x16.png",
        "32": "icons/nasapod32x32.png",
        "48": "icons/nasapod48x48.png",
        "128": "icons/nasapod128x128.png"
    },
    "action": {
        "default_popup": "popup/popup.html"
    }
}

以上是第一部分的扩展教程,其中包括开始之前的准备工作、创建清单 .json 文件、添加图标和打开默认弹出对话框。请按照以上步骤逐步进行,来创建您的 Microsoft Edge 扩展。

相关推荐
一个通信老学姐5 小时前
专业130+总400+武汉理工大学855信号与系统考研经验电子信息与通信工程,真题,大纲,参考书。
考研·信息与通信·信号处理·1024程序员节
力姆泰克5 小时前
看电动缸是如何提高农机的自动化水平
大数据·运维·服务器·数据库·人工智能·自动化·1024程序员节
力姆泰克5 小时前
力姆泰克电动缸助力农业机械装备,提高农机的自动化水平
大数据·服务器·数据库·人工智能·1024程序员节
程思扬6 小时前
为什么Uptime+Kuma本地部署与远程使用是网站监控新选择?
linux·服务器·网络·经验分享·后端·网络协议·1024程序员节
转世成为计算机大神6 小时前
网关 Spring Cloud Gateway
java·网络·spring boot·1024程序员节
paopaokaka_luck6 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
S. Dylan6 小时前
Edge浏览器打开PDF无法显示电子签章
edge·pdf
幼儿园园霸柒柒7 小时前
第七章: 7.3求一个3*3的整型矩阵对角线元素之和
c语言·c++·算法·矩阵·c#·1024程序员节
好想有猫猫7 小时前
【51单片机】串口通信原理 + 使用
c语言·单片机·嵌入式硬件·51单片机·1024程序员节
2403_875736878 小时前
道品科技的水肥一体化智能灌溉:开启现代农业的创新征程
大数据·人工智能·1024程序员节