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 Worker

在 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