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

在日常浏览网页时，背景图片能够显著提升网页的视觉体验。如果你也想为自己的浏览器页面添加个性化背景图片，并希望背景图片设置能够持久保存，本文将介绍如何通过开发一个自定义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插件，并学习了如何将背景设置保存在插件的存储中，以便长期使用。我们还介绍了插件的发布流程，让你可以将插件分享给更多的用户。

后续扩展

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