edge 浏览器插件 demo --chatGpt

宇文仲竹

已于 2023-10-09 16:54:20 修改

阅读量688

点赞数

分类专栏： edge插件文章标签： edge 前端插件

于 2023-10-09 16:40:06 首次发布

本文链接：https://blog.csdn.net/glc22/article/details/133707571

版权

edge插件专栏收录该内容

12 篇文章 0 订阅

订阅专栏

gpt:

要开发 Edge 浏览器插件，你可以使用基于 Web 技术的扩展框架。Edge 使用的扩展框架与 Chrome 的扩展框架非常类似，因为它们都基于 Chromium 内核。下面是一个简单的 Edge 浏览器插件示例，演示如何创建一个基本的插件，该插件在打开新标签页时显示一条欢迎消息。

步骤：

1. 准备开发环境：

- 安装最新版本的 Microsoft Edge 浏览器。
- 安装 Visual Studio Code（或其他代码编辑器）以编写插件代码。

2. 创建插件目录：

在你的工作目录中，创建一个新的文件夹，作为插件的根目录。例如，你可以创建一个名为 "my-edge-extension" 的文件夹。

3. 创建插件清单文件（manifest.json）：

在插件根目录下，创建一个名为 `manifest.json` 的文件，用于描述插件的配置信息。以下是一个示例 `manifest.json` 文件的内容：

```json
{
"manifest_version": 3,
"name": "My Edge Extension",
"version": "1.0",
"description": "A simple Edge extension",
"permissions": ["activeTab"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}
```

这个清单文件指定了插件的名称、版本、描述、权限和其他相关信息。它还定义了插件的图标、弹出页面和后台脚本。

4. 创建弹出页面：

在插件根目录下，创建一个名为 `popup.html` 的 HTML 文件，用于在用户单击插件图标时显示的弹出页面。例如：

```html
<!DOCTYPE html>
<html>
<head>
<title>My Extension</title>
</head>
<body>
<h1>Welcome to My Extension!</h1>
</body>
</html>

宇文仲竹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
edge 浏览器插件 demo --chatGpt

下面是一个简单的 Edge 浏览器插件示例，演示如何创建一个基本的插件，该插件在打开新标签页时显示一条欢迎消息。在插件根目录下，创建一个名为 `manifest.json` 的文件，用于描述插件的配置信息。在你的工作目录中，创建一个新的文件夹，作为插件的根目录。例如，你可以创建一个名为 "my-edge-extension" 的文件夹。在插件根目录下，创建一个名为 `popup.html` 的 HTML 文件，用于在用户单击插件图标时显示的弹出页面。它还定义了插件的图标、弹出页面和后台脚本。
复制链接

扫一扫