edge 浏览器插件 demo --chatGpt

gpt:

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

步骤:

  1. 准备开发环境:
  • 安装最新版本的 Microsoft Edge 浏览器。

  • 安装 Visual Studio Code(或其他代码编辑器)以编写插件代码。

  1. 创建插件目录:

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

  1. 创建插件清单文件(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"]

}

]

}

```

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

  1. 创建弹出页面:

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

```html

<!DOCTYPE html>

<html>

<head>

<title>My Extension</title>

</head>

<body>

<h1>Welcome to My Extension!</h1>

</body>

</html>

相关推荐
IT_陈寒15 分钟前
Vite热更新坑了我三天,原来配置要这么写
前端·人工智能·后端
斯班奇的好朋友阿法法22 分钟前
离线ollama导入Qwen3.5-9B.Q8_0.gguf模型
开发语言·前端·javascript
掘金一周25 分钟前
每月固定续订,但是token根本不够用,掘友们有无算力焦虑啊 | 沸点周刊 4.2
前端·aigc·openai
小村儿26 分钟前
连载加餐01-claude code 源码泄漏 ---一起吃透 Claude Code,告别 AI coding 迷茫
前端·后端·ai编程
莫物1 小时前
vue过滤表格数据导致的索引错乱问题
前端·javascript·vue.js
竹林8181 小时前
从监听失败到实时更新:我在NFT铸造项目中搞定合约事件监听的全过程
前端·javascript
光影少年1 小时前
手写防抖和节流
前端·javascript·前端框架
笨笨狗吞噬者1 小时前
uni-app 编译小程序原生组件时疑似丢属性,可以给官方提 PR 了
前端·微信小程序·uni-app
英俊潇洒美少年2 小时前
vue3的编译优化
前端
DaHai2 小时前
在 Windows 上安装 uv(高性能 Python 包管理器)
前端