駕馭轉變：瀏覽器擴充功能 Manifest V3 JavaScript API 遷移策略

瀏覽器擴充功能開發的格局不斷演變。近年來最顯著的轉變之一就是 Manifest V3 (MV3) 的推出。此更新由 Google Chrome 領頭，但也影響了其他基於 Chromium 的瀏覽器，並且日益影響 Firefox，旨在為全球使用者提升安全性、隱私權和效能。對於開發者來說，此過渡需要深入了解這些變更，特別是關於 JavaScript API 的變更。這份綜合指南將為您提供知識和策略，以有效地將現有的 Manifest V2 擴充功能遷移到 MV3，確保您的作品在新環境中繼續運作和蓬勃發展。

了解 Manifest V3 中的核心變更

Manifest V3 代表對瀏覽器擴充功能運作方式的根本重新思考。這些變更背後的主要驅動因素是：

• 增強的安全性： MV3 引入了更嚴格的安全性原則，限制了擴充功能可以執行的程式碼類型以及它們與網頁互動的方式。
• 改善的隱私權： 新模型透過限制對某些敏感 API 的存取並促進更透明的資料處理，來強調使用者隱私權。
• 更佳的效能： 透過擺脫一些較舊的架構，MV3 旨在減少擴充功能對瀏覽器速度和資源消耗的效能影響。

從 JavaScript API 的角度來看，最具影響力的變更圍繞在：

• Service Workers 取代背景頁面： 持續存在的背景頁面模型正被事件驅動的 service worker 取代。這意味著您的背景邏輯只會在需要時執行，這可以顯著提高效能，但需要不同的方法來處理狀態管理和事件處理。
• Web Request API 修改： 強大的 `chrome.webRequest` API 廣泛用於網路請求攔截，在 MV3 中受到顯著限制。它正被 `declarativeNetRequest` API 取代，後者提供更注重隱私權和效能的方式，儘管靈活性較差。
• 內容腳本執行變更： 雖然內容腳本仍然存在，但它們的執行上下文和功能已經過改進。
• 移除 `eval()` 和 `new Function()`： 出於安全原因，`eval()` 和 `new Function()` 不再允許在擴充功能程式碼中使用。

關鍵 JavaScript API 遷移和策略

讓我們深入了解遷移關鍵 JavaScript API 的具體細節，並探索每個 API 的有效策略。

1. 背景腳本到 Service Worker 遷移

這可以說是最根本的變更。Manifest V2 擴充功能通常依賴於始終運行的持續背景頁面。Manifest V3 引入了 service worker，它們是事件驅動的，僅在由事件觸發時（例如，擴充功能安裝、瀏覽器啟動或來自內容腳本的消息）才運行。

為什麼要變更？

持續存在的背景頁面可能會消耗大量資源，尤其是在許多擴充功能處於活動狀態時。Service worker 提供了一種更有效率的模型，確保擴充功能邏輯僅在必要時運行，從而加快瀏覽器啟動速度並減少記憶體使用量。

遷移策略：

• 事件驅動邏輯： 重新架構您的背景邏輯為事件驅動。不要假設您的背景腳本始終可用，而是偵聽特定事件。您的 service worker 的主要進入點通常是 `install` 事件，您可以在其中設定偵聽器並初始化您的擴充功能。
• 消息傳遞： 由於 service worker 並非始終處於活動狀態，因此您需要大量依賴擴充功能的不同部分（例如，內容腳本、彈出視窗、選項頁面）和 service worker 之間非同步消息傳遞。使用 `chrome.runtime.sendMessage()` 和 `chrome.runtime.onMessage()` 進行通訊。確保您的消息處理程序功能強大，並且即使需要啟動 service worker 也能處理消息。
• 狀態管理： 持續存在的背景頁面可以在記憶體中維護全域狀態。使用 service worker 時，當 worker 終止時，此狀態可能會遺失。使用 chrome.storage (local 或 sync) 來保存需要在使用 service worker 終止後仍然存在的狀態。
• 生命週期意識： 了解 service worker 的生命週期。它可以被啟動、停用和重新啟動。您的程式碼應該優雅地處理這些轉換。例如，始終在啟動時重新註冊事件偵聽器。
• 範例：

  Manifest V2 (background.js):

              chrome.runtime.onInstalled.addListener(() => {
    console.log('Extension installed. Setting up listeners...');
    chrome.alarms.create('myAlarm', { periodInMinutes: 1 });
  });
  
  chrome.alarms.onAlarm.addListener((alarm) => {
    if (alarm.name === 'myAlarm') {
      console.log('Alarm triggered!');
      // Perform some background task
    }
  });
              
  
                
                  Copy
                
              
            

  Manifest V3 (service-worker.js):

              // Service worker installation
  chrome.runtime.onInstalled.addListener(() => {
    console.log('Extension installed. Setting up alarms...');
    chrome.alarms.create('myAlarm', { periodInMinutes: 1 });
  });
  
  // Event listener for alarms
  chrome.alarms.onAlarm.addListener((alarm) => {
    if (alarm.name === 'myAlarm') {
      console.log('Alarm triggered!');
      // Perform some background task
      // Note: If the service worker was terminated, it will be woken up for this event.
    }
  });
  
  // Optional: Handle messages from other parts of the extension
  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'getData') {
      // Simulate fetching data
      sendResponse({ data: 'Some data from service worker' });
    }
    return true; // Keep the message channel open for async response
  });
              
  
                
                  Copy
                
              
            

2. 使用 `declarativeNetRequest` 替換 `chrome.webRequest`

`chrome.webRequest` API 提供了廣泛的功能，用於攔截、封鎖、修改和重定向網路請求。在 Manifest V3 中，其功能因安全和隱私原因而受到顯著限制。主要的替代方案是 `declarativeNetRequest` API。

為什麼要變更？

`webRequest` API 允許擴充功能檢查和修改瀏覽器發出的每個網路請求。這帶來了隱私風險，因為擴充功能可能會記錄敏感的使用者資料。它也具有效能影響，因為使用 JavaScript 攔截每個請求可能會很慢。`declarativeNetRequest` 將攔截邏輯轉移到瀏覽器的原生網路堆疊，這更有效能且更注重隱私權，因為擴充功能不會直接看到請求詳細資訊，除非明確允許。

遷移策略：

• 了解宣告式規則： `declarativeNetRequest` 不使用命令式程式碼，而是使用宣告式方法。您定義一組規則（JSON 物件），這些規則指定對比對的網路請求採取哪些動作（例如，封鎖、重定向、修改標頭）。
• 規則定義： 規則指定條件（例如，URL 模式、資源類型、網域）和動作。您需要將您的 `webRequest` 封鎖或重定向邏輯轉換為這些規則集。
• 規則限制： 請注意您可以註冊的規則和規則集數量的限制。對於複雜的篩選情況，您可能需要動態更新規則集。
• 沒有動態修改： 與 `webRequest` 不同，`declarativeNetRequest` 不允許以相同方式動態修改請求主體或標頭。如果您的擴充功能的核心功能依賴於深度請求修改，您可能需要重新評估其設計或探索替代方法。
• 封鎖與重定向： 封鎖請求很簡單。對於重定向，您將使用 `redirect` 動作，指定一個新的 URL。
• 標頭操作： MV3 對於修改請求標頭有限制。您可以使用 `declarativeNetRequest` 中的 `requestHeaders` 和 `responseHeaders` 添加或移除特定標頭，但不支援複雜的轉換。
• 效能考量： 雖然通常更快，但管理大量規則仍然會影響效能。最佳化您的規則集以提高效率。
• 範例：

  Manifest V2 (封鎖影像)：

              chrome.webRequest.onBeforeRequest.addListener(
    function(details) { return { cancel: true }; },
    { urls: ["*://*.example.com/*.png"] },
    ["blocking"]
  );
  
              
  
                
                  Copy
                
              
            

  Manifest V3 (使用 `declarativeNetRequest`)：

  首先，在 JSON 檔案中定義您的規則（例如，rules.json）：

              [
    {
      "id": 1,
      "priority": 1,
      "action": {"type": "block"},
      "condition": {
        "urlFilter": "*.png",
        "domains": ["example.com"],
        "resourceTypes": ["image"]
      }
    }
  ]
  
              
  
                
                  Copy
                
              
            

  然後，在您的 service worker 中（或在初始設定腳本中）：

              chrome.runtime.onInstalled.addListener(() => {
    chrome.declarativeNetRequest.updateDynamicRules({
      addRules: [
        {
          "id": 1,
          "priority": 1,
          "action": {"type": "block"},
          "condition": {
            "urlFilter": "*.png",
            "domains": ["example.com"],
            "resourceTypes": ["image"]
          }
        }
      ],
      removeRuleIds: [1] // To remove if it already exists
    });
  });
  
              
  
                
                  Copy
                
              
            

3. 處理內容腳本執行和通訊

內容腳本是在網頁上下文中運行的 JavaScript 檔案。雖然它們的基本目的保持不變，但 MV3 改進了它們的執行方式以及它們與擴充功能其餘部分的互動方式。

主要變更和策略：

• 執行上下文： 內容腳本仍然可以注入到頁面中。但是，現在首選的程式化注入腳本的方法是使用 `chrome.scripting.executeScript` 直接注入 JavaScript。
• 非同步注入： 使用 `chrome.scripting.executeScript` 時，執行是非同步的。確保您的程式碼等待腳本被注入和執行，然後再嘗試與其 DOM 或全域範圍互動。
• `frameId` 意識： 如果您的擴充功能與 iframe 互動，請在注入腳本或發送消息時注意 `frameId` 屬性。
• DOM 存取： 存取 DOM 仍然是一項主要功能。但是，請注意 DOM 操作可能會干擾主機頁面自己的腳本。
• 與 Service Worker 通訊： 內容腳本需要與 service worker（取代背景頁面）通訊，以執行需要擴充功能後端邏輯的任務。使用 `chrome.runtime.sendMessage()` 和 `chrome.runtime.onMessage()`。
• 範例：

  注入腳本和通訊 (Manifest V3)：

              // From your popup or options page
  chrome.scripting.executeScript({
    target: { tabId: YOUR_TAB_ID },
    files: ['content.js']
  }, (results) => {
    if (chrome.runtime.lastError) {
      console.error(chrome.runtime.lastError);
      return;
    }
    console.log('Content script injected:', results);
  
    // Now communicate with the injected content script
    chrome.tabs.sendMessage(YOUR_TAB_ID, {
      action: "processPage"
    }, (response) => {
      if (chrome.runtime.lastError) {
        console.error(chrome.runtime.lastError);
        return;
      }
      console.log('Response from content script:', response);
    });
  });
  
  // In content.js:
  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === "processPage") {
      console.log('Processing page...');
      const pageTitle = document.title;
      // Perform some DOM manipulation or data extraction
      sendResponse({ success: true, title: pageTitle });
    }
    return true; // Keep the channel open for async response
  });
  
              
  
                
                  Copy
                
              
            

4. 消除 `eval()` 和 `new Function()`

出於安全原因，在 Manifest V3 中禁止在擴充功能程式碼中使用 `eval()` 和 `new Function()`。這些函數允許任意程式碼執行，這可能是一個重大的安全漏洞。

遷移策略：

• 程式碼重新架構： 最穩健的解決方案是重新架構您的程式碼以避免動態程式碼執行。如果您動態產生函數名稱或程式碼片段，請考慮使用預先定義的結構、組態物件或範本字串。
• JSON 剖析： 如果 `eval()` 用於剖析 JSON，請切換到 `JSON.parse()`。這是處理 JSON 資料的標準且安全的方式。
• 物件對應： 如果 `new Function()` 用於根據輸入動態建立函數，請探索使用物件對應或 switch 語句將輸入對應到預先定義的函數。
• 範例：

  之前 (Manifest V2, 不建議)：

              const dynamicFunctionName = 'myDynamicFunc';
  const code = 'console.log("Hello from dynamic function!");';
  
  const dynamicFunc = new Function(code);
  dynamicFunc();
  
  // Or for JSON parsing:
  const jsonString = '{"key": "value"}';
  const jsonData = eval('(' + jsonString + ')'); // Insecure
  
              
  
                
                  Copy
                
              
            

  之後 (Manifest V3, 安全)：

              // For dynamic functions:
  function myDynamicFunc() {
    console.log("Hello from pre-defined function!");
  }
  
  // If you need to call it dynamically based on a string, you can use an object map:
  const availableFunctions = {
    myDynamicFunc: myDynamicFunc
  };
  
  const functionToCall = 'myDynamicFunc';
  if (availableFunctions[functionToCall]) {
    availableFunctions[functionToCall]();
  } else {
    console.error('Function not found');
  }
  
  // For JSON parsing:
  const jsonString = '{"key": "value"}';
  const jsonData = JSON.parse(jsonString); // Secure and standard
  console.log(jsonData.key); // "value"
  
              
  
                
                  Copy
                
              
            

5. 其他重要的 API 考量

Manifest V3 會影響多個其他 API，並且務必了解這些變更：

• `chrome.tabs` API： `chrome.tabs` API 中的某些方法的行為可能會有所不同，特別是在標籤建立和管理方面。確保您正在使用最新的建議模式。
• `chrome.storage` API： `chrome.storage` API（local 和 sync）在很大程度上保持不變，並且對於在 service worker 終止後保存資料至關重要。
• 權限： 重新評估您的擴充功能的權限。MV3 鼓勵僅要求必要的權限並提供更精細的控制。
• 使用者介面元素： 擴充功能彈出視窗和選項頁面仍然是主要的使用者介面元素。確保它們已更新為可與新的 service worker 架構一起使用。

遷移的工具和最佳實務

遷移擴充功能可能是一個複雜的過程。幸運的是，有一些工具和最佳實務可以使其更順暢：

• 官方文件： 來自瀏覽器廠商（尤其是 Chrome 和 Firefox）的文件是您的主要資源。徹底閱讀 Manifest V3 遷移指南。
• 瀏覽器開發人員工具： 利用目標瀏覽器的開發人員工具。它們提供了對錯誤、service worker 生命週期和網路活動的寶貴見解。
• 增量遷移： 如果您有大型擴充功能，請考慮增量遷移策略。一次遷移一個功能或 API，徹底測試，然後再移動到下一個功能或 API。
• 自動化測試： 實作穩健的測試套件。自動化測試對於捕獲回歸並確保您的已遷移擴充功能在各種情況下按預期運作至關重要。
• 程式碼檢查和分析： 使用為 MV3 開發配置的檢查器（例如 ESLint）及早捕獲潛在問題。
• 社群論壇和支援： 與開發者社群互動。許多開發者正面臨著類似的挑戰，分享經驗可以帶來有效的解決方案。
• 考慮被封鎖功能的替代方案： 如果您的擴充功能的核心功能依賴於在 MV3 中受到嚴重限制或移除的 API（例如某些 `webRequest` 功能），請探索替代方法。這可能涉及利用仍然可用的瀏覽器 API、使用用戶端啟發式方法，甚至重新思考功能的實作。

Manifest V3 的全球考量

作為針對全球受眾的開發者，重要的是要考慮 MV3 的變更可能如何影響不同地區和環境中的使用者：

• 跨裝置的效能： Service worker 的效率提升對於在功能較弱的裝置上或網路連線速度較慢的使用者特別有益，這在許多新興市場中很普遍。
• 全球隱私問題： MV3 中增加的隱私保護措施符合全球資料隱私法規（例如，GDPR、CCPA）和使用者期望。這可以促進不同使用者群體之間的更大信任。
• 網路標準對齊： 雖然 MV3 主要由 Chromium 驅動，但推動更安全和注重隱私權的網路擴充功能模型是一種全球趨勢。領先於這些變更可以讓您的擴充功能為更廣泛的平台相容性和未來的網路標準做好準備。
• 文件的可存取性： 確保您所依賴的遷移資源可以存取，並且在必要時可以清楚地翻譯。雖然此文章以英文撰寫，但全球開發者可能會尋求本地化資源。
• 跨區域測試： 如果您的擴充功能的功能依賴於網路或可能在不同地區之間存在細微的 UI 差異，請確保您的測試涵蓋不同的地理位置和網路條件。

Manifest V3 的瀏覽器擴充功能未來

Manifest V3 不僅僅是一個更新；它是朝著更安全、更私密和更高效能的網路擴充功能生態系統邁出的重要一步。雖然遷移帶來挑戰，但也為開發者提供了構建更好、更負責任的擴充功能的機會。透過了解核心 API 變更並採用策略性遷移方法，您可以確保您的瀏覽器擴充功能在全球範圍內對使用者保持相關性和價值。

擁抱轉變，利用新功能，並繼續創新。瀏覽器擴充功能的未來就在這裡，它建立在增強的安全性和使用者信任的基礎上。