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

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

news 2026/2/9 19:03:47

创建 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

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2026/2/8 4:37:10

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2026/2/8 20:41:56

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2026/2/7 17:33:19

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2026/2/8 4:08:40

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2026/1/30 4:16:26

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2026/1/31 6:12:22

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2026/1/31 7:39:20

TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

编程新知 2026/1/26 5:57:43