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

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

news 2025/6/16 19:55:05

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

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/6/16 11:27:31

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/6/16 11:27:40

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/6/15 14:09:23

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/6/15 8:56:36

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/6/16 17:22:35

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2025/6/15 20:29:31

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/6/15 23:18:35

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/6/15 9:44:07

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/6/15 11:49:56

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/6/16 18:45:19