国外的电商网站,网站建设对接模版,wordpress获取登录权限,济南市工程造价信息网创建 Edge 浏览器扩展教程#xff08;上#xff09; 介绍开始之前后续步骤开始之前1#xff1a;创建清单 .json 文件2 #xff1a;添加图标3#xff1a;打开默认弹出对话框 介绍
在如今日益数字化的时代#xff0c;浏览器插件在提升用户体验、增加功能以及改善工作流程方… 创建 Edge 浏览器扩展教程上 介绍开始之前后续步骤开始之前1创建清单 .json 文件2 添加图标3打开默认弹出对话框 介绍
在如今日益数字化的时代浏览器插件在提升用户体验、增加功能以及改善工作流程方面扮演着重要角色。本篇博文将为大家分享如何开发一个 Edge 浏览器插件并提供一个真实可用的示例项目供参考。我们将使用 Markdown 语法进行编写并通过代码段展示实际可用的代码。
开始之前
官方教程地址 https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension?tabsv3创建清单 .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 langenheadmeta charsetUTF-8 /titleNASA picture of the day/title/headbodydivimg src/images/stars.jpeg altDisplay 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 扩展。
