创建 Edge 浏览器扩展教程(上)
创建 Edge 浏览器扩展教程(上)
- 介绍
- 开始之前
- 后续步骤
- 开始之前
- 1:创建清单 .json 文件
- 2 :添加图标
- 3:打开默认弹出对话框
介绍
在如今日益数字化的时代,浏览器插件在提升用户体验、增加功能以及改善工作流程方面扮演着重要角色。本篇博文将为大家分享如何开发一个 Edge 浏览器插件,并提供一个真实可用的示例项目供参考。我们将使用 Markdown 语法进行编写,并通过代码段展示实际可用的代码。

开始之前
- 官方教程地址: https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension?tabs=v3
- 创建清单 .json 文件
- 添加图标
- 打开默认弹出对话框
后续步骤
本教程的目标是从空目录开始构建 Microsoft Edge 扩展。您正在构建一个扩展,弹出当天的 NASA 图片。在本教程中,你将了解如何通过以下方式创建扩展:
- 创建文件: manifest.json
- 添加图标
- 打开默认弹出对话框
开始之前
若要测试在本教程中生成的已完成扩展,请从 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 浏览器扩展教程(上) 介绍开始之前后续步骤开始之前1:创建清单 .json 文件2 :添加图标3:打开默认弹出对话框 介绍 在如今日益数字化的时代,浏览器插件在提升用户体验、增加功能以及改善工作流程方…...
container_of解析及应用
container_of是一个C语言中比较少见,但实际经常用到的宏,在Linux kernel中也有大范围的应用。...
搜维尔科技:Varjo-最自然和最直观的互动
创建真实生活虚拟设计 Varjo让你沉浸在最自然的混合和虚拟现实环境中。 世界各地的设计团队可以聚集在一个摄影现实的虚拟空间中,以真实的准确性展示新的概念-实时的讨论和迭代。这是一个充满无限创造潜力的新时代,加速了人类前所未有的想象力。 虚拟现实、自动反应和XR设计的…...
Postman环境配置
Postman环境配置 安装Postman安装node.js安装newman安装htmlextra安装git注册163邮箱用163邮箱注册gitee在pycharm中安装gitee详细文档 安装Postman 网址:https://www.postman.com/downloads/ 注册一个账号即可 安装node.js 安装newman npm install -g newman …...
Windows下Eclipse C/C++开发环境配置教程
1.下载安装Eclipse 官网下载eclipse-installer(eclipse下载器),或者官方下载对应版本zip。 本文示例: Eclipse IDE for C/C Developers Eclipse Packages | The Eclipse Foundation - home to a global community, the Eclipse ID…...
深入 Maven:构建杰出的软件项目的完美工具
掌握 Meven:构建更强大、更智能的应用程序的秘诀 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.…...
一文了解企业云盘和大文件传输哪个更适合企业传输
文件传输是企业工作中必不可少的环节,无论是内部协作还是外部沟通,都需要高效、安全、稳定地传输各种类型和大小的文件。然而,市面上的文件传输工具众多,如何选择合适的工具呢?本文将从两种常见的文件传输工具——企业…...
在 history 模式下,为什么刷新页面会出现404?
1、原因 因为浏览器在刷新页面时,它会向服务器发送 GET 请求,但此时服务器并没有配置相应的资源来匹配这个请求,因此返回 404 错误。 2、解决方案 为了解决这个问题,我们需要在服务器端进行相关配置,让所有的路由都指…...
第二证券:“华为概念股”,怒刷13连板
大盘颤动时,“妖股”出生日。 到10月24日收盘,圣龙股份连续第13个生意日以涨停报收,区间涨幅抵达245.62%,总市值89亿元;公司13个生意日成交额抵达90亿元,总换手率达159%。 此外,圣龙股份还在暴…...
黑豹程序员-架构师学习路线图-百科:API接口测试工具Postman
文章目录 1、为什么要使用Postman?2、什么是Postman? 1、为什么要使用Postman? 目前我们开发项目大都是前后端分离项目,前端采用h5cssjsvue基于nodejs,后端采用java、SpringBoot、SSM,大型项目采用SpringC…...
开源博客项目Blog .NET Core源码学习(5:mapster使用浅析)
开源博客项目Blog使用mapster框架映射对象,主要是在数据库表对象及前端数据对象之间进行映射,本文学习并记录项目中mapster的使用方式。 App.Hosting项目的program文件中调用builder.Services.AddMapper函数进行对象模型自动映射,而该函数…...
Appium移动端自动测试框架,如何入门?
Appium是一个开源跨平台移动应用自动化测试框架。 既然只是想学习下Appium如何入门,那么我们就直奔主题。文章结构如下: 1、为什么要使用Appium? 2、如何搭建Appium工具环境?(超详细) 3、通过demo演示Appium的使用 4、Appium如何…...
外汇天眼:喜大普奔!困扰投资者的交易问题解决了!
在外汇交易中,即使摒弃了“三无”的黑平台,使用的是正规安全的外汇交易平台,但是面对一些突发状况,依然会出现出金堵塞被拖延、入金不到账等交易突发情况,因为许多外汇平台处于国外,沟通困难、网络繁忙、平…...
UUID转16字节数组(Java)
最近在写协议的时候,遇到需要将一个36字符长度的UUID转为长度为16的字节数组; 这样处理的话那我们就需要保证唯一性和可还原; 于是我使用了下面的方式: /*** uuid转16字节数组** param uuidStr* return*/private static byte[] …...
使用vue3 搭建一个H5手机端访问的项目
首先说明,我本地之前运行过vue的项目,所以具有一些基础的运行环境,这里直接按步骤讲我项目框架搭建的过程。 这个不建议使用驼峰,按规范单词中间加横杠就可以。一般会出现选择项,按方向键选择,我这边选择了…...
【网络安全 --- 任意文件下载漏洞(1)】任意文件下载漏洞
一,环境,工具准备 1-1 VMVare 16 虚拟机及下载安装(资源) 请参考以下博客安装(特详细):【网络安全 --- 工具安装】VMware 16.0 详细安装过程(提供资源)-CSDN博客【网络安…...
驱动开发day4(实现通过字符设备驱动的分布实现编写LED驱动,实现设备文件的绑定)
头文件(head.h) #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…...
《深入浅出.NET框架设计与实现》阅读笔记(一)
.NET CLI概述 命令说明dotnet add将包或引用添加到.NET项目中dotnet build构建.NET项目,并编译为IL二进制文件dotnet clean清理.NET项目的构建输出dotnet help显示命令行帮助dotnet list罗列项目中的yinyongdotnet publish发布项目,用于部署dotnet sln修…...
Flutter 类似onResume 监听,解决入场动画卡顿(2)
接着完善上一篇内容,上一篇我们是能监听到初次进入路由页面节点,往往还想监听从当前路由跳转到其他路由后,再返回到当前路由页面,上一篇内容就无法满足当前需求了,不过我们完全可以按照上一篇的原理实现这个需求。 直…...
rabbitmq-3.8.15集群、集群镜像模式安装部署
目录 一、环境 1、映射、域名、三墙 2、Erlang和socat安装(三台服务器都实行) 二、部署三台rabbitmq-3.8.15实例 1、rabbitmq官网下载地址 : 2、解压rabbitmq 3、添加系统变量 4、启动web插件、启动rabbitmq 5、在rabbitmq1上添加用…...
(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...
AI病理诊断七剑下天山,医疗未来触手可及
一、病理诊断困局:刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断",医生需通过显微镜观察组织切片,在细胞迷宫中捕捉癌变信号。某省病理质控报告显示,基层医院误诊率达12%-15%,专家会诊…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
C++:多态机制详解
目录 一. 多态的概念 1.静态多态(编译时多态) 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1).协变 2).析构函数的重写 5.override 和 final关键字 1&#…...
[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.
ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #:…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机,点进去 点进去 查看URL,有 ?fileflag.php说明存在文件包含,原理是php://filter 协议 当它与包含函数结合时,php://filter流会被当作php文件执行。 用php://filter加编码,能让PHP把文件内容…...
