创建 Edge 浏览器扩展教程(上)

创建 Edge 浏览器扩展教程(上)

介绍

在如今日益数字化的时代,浏览器插件在提升用户体验、增加功能以及改善工作流程方面扮演着重要角色。本篇博文将为大家分享如何开发一个 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

接下来,将图标添加到清单文件中,更新文件如下所示:

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.",
    "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 复制代码
<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>

最后,在清单文件中注册弹出窗口,更新文件如下所示:

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.",
    "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 扩展。

相关推荐
阿啄debugIT2 天前
装饰(Decorator)模式可以在不修改对象外观和功能的情况下添加或者删除对象功能
软件工程·1024程序员节
墨抒颖 msy.plus2 天前
[特殊字符] 从零到一:打造你的VSCode圈复杂度分析插件
ide·vscode·编辑器·插件·cursor
l1t5 天前
DuckDB新版rusty_sheet 插件测试
xml·数据库·rust·插件·xlsx·duckdb
荔枝吻6 天前
【保姆级喂饭教程】把chrome谷歌浏览器中的插件导出为CRX安装包
chrome·插件
IT小农工8 天前
windows系统edge浏览器退出账户后还能免密登录
前端·edge
小妖6668 天前
如何去除edge浏览器的灰色边框
前端·edge
紫金龙腾17 天前
EDGE 、chrome、浏览器显示“由你的组织管理”
前端·chrome·edge
HaushoLin18 天前
Chrome和Edge如何开启暗黑模式
chrome·edge
l1t20 天前
利用DeepSeek辅助WPS电子表格ET格式分析
人工智能·python·wps·插件·duckdb
77238923 天前
解决 Microsoft Edge 显示“由你的组织管理”问题
前端·microsoft·edge