当前位置： 首页 > news >正文

创建 Edge 浏览器扩展教程（上）

news 2026/5/19 11:55:38

创建 Edge 浏览器扩展教程（上）

    • 介绍
    • 开始之前
    • 后续步骤
    • 开始之前
      • 1：创建清单 .json 文件
      • 2 ：添加图标
      • 3：打开默认弹出对话框

介绍

在如今日益数字化的时代，浏览器插件在提升用户体验、增加功能以及改善工作流程方面扮演着重要角色。本篇博文将为大家分享如何开发一个 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

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

{"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 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>

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

{"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 扩展。

相关文章：

创建 Edge 浏览器扩展教程（上）

创建 Edge 浏览器扩展教程&#xff08;上&#xff09; 介绍开始之前后续步骤开始之前1&#xff1a;创建清单 .json 文件2 &#xff1a;添加图标3&#xff1a;打开默认弹出对话框 介绍 在如今日益数字化的时代&#xff0c;浏览器插件在提升用户体验、增加功能以及改善工作流程方…...

编程日记 2023/10/25 13:25:16

container_of解析及应用

container_of是一个C语言中比较少见&#xff0c;但实际经常用到的宏&#xff0c;在Linux kernel中也有大范围的应用。...

编程日记 2023/10/25 13:24:15

搜维尔科技：Varjo-最自然和最直观的互动

创建真实生活虚拟设计 Varjo让你沉浸在最自然的混合和虚拟现实环境中。 世界各地的设计团队可以聚集在一个摄影现实的虚拟空间中,以真实的准确性展示新的概念-实时的讨论和迭代。这是一个充满无限创造潜力的新时代,加速了人类前所未有的想象力。 虚拟现实、自动反应和XR设计的…...

编程日记 2023/10/25 13:23:15

Postman环境配置

Postman环境配置 安装Postman安装node.js安装newman安装htmlextra安装git注册163邮箱用163邮箱注册gitee在pycharm中安装gitee详细文档 安装Postman 网址&#xff1a;https://www.postman.com/downloads/ 注册一个账号即可 安装node.js 安装newman npm install -g newman …...

编程日记 2023/10/25 13:22:14

Windows下Eclipse C/C++开发环境配置教程

1.下载安装Eclipse 官网下载eclipse-installer&#xff08;eclipse下载器&#xff09;&#xff0c;或者官方下载对应版本zip。 本文示例&#xff1a; Eclipse IDE for C/C Developers Eclipse Packages | The Eclipse Foundation - home to a global community, the Eclipse ID…...

编程日记 2023/10/25 13:21:13

深入 Maven：构建杰出的软件项目的完美工具

掌握 Meven&#xff1a;构建更强大、更智能的应用程序的秘诀 Maven1.1 初识Maven1.1.1 什么是Maven1.1.2 Maven的作用 02. Maven概述2.1 Maven介绍2.2 Maven模型2.3 Maven仓库2.4 Maven安装2.4.1 下载2.4.2 安装步骤 03. IDEA集成Maven3.1 配置Maven环境3.1.1 当前工程设置3.1.…...

编程日记 2023/10/25 13:20:12

一文了解企业云盘和大文件传输哪个更适合企业传输

文件传输是企业工作中必不可少的环节&#xff0c;无论是内部协作还是外部沟通&#xff0c;都需要高效、安全、稳定地传输各种类型和大小的文件。然而&#xff0c;市面上的文件传输工具众多&#xff0c;如何选择合适的工具呢&#xff1f;本文将从两种常见的文件传输工具——企业…...

编程日记 2023/10/25 13:19:09

在 history 模式下，为什么刷新页面会出现404?

1、原因 因为浏览器在刷新页面时&#xff0c;它会向服务器发送 GET 请求&#xff0c;但此时服务器并没有配置相应的资源来匹配这个请求&#xff0c;因此返回 404 错误。 2、解决方案 为了解决这个问题&#xff0c;我们需要在服务器端进行相关配置&#xff0c;让所有的路由都指…...

编程日记 2023/10/25 13:18:08

第二证券：“华为概念股”，怒刷13连板

大盘颤动时&#xff0c;“妖股”出生日。 到10月24日收盘&#xff0c;圣龙股份连续第13个生意日以涨停报收&#xff0c;区间涨幅抵达245.62%&#xff0c;总市值89亿元&#xff1b;公司13个生意日成交额抵达90亿元&#xff0c;总换手率达159%。 此外&#xff0c;圣龙股份还在暴…...

编程日记 2023/10/25 13:17:07

黑豹程序员-架构师学习路线图-百科：API接口测试工具Postman

文章目录 1、为什么要使用Postman&#xff1f;2、什么是Postman&#xff1f; 1、为什么要使用Postman&#xff1f; 目前我们开发项目大都是前后端分离项目&#xff0c;前端采用h5cssjsvue基于nodejs&#xff0c;后端采用java、SpringBoot、SSM&#xff0c;大型项目采用SpringC…...

编程日记 2023/10/25 13:16:06

开源博客项目Blog .NET Core源码学习（5：mapster使用浅析）

开源博客项目Blog使用mapster框架映射对象&#xff0c;主要是在数据库表对象及前端数据对象之间进行映射&#xff0c;本文学习并记录项目中mapster的使用方式。   App.Hosting项目的program文件中调用builder.Services.AddMapper函数进行对象模型自动映射&#xff0c;而该函数…...

编程日记 2023/10/25 13:15:04

Appium移动端自动测试框架，如何入门？

Appium是一个开源跨平台移动应用自动化测试框架。 既然只是想学习下Appium如何入门&#xff0c;那么我们就直奔主题。文章结构如下&#xff1a; 1、为什么要使用Appium&#xff1f; 2、如何搭建Appium工具环境?(超详细&#xff09; 3、通过demo演示Appium的使用 4、Appium如何…...

编程日记 2023/10/25 13:14:04

外汇天眼：喜大普奔！困扰投资者的交易问题解决了！

在外汇交易中&#xff0c;即使摒弃了“三无”的黑平台&#xff0c;使用的是正规安全的外汇交易平台&#xff0c;但是面对一些突发状况&#xff0c;依然会出现出金堵塞被拖延、入金不到账等交易突发情况&#xff0c;因为许多外汇平台处于国外&#xff0c;沟通困难、网络繁忙、平…...

编程日记 2023/10/25 13:13:03

UUID转16字节数组（Java）

最近在写协议的时候&#xff0c;遇到需要将一个36字符长度的UUID转为长度为16的字节数组&#xff1b; 这样处理的话那我们就需要保证唯一性和可还原&#xff1b; 于是我使用了下面的方式&#xff1a; /*** uuid转16字节数组** param uuidStr* return*/private static byte[] …...

编程日记 2023/10/25 13:12:02

使用vue3 搭建一个H5手机端访问的项目

首先说明&#xff0c;我本地之前运行过vue的项目&#xff0c;所以具有一些基础的运行环境&#xff0c;这里直接按步骤讲我项目框架搭建的过程。 这个不建议使用驼峰&#xff0c;按规范单词中间加横杠就可以。一般会出现选择项&#xff0c;按方向键选择&#xff0c;我这边选择了…...

编程日记 2023/10/25 13:10:59

【网络安全 --- 任意文件下载漏洞（1）】任意文件下载漏洞

一&#xff0c;环境&#xff0c;工具准备 1-1 VMVare 16 虚拟机及下载安装&#xff08;资源&#xff09; 请参考以下博客安装&#xff08;特详细&#xff09;&#xff1a;【网络安全 --- 工具安装】VMware 16.0 详细安装过程&#xff08;提供资源&#xff09;-CSDN博客【网络安…...

编程日记 2023/10/25 13:09:58

驱动开发day4（实现通过字符设备驱动的分布实现编写LED驱动，实现设备文件的绑定）

头文件&#xff08;head.h&#xff09; #ifndef __HEAD_H__ #define __HEAD_H__ #define PHY_LED1_MODER 0x50006000 #define PHY_LED2_MODER 0x50007000 #define PHY_LED3_MODER 0x50006000 #define PHY_LED1_ODR 0x50006014 #define PHY_LED2_ODR 0x50007014 #define PHY_LE…...

编程日记 2023/10/25 13:08:57

《深入浅出.NET框架设计与实现》阅读笔记（一）

.NET CLI概述 命令说明dotnet add将包或引用添加到.NET项目中dotnet build构建.NET项目&#xff0c;并编译为IL二进制文件dotnet clean清理.NET项目的构建输出dotnet help显示命令行帮助dotnet list罗列项目中的yinyongdotnet publish发布项目&#xff0c;用于部署dotnet sln修…...

编程日记 2023/10/25 13:07:56

Flutter 类似onResume 监听，解决入场动画卡顿(2)

接着完善上一篇内容&#xff0c;上一篇我们是能监听到初次进入路由页面节点&#xff0c;往往还想监听从当前路由跳转到其他路由后&#xff0c;再返回到当前路由页面&#xff0c;上一篇内容就无法满足当前需求了&#xff0c;不过我们完全可以按照上一篇的原理实现这个需求。 直…...

编程日记 2023/10/25 13:06:54

rabbitmq-3.8.15集群、集群镜像模式安装部署

目录 一、环境 1、映射、域名、三墙 2、Erlang和socat安装&#xff08;三台服务器都实行&#xff09; 二、部署三台rabbitmq-3.8.15实例 1、rabbitmq官网下载地址 &#xff1a; 2、解压rabbitmq 3、添加系统变量 4、启动web插件、启动rabbitmq 5、在rabbitmq1上添加用…...

编程日记 2023/10/25 13:05:53

Cadence SPB17.4导入外部封装后，原理图封装属性不更新？一个属性编辑框解决你的困扰

Cadence SPB17.4原理图封装属性更新难题&#xff1a;从数据库到设计的完整解决方案 当你花费数小时将力创封装库成功导入Cadence PCB Editor后&#xff0c;满心欢喜地打开原理图进行DRC检查&#xff0c;却发现那些熟悉的"PCB Footprint Not Found"错误依然存在——这…...

编程新知 2026/5/19 10:50:50

vscode-mssql架构设计器：无代码可视化建模数据库架构的终极工具

vscode-mssql架构设计器&#xff1a;无代码可视化建模数据库架构的终极工具 【免费下载链接】vscode-mssql Visual Studio Code SQL Server extension. 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-mssql vscode-mssql是Visual Studio Code的SQL Server扩展&am…...

编程新知 2026/5/19 10:02:57

herebedragons完整指南：20+种3D渲染API对比实战

herebedragons完整指南&#xff1a;20种3D渲染API对比实战 【免费下载链接】herebedragons A basic 3D scene implemented with various engines, frameworks or APIs. 项目地址: https://gitcode.com/gh_mirrors/he/herebedragons herebedragons是一个独特的开源项目&a…...

编程新知 2026/5/19 9:52:17

从订阅到命令面板：全面理解 SAP Business Application Studio 中的 SAP Fiori 开发入口

在很多 SAP Fiori 项目里，团队把精力都放在 SAPUI5、OData、Fiori elements、注解模型和部署流程上，却常常低估了开发环境本身对效率的影响。等到项目进入多人协作、跨系统联调、权限分配和模板生成阶段，大家才会发现，开发工具并不只是一个写代码的地方，它实际上决定了团队…...

编程新知 2026/5/19 9:33:51

量子优化技术在工业数据生产规划中的应用与实践

1. 量子优化技术在工业数据生产规划中的实践探索在汽车制造领域&#xff0c;生产规划一直是个复杂难题。以冲压车间为例&#xff0c;金属板材需要通过冲压机加工成车身部件&#xff0c;每台冲压机都有不同的工作能力和成本特性&#xff0c;而每个模具组又需要分配到合适的机器上…...

编程新知 2026/5/19 9:16:58

B站视频转文字：3分钟掌握高效内容整理新技能

B站视频转文字&#xff1a;3分钟掌握高效内容整理新技能 【免费下载链接】bili2text Bilibili视频转文字&#xff0c;一步到位&#xff0c;输入链接即可使用 项目地址: https://gitcode.com/gh_mirrors/bi/bili2text 还在为整理B站视频内容而烦恼吗&#xff1f;每天花费…...

编程新知 2026/5/19 6:53:57

2个实测免费的AI简历神器，简历回复率翻3倍，顺利过ATS机筛！

当前的求职市场&#xff0c;投简历简直像往海里扔石头。很多同学吐槽&#xff1a;明明自己挺优秀&#xff0c;投了100份简历却连一个面试邀请都没有。 其实&#xff0c;大厂HR第一轮根本不看简历&#xff0c;全是靠ATS&#xff08;简历筛选系统&#xff09;关键词过滤。如果你…...

编程新知 2026/5/19 6:14:17

CVE、CNNVD、CNVD傻傻分不清？一文搞懂主流漏洞库的区别与实战用法

CVE、CNNVD、CNVD&#xff1a;主流漏洞库核心差异与工程化应用指南 当安全工程师在凌晨三点被漏洞告警惊醒时&#xff0c;第一反应往往是查证漏洞详情。但面对CVE、CNNVD、CNVD这些缩写&#xff0c;连资深从业者都可能陷入选择困难。这三个字母组合背后&#xff0c;代表着全球漏…...

编程新知 2026/5/19 6:07:49

高速SerDes技术解析：从差分传输到时钟恢复的硬件设计实战

1. 从并行到串行&#xff1a;高速通信的基石SerDes在数字电路的世界里&#xff0c;数据最初大多以并行的形式存在&#xff0c;比如我们熟悉的32位或64位数据总线。但当我们需要把数据从一个芯片发送到另一个芯片&#xff0c;或者从一块电路板传到另一块&#xff0c;尤其是在高速…...

编程新知 2026/5/19 5:32:07

RocketMQ 源码解析——Controller 高可用切换架构

延伸阅读&#xff1a;&#x1f50d;「RocketMQ 中文社区」 持续更新源码解析/最佳实践&#xff0c;提供 RocketMQ 专家 AI 答疑服务 一、原理及核心概念浅述 1.1 核心架构 1.2 核心概念 controller&#xff1a;负责管理broker间的主备关系&#xff0c;可以挂在namesrv中&…...

编程新知 2026/5/19 5:30:06