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

发布于：2024-11-28 ⋅ 阅读:(16) ⋅ 点赞:(0)
微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

在日常浏览网页时，背景图片能够显著提升网页的视觉体验。如果你也想为自己的浏览器页面添加个性化背景图片，并希望背景图片设置能够持久保存，本文将介绍如何通过开发一个自定义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('自定义背景插件已安装！');
  
  // 初始化背景设置，默认背景URL
  chrome.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>
    // 加载当前保存的背景URL
    chrome.storage.local.get(['backgroundUrl'], (result) => {
      document.getElementById('bgUrlInput').value = result.backgroundUrl || '';
    });

    // 保存新的背景URL
    document.getElementById('saveBg').addEventListener('click', () => {
      const url = document.getElementById('bgUrlInput').value;
      if (url) {
        chrome.storage.local.set({ backgroundUrl: url }, () => {
          alert('背景设置已保存！');
        });
      }
    });
  </script>
</body>
</html>

6. 加载插件到Edge浏览器

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

三、插件发布与上传流程

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

1. 注册开发者账号

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

2. 打包插件

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

zip -r custom-background-extension.zip *

3. 提交插件

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

4. 插件更新

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

四、总结

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

后续扩展

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

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布