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

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

news 2026/2/9 22:25:53

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

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

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

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/10/17 21:16:57

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2026/1/31 5:09:19

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2026/2/1 5:24:17

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2026/1/23 2:04:44

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/12/19 22:56:05

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32