Featured image of post 使用 Manifest V3 开发浏览器扩展Featured image of post 使用 Manifest V3 开发浏览器扩展
软件

使用 Manifest V3 开发浏览器扩展

构建符合 Chrome 清单 V3 标准的现代浏览器扩展的初学者指南。

  1. 首页
  2. Softwares
  3. 使用 Manifest V3 开发浏览器扩展

Manifest V3 现在是构建 Google Chrome 扩展的官方强制规范。随着Manifest V2的弃用，开发人员必须采用非持久性Service Workers进行后台处理并适应声明式网络请求模型。本指南解释了 Manifest V3 中的核心架构转变，并提供了设置合规扩展的简单演练。

1. 从 Manifest V2 到 V3 的主要转变

Manifest V3 (MV3) 旨在使浏览器扩展更加安全、尊重隐私和高性能。

1) 将背景页面转换为 Service Workers

在 MV2 中，扩展运行持久后台页面 (background.js)。在 MV3 中，后台脚本被 Service Workers 取代。 Service Worker 是短暂的——浏览器会在空闲时终止它们以节省系统内存。由于内存中的变量不会持久存在，因此开发人员必须使用 chrome.storage API 存储应用程序状态。

2）使用declarativeNetRequest进行网络拦截

旧的 webRequest API 允许扩展使用 JavaScript 拦截和修改所有传入和传出网络流量。出于安全考虑，MV3 强制执行 declarativeNetRequest API。扩展程序不是对每个请求执行自定义逻辑，而是注册浏览器本机处理的声明性阻止规则。

3) 禁止远程托管代码

对于安全审核，不再允许扩展程序下载和运行外部 JavaScript 文件（例如，从 CDN 加载 jQuery 或 Google Analytics）。扩展执行的所有代码必须本地捆绑在扩展包内。

2. 基本 Manifest V3 文件结构

以下是打开弹出 UI 的扩展的引导实现。

1) 配置文件：manifest.json

定义元数据、权限、后台服务工作线程和用户界面操作：

{
  "manifest_version": 3,
  "name": "NetGuide MV3 Sample",
  "version": "1.0.0",
  "description": "A bootstrap extension demonstrating Manifest V3 features.",
  "permissions": [
    "storage",
    "activeTab"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

2) 背景脚本：background.js

实现在需要时响应的事件驱动处理程序：

// Register default state on installation
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.local.set({ extensionActive: true });
  console.log("Extension installed and initialized.");
});

// React to tab activation changes
chrome.tabs.onActivated.addListener((activeInfo) => {
  chrome.storage.local.get(["extensionActive"], (result) => {
    if (result.extensionActive) {
      console.log(`Active tab shifted to: ${activeInfo.tabId}`);
    }
  });
});

3) 用户界面：popup.html 和 popup.js

设计HTML界面并加载本地弹窗脚本：

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { width: 180px; font-family: sans-serif; padding: 10px; }
    button { width: 100%; padding: 6px; background: #2563eb; color: white; border: none; border-radius: 4px; }
  </style>
</head>
<body>
  <h4>NetGuide Tool</h4>
  <button id="action-btn">Check Status</button>
  <script src="popup.js"></script>
</body>
</html>

// popup.js
document.getElementById('action-btn').addEventListener('click', () => {
  chrome.storage.local.get(["extensionActive"], (result) => {
    alert(`Extension active status: ${result.extensionActive}`);
  });
});

3. 开发技巧与调试

  • 处理空闲超时：由于 MV3 Service Worker 在空闲时停止运行，因此像 setInterval 这样的标准 Javascript 计时器将失败。使用 chrome.alarms API 来安排定期进程。
  • 控制台审核：要加载您的扩展程序，请在 Google Chrome 中打开 chrome://extensions，启用“开发人员模式”，单击“加载已解压的文件”，然后选择您的开发文件夹。单击“检查视图：Service Worker”链接检查后台消息。

4.结论：Manifest V3 导航

虽然向 Manifest V3 的过渡最初引入了对特定 API 的限制（影响广告拦截器和安全工具），但该平台已经稳定下来。在 MV3 下实施扩展可确保您的插件符合现代浏览器安全标准，为用户提供安全、优化的浏览体验。

©2022 - 2026 Kaisekukun