快速上手：如何开发一个实用的 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.