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

快速上手：如何开发一个实用的 Edge 插件

news 来源：原创 2025/5/17 10:52:11

在日常浏览网页时，背景图片能够显著提升网页的视觉体验。如果你也想为自己的浏览器页面添加个性化背景图片，并希望背景图片设置能够持久保存，本文将介绍如何通过开发一个自定义Edge插件来实现这一功能。我们将涵盖保存背景设置到插件选项页（Options），并介绍插件的上传与发布流程。

准备

先用yuanbao.tencent.com 生成插件logo。
然后用https://tool.tushuoit.com/favgen 转成不同尺寸png。
在这里插入图片描述

一、Edge插件概述

Microsoft Edge插件（或扩展）是基于Chromium内核的浏览器扩展，可以为浏览器添加新的功能或修改现有功能。开发Edge插件的核心技术栈包括JavaScript、HTML和CSS。

在本示例中，我们将开发一个简单的插件，通过它为网页添加自定义背景图片，并将背景图片URL保存在插件的选项页中，以便下次访问时能够自动加载。

二、插件结构与基本功能

首先，我们来看一下插件的基本结构和实现功能：

manifest.json：插件的配置文件，定义插件的信息和权限。
background.js：后台脚本，处理插件的核心逻辑。
content.js：内容脚本，注入网页中修改背景。
popup.html：插件图标的弹出页面，用户可以在此输入背景图片URL。
options.html：插件的设置页面，用于保存背景图片URL。

1. 创建插件目录

首先创建插件的文件夹，并在其中存放插件的所有文件：

mkdir custom-background-extension
cd custom-background-extension

2. 配置`manifest.json`

在插件根目录下创建manifest.json文件，设置插件的基本信息和权限。

{"manifest_version": 3,"name": "自定义Web背景图片","version": "1.1","description": "为你的网页添加个性化背景图片，并保存设置","permissions": ["storage", "activeTab"],"background": {"service_worker": "background.js"},"content_scripts": [{"matches": ["<all_urls>"],"js": ["content.js"]}],"action": {"default_popup": "popup.html"},"options_page": "options.html"
}

permissions：需要使用storage权限来存储背景设置。
background：后台脚本负责初始化插件逻辑。
content_scripts：内容脚本注入页面来修改背景。
options_page：插件的选项页，用来保存背景设置。

3. 背景设置与保存

我们将使用浏览器的localStorage API来保存用户的背景设置，并在用户每次打开插件时加载保存的设置。

`background.js`

在background.js文件中，我们监听插件的安装事件，并初始化默认背景设置。

chrome.runtime.onInstalled.addListener(() => {console.log('自定义背景插件已安装！');// 初始化背景设置，默认背景URLchrome.storage.local.get(['backgroundUrl'], (result) => {if (!result.backgroundUrl) {chrome.storage.local.set({ backgroundUrl: 'https://example.com/default-background.jpg' });}});
});

`content.js`

content.js负责动态更新网页的背景图片，读取保存的背景URL并应用到当前页面。

chrome.storage.local.get(['backgroundUrl'], (result) => {if (result.backgroundUrl) {document.body.style.backgroundImage = `url(${result.backgroundUrl})`;document.body.style.backgroundSize = 'cover';document.body.style.backgroundPosition = 'center';}
});

4. 配置`popup.html`

popup.html提供一个用户界面，允许用户输入新的背景图片URL。用户可以点击按钮将新的URL保存到插件的存储中。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>自定义背景图片</title><style>body {width: 200px;padding: 10px;font-family: Arial, sans-serif;}input {width: 100%;padding: 5px;}button {width: 100%;padding: 5px;margin-top: 10px;background-color: #0078d4;color: white;border: none;cursor: pointer;}</style>
</head>
<body><h3>背景图片</h3><input type="text" id="bgUrl" placeholder="输入背景图片URL"><button id="changeBg">更换背景</button><script>document.getElementById('changeBg').addEventListener('click', () => {const url = document.getElementById('bgUrl').value;if (url) {chrome.storage.local.set({ backgroundUrl: url }, () => {alert('背景已更新！');});}});</script>
</body>
</html>

5. 配置`options.html`

options.html页面允许用户在插件的设置中管理背景设置。我们将提供一个简单的界面来显示和更改背景URL。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>插件设置</title>
</head>
<body><h3>背景图片设置</h3><label for="bgUrl">背景图片URL：</label><input type="text" id="bgUrlInput"><button id="saveBg">保存背景设置</button><script>// 加载当前保存的背景URLchrome.storage.local.get(['backgroundUrl'], (result) => {document.getElementById('bgUrlInput').value = result.backgroundUrl || '';});// 保存新的背景URLdocument.getElementById('saveBg').addEventListener('click', () => {const url = document.getElementById('bgUrlInput').value;if (url) {chrome.storage.local.set({ backgroundUrl: url }, () => {alert('背景设置已保存！');});}});</script>
</body>
</html>

6. 加载插件到Edge浏览器

打开Edge浏览器，进入edge://extensions/页面。
开启“开发者模式”。
点击“加载已解压的扩展”按钮，选择插件文件夹。
插件安装成功后，可以在浏览器工具栏中看到插件图标，点击它即可更改背景。

三、插件发布与上传流程

一旦开发完成并经过测试，你可能希望将插件发布到Microsoft Edge扩展商店供更多用户使用。以下是发布插件的基本流程：

1. 注册开发者账号

访问Microsoft Edge Add-ons商店，并注册一个开发者账号。

2. 打包插件

在插件文件夹中，运行以下命令来打包插件：

zip -r custom-background-extension.zip *

3. 提交插件

登录Microsoft Edge Add-ons开发者后台，点击“提交扩展”，选择打包好的.zip文件，并填写相关的插件信息。提交审核后，插件将被发布。

4. 插件更新

如果以后需要更新插件，可以在后台管理页面上传新版本的插件文件。每次更新需要重新提交审核。

四、总结

通过这篇文章，我们创建了一个自定义背景图片的Edge插件，并学习了如何将背景设置保存在插件的存储中，以便长期使用。我们还介绍了插件的发布流程，让你可以将插件分享给更多的用户。

后续扩展

背景上传功能：可以加入上传背景图片的功能，允许用户直接从本地选择图片作为背景。
其他定制选项：支持更多的背景特效，例如背景模糊、视频背景等。

快速上手：如何开发一个实用的 Edge 插件

在日常浏览网页时，背景图片能够显著提升网页的视觉体验。如果你也想为自己的浏览器页面添加个性化背景图片，并希望背景图片设置能够持久保存，本文将介绍如何通过开发一个自定义Edge插件来实现这一功能。我们将涵盖保存背景设置到插件选项页&a…...

编程日记 2025/5/17 10:52:11

java缓存技术点介绍

1. 缓存（Cache）： • 缓存是指用于存储数据的临时存储区域，以便快速访问。在Java中，缓存通常用于存储频繁访问的对象、结果集或其他数据。 2. 缓存命中率（Cache Hit Ratio）： • 缓存命…...

编程日记 2025/5/14 15:43:12

【单片机毕业设计12-基于stm32c8t6的智能称重系统设计】

【单片机毕业设计12-基于stm32c8t6的智能称重系统设计】前言一、功能介绍二、硬件部分三、软件部分总结前言 🔥这里是小殷学长，单片机毕业设计篇12-基于stm32c8t6的智能称重系统设计 🧿创作不易，拒绝白嫖可私一、功能介绍 ----…...

编程日记 2025/5/14 15:22:33

音视频流媒体直播/点播系统EasyDSS互联网视频云平台介绍

随着互联网技术的飞速发展，音视频流媒体直播已成为现代社会信息传递与娱乐消费的重要组成部分。在这样的背景下，EasyDSS互联网视频云平台应运而生，它以高效、稳定、便捷的特性，为音视频流媒体直播领域带来了全新的解决方案。 1、产…...

编程日记 2025/5/17 10:38:58

3dtile平移子模型以及修改 3D Tiles 模型的模型矩阵z平移

第一段代码：应用平移变换到子模型这段代码的目的是获取子模型的变换矩阵，并将其平移 10 个单位。 if (submodel) {// 获取当前子模型的变换矩阵let transform submodel.transform// 创建一个向上的平移矩阵，平移 10 个单位let translation…...

编程日记 2025/5/15 14:53:10

JavaScript中类数组对象及其与数组的关系

JavaScript中类数组对象及其与数组的关系 1. 什么是类数组对象？ 类数组对象是指那些具有 length 属性且可以通过非负整数索引访问元素的对象。虽然这些对象看起来像数组，但它们并不具备真正数组的所有特性，例如没有继承 Array.prototype 上…...

编程日记 2025/5/13 12:12:36

【机器学习】机器学习学习笔记 - 监督学习 - 逻辑回归分类朴素贝叶斯分类支持向量机 SVM (可分类、可回归) - 04

逻辑回归分类 import numpy as np from sklearn import linear_modelX np.array([[4, 7], [3.5, 8], [3.1, 6.2], [0.5, 1], [1, 2], [1.2, 1.9], [6, 2], [5.7, 1.5], [5.4, 2.2]]) y np.array([0, 0, 0, 1, 1, 1, 2, 2, 2])# 逻辑回归分类器 # solver：求解器&a…...

编程日记 2025/5/15 5:01:05

Python脚本文件开头两行#!/usr/bin/python和# -- coding: utf-8 --的作用

Linux环境下，Python脚本代码文件，比如test.py，文件的第一行一般要指定解释器，使用Linux的Shebang的形式指定，第二行一般指定编码格式。首行指定解释器工具，使用方式如下： # 第1种方式&#x…...

编程日记 2025/5/17 9:16:52

使用PyQt5开发一个GUI程序的实例演示

一、安装Python 下载安装到这个目录 G:\Python38-32 安装完成有这些工具，后面备用： G:\Python38-32\Scripts\pyrcc5.exe G:\Python38-32\Scripts\pyuic5.exe 二、PyQt环境配置 pip install PyQt5 pip install pyqt5-tools 建议使用国内源&#xff0c…...

编程日记 2025/5/17 10:00:12

3d扫描建模产品开发-三维扫描检测蓝光检测

现当下，汽车制造、航空航天，还是消费电子、医疗器械，三维扫描检测与蓝光技术正以前所未有的精度和效率，推动着产品从概念到实物的快速转化。三维扫描技术，简而言之，就是通过激光、结构光（如蓝…...

编程日记 2025/5/16 13:11:59

多线程——01

1. 进程/任务 process/task 进程是操作系统对一个正在运行的程序的一种抽象，换言之，可以把进程看做程序的一次运行过程每个进程想要执行，都需要消耗一定的系统资源（硬件资源） 1）进程在系统中的作用 a…...

编程日记 2025/5/16 21:36:02

Makefile中-D选项定义预编译处理宏

1.简单示例假设我们有一个简单的 C 程序main.c，内容如下： #include <stdio.h> #ifdef DEBUGvoid print_debug_info() {printf("This is debug information.\n");} #elsevoid print_debug_info() {} #endif int main() {print_debug_info();printf("Prog…...

编程日记 2025/5/13 21:28:21

NAPI杂记

NAPI和tasklet区别：NAPI是利用的软中断NET_RX_SOFTIRQ实现， tasklet是利用TASKLET_SOFTIRQ实现另外文章说NAPI主要是采用轮询，可以减少中断触发次数。do_softirq里面是开中断执行的啊？ 中断处理函数关闭中断开始处理。如果此时…...

编程日记 2025/5/14 14:10:50

006 MATLAB编程基础

01 M文件 MATLAB输入命令有两种方法： 一是在MATLAB主窗口逐行输入命令，每个命令之间用分号或逗号分隔，每行可包含多个命令。二是将命令组织成一个命令语句文集，使用扩展名“.m”，称为M文件。它由一系列的命令和语句…...

编程日记 2025/5/13 14:11:10

使用Alpine镜像作为基础镜像的Dockerfile配置

配置阿里 apk源： /etc/apk/repositories： https://mirrors.aliyun.com/alpine/v3.13/main alpine-v3.13-community安装包下载_开源镜像站-阿里云或者使用命令 sed -i sdl-cdn.alpinelinux.orgmirrors.aliyun.comg /etc/apk/repositories dockerfil…...

编程日记 2025/5/15 12:49:18

RAG (Retrieval Augmented Generation) 检索增强和生成

1 RAG技术简介 1.1 RAG技术概述 RAG（Retrieval Augmented Generation） 是一种结合了检索（Retrieval）和生成（Generation）的技术，旨在通过利用外部知识库来增强大型语言模型（LLMs&am…...

编程日记 2025/5/12 4:34:18

Figma入门-约束与对齐

Figma入门-约束与对齐前言在之前的工作中，大家的原型图都是使用 Axure 制作的，印象中 Figma 一直是个专业设计软件。最近，很多产品朋友告诉我，很多原型图都开始用Figma制作了，并且很多组件都是内置的&#xff0c…...

编程日记 2025/5/17 4:17:24

039集——渐变色之：CAD中画彩虹（）（CAD—C#二次开发入门）

（来左边儿跟我一起画个龙，在你右边儿画一道彩虹 ~~~~~~~~~~~ ） 效果如下： namespace AcTools {public class Class1{public Wform.Timer timer;//定时器需建在类下面public static DateTime startTime;[CommandM…...

编程日记 2025/5/15 23:25:02

MTK主板_小型联发科安卓主板_行业智能终端主板基于联发科方案

MTK安卓主板是一款小巧而高效的科技产品，其尺寸仅为43.4mm x 57.6mm。采用了先进的联发科12nm制程工艺，这款主板搭载四核或八核64位A53架构的CPU，主频高达2.0GHz，不但保证了出色的计算能力，还实现了超低功耗的特点。系…...

编程日记 2025/5/12 7:33:54

Arrays.copyOfRange(),System.arraycopy() 数组复制,数组扩容

Arrays.copyOfRange() 当需要将数组中的长度扩容时, 数组复制使用需要用到Arrays 类提供的的参数解析 * param original the array from which a range is to be copied * param from the initial index of the range to be copied, inclusive * param to the final ind…...

编程日记 2025/5/13 1:46:57

Docker for Everyone Plus——No Enough Privilege

直接告诉我们flag在/flag中，访问第一小题： sudo -l查看允许提权执行的命令： 发现有image load命令题目指明了有rz命令，可以用ZMODEM接收文件，看到一些write up说可以用XShell、MobaXterm、Tabby Terminal等软件连接上…...

编程日记 2025/5/15 17:19:40

ElasticSearch学习笔记把：Springboot整合ES（二）

一、前言上一篇文章中我们学习了ES中的Term级别的查询，包括 term、terms、terms_set、rang等，今天我们使用Java代码实现一遍上述的查询。二、项目依赖 POM <?xml version"1.0" encoding"UTF-8"?> <project xmlns&q…...

编程日记 2025/5/5 15:19:14

Linux系统之iotop命令的基本使用

Linux系统之iotop命令的基本使用一、iotop命令介绍二、iotop命令的使用帮助2.1 安装iotop2.2 iotop命令help帮助信息2.3 iotop命令选项解释三、 iotop命令的基本使用四、iotop使用注意事项一、iotop命令介绍 iotop 是一个类似于 top 的命令行工具，但它专注于显示…...

编程日记 2025/5/14 11:34:46

根据合约地址判断合约协议的方法

判断合约协议之前，需要了解一下什么是ERC165协议： ERC165 是以太坊中用于标准化接口检测的协议，由 Fabian Vogelsteller 在 2018 年创建 ，其核心内容主要包括以下方面： 接口定义单一函数接口：ERC165 协议…...

编程日记 2025/5/17 4:04:58

什么是sfp，onu，为什么PON（俗称“光猫”）模块使用SC光纤接口

在现代网络设备中，我们经常会看到SFP或SFP接口的身影，这些接口有时被简称为光口，但这个称呼并不严谨。有些厂商则称之为多功能口或多用途口，然而这对于不了解的人来说可能还是一头雾水。SFP，即Small Form-Factor Plugg…...

编程日记 2025/5/11 21:56:06

链表？-＞？（以尾插法说明，附头插法）

这篇文章做一些关于初学链表的一些问题的解答。我知道有些朋友只是需要一份完整的关于链表的代码，我会附在后面，大家直接划到最后就好。一、创建链表 (1 相信所有搜索过链表创建的朋友都看过这样一行： struct Line* head (struct Line…...

编程日记 2025/5/17 7:59:32

11.29周五F34-Day10打卡

文章目录 1. 问问他能不能来。解析答案：【解析答案分析】【对比分析】【拓展内容】2. 问题是他能不能做。解析答案：【解析答案分析】3. 问题是我们能否联系得上她。(什么关系?动作 or 描述?)解析答案：【解析答案分析】【对比分析】4. 我们在讨论是否要开一个会。解析答案：…...

编程日记 2025/5/14 23:32:13

【项目日记】仿mudou的高并发服务器 --- 实现HTTP服务器

对于生命，你不妨大胆一点， 因为我们始终要失去它。 --- 尼采 --- ✨✨✨项目地址在这里 ✨✨✨ ✨✨✨https://gitee.com/penggli_2_0/TcpServer✨✨✨ 仿mudou的高并发服务器 1 前言2 Util工具类3 HTTP协议3.1 HTTP请求3.2 HTTP应答 4 上下文解析模块…...

编程日记 2025/5/12 3:18:28

【SpringBoot问题】IDEA中用Service窗口展示所有服务及端口的办法

1、调出Service窗口打开View→Tool Windows→Service，即可显示。 2、正常情况应该已经出现SpringBoot，如下图请继续第三步 3、配置Service窗口的项目启动类型。微服务一般是Springboot类型。所以这里需要选择一下。点击最后一个号，点击Ru…...

编程日记 2025/5/13 14:14:28

Ubuntu20.04运行LARVIO

文章目录 1.运行 Toyish 示例程序2.运行 ROS Nodelet参考 1.运行 Toyish 示例程序 LARVIO 提供了一个简化的toyish示例程序，适合快速验证和测试。编译项目进入 build 文件夹并通过 CMake 编译项目： mkdir build cd build cmake -D CMAKE_BUILD_TYPER…...

编程日记 2025/5/12 9:11:23

数字化转型背景下，高职院校计算机网络应用的革新策略

在当今信息化时代，计算机网络已经成为高职院校教育不可或缺的一部分，它不仅极大地丰富了教育资源，提高了交流的便捷性，还催生了多样化的教学模式。对于高职院校来说，加强计算机网络应用的建设不仅是顺应时代潮流的必然…...

编程日记 2025/5/13 12:30:05

mysql 里面的主表和子表是什么?如何创建主表和子表的关系

在MySQL数据库中，主表和子表的概念是基于表间关系的。它们通常通过外键约束来建立联系，这种关系有助于维护数据的完整性和一致性。以下是对MySQL中主表和子表的详细解释： 主表（父表） 定义：主表&#xff0c…...

编程日记 2025/5/14 2:57:41

工程企业的成本管理系统软件应该有哪些特点？

工程企业的成本管理系统软件需要兼顾工程项目的复杂性和动态性，其功能特点应服务于成本核算、监控、优化与分析全生命周期管理，以下是关键特点： 一、核心功能特点 1. 全生命周期成本管理覆盖范围： 从项目立项、投标、预算编制&…...

编程日记 2025/5/12 1:58:09

【前端开发】实战：课表安排（HTML + JavaScript + Vue3 + Vant）

后端开发主要定义了三个核心部分：每周周期（WeekDays）、每天节次（TimeLessons） 和每天节次详情（Details） 每周周期（WeekDays） 存储了每周的七天（通常是从周一…...

编程日记 2025/5/7 17:07:45

nodejs建立TCP服务器端和TCP客户端之间的连接

TCP服务器端，看名字也知道是建立在服务器上面的 //获取模块 const net require(net); //创建server服务器 const servernet.createServer(); //与客户端建立连接 server.on(connection,function(socket){console.log(客户端与服务器连接已经建立);//socket是客户端…...

编程日记 2025/5/14 9:54:22

Pytorch使用手册-What is torch.nn really?（专题九）

我们建议将本教程作为 notebook 而不是脚本运行。要下载 notebook（.ipynb）文件，请点击页面顶部的链接。 PyTorch 提供了精心设计的模块和类，如 torch.nn、torch.optim、Dataset 和 DataLoader，帮助你创建和训练神经网络。为了充分利用这些工具的强大功能并根据你的问题进…...

编程日记 2025/5/12 15:40:16

ADAM优化算法与学习率调度器：深度学习中的关键工具

深度学习模型的训练效果离不开优化算法和学习率的选择。ADAM（Adaptive Moment Estimation）作为深度学习领域中广泛应用的优化算法之一，以其高效性和鲁棒性成为许多任务的默认选择。而学习率调度器则是优化算法的“助推器”，帮助训…...

编程日记 2025/5/9 15:33:50

黑马2024AI+JavaWeb开发入门Day03-Maven-单元测试飞书作业

视频地址：哔哩哔哩讲义作业飞书地址：飞书作业比较简单，随便写了写 package org.example;import org.junit.jupiter.api.Assertions; import org.junit.jupiter.api.BeforeEach; import org.junit.jupiter.api.Test; import org.junit.ju…...

编程日记 2025/5/15 17:47:47

TouchGFX设计模式代码实例说明

一)Model - View - Presenter (MVP) 模式在 TouchGFX 中的应用 1)Model（模型）： 模型代表应用程序的数据和业务逻辑。例如，在一个简单的计数器应用中，模型可以是一个包含计数器当前值的类。 class CounterModel { pri…...

编程日记 2025/5/15 12:22:37

Docker扩容操作(docker总是空间不足)

Docker扩容操作(docker总是空间不足) 1、df二连，一共也就70g，总是占满93%以上。所以需要移动到其他目录上查看docker镜像和容器存储目录的空间大小 du -sh /var/lib/docker/2、停止docker服务 systemctl stop docker3、首先创建目录并迁移 # 首先创…...

编程日记 2025/5/15 13:48:43

ELK Fleet JAVA LOG收集与展示教程

目录 elastic-fleet架构 Elastic Agent的优势 Fleet JAVA日志收集流程 1.注册Fleet Sever 2.创建JAVA代理收集策略Agent Policy 3.添加集成 integration 4.调整Java log输出格式 5.添加Elastic Agent 6.添加Ingest 7.创建数据视图 8.其他Policy nginx-policy syst…...

编程日记 2025/5/17 2:46:23

【Python网络爬虫笔记】2-HTTP协议中网络爬虫需要的请求头和响应头内容

1 HTTP 协议整理 HTTP（Hyper Text Transfer Protocol）即超文本传输协议，是用于从万维网（WWW）服务器传输超文本到本地浏览器的传送协议，直白点儿，就是浏览器和服务器之间的数据交互就是通过 HTT…...

编程日记 2025/5/16 22:37:37

TiDB 调度概述

PD 是 TiDB 集群的管理模块，同时也负责集群数据的实时调度。本文档介绍一下 PD 的设计思想和关键概念。场景描述 TiKV 集群是 TiDB 数据库的分布式 KV 存储引擎，数据以 Region 为单位进行复制和管理，每个 Region 会有多个 Replica&#xf…...

编程日记 2025/5/10 23:06:21

MySQL的Json类型数据操作方法

前言 MySQL在5.7增加了json类型数据，项目中最近有在使用。直接使用JSONObject或者JSONArray类型的时候会报以下的异常。发现需要将Java实体字段设置为String类型，然后需要的时候自己转换为JSONObject或者JSONArray。使用很不方便，经研究发现…...

编程日记 2025/5/16 20:33:52

论文笔记（五十九）A survey of robot manipulation in contact

A survey of robot manipulation in contact 文章概括摘要1. 引言解释柔顺性控制的概念：应用实例： 2. 需要接触操控的任务2.1 环境塑造2.2 工件对齐2.3 关节运动2.4 双臂接触操控 3. 接触操控中的控制3.1 力控制3.2 阻抗控制3.3 顺应控制 4. 接触操控中的…...

编程日记 2025/5/16 8:01:40