將 Chrome 擴充功能從 Manifest V2 更新到 Manifest V3 對開發人員來說是關鍵的一步，因為 Google 已經逐步停止了 Manifest V2 的支援。在本文中，我們將逐步介紹將最初使用 Manifest V2 建構的 Pomodoro Timer 擴充功能升級到更新的 Manifest V3 標準的過程。

我的故事

我有一個 4 年前免費製作的 Pomodoro Timer 擴展，我收到了 Google 的通知，要求我更新 Manifest。

我的番茄計時器的原始版本是我自己設計的，用霸王龍的咆哮作為週期結束通知？它既古怪又有趣，我甚至驚訝地看到有 24 個人在使用它。

這就是它的樣子：

我的妻子最近開始學習設計，由於我需要更新清單，我請她更新設計。結果在文章最後。劇透：我認為結果很棒。

為什麼升級 Manifest V3？

Manifest V3 引入了幾項關鍵更改，旨在增強 Chrome 擴充功能的隱私性、安全性和效能。這些變化包括：

• Service Workers： 後台頁面被 Service Worker 取代，因為它們不會連續運行，所以效率更高。
• 增強安全性：減少權限範圍並引入 declarativeNetRequest API 來管理網路請求。
• 改進的效能：透過優化擴充功能與瀏覽器資源的互動方式，V3 確保更好的資源管理。

第 1 步：了解核心差異

在深入了解更新之前，了解 Manifest V2 和 V3 之間的關鍵變化非常重要：

1. 後台腳本：在V2中，後台腳本連續運作。在 V3 中，這些被替換為僅在需要時執行的 Service Worker。
2. 權限：Manifest V3 要求明確宣告所有權限，某些權限已被棄用或替換。
3. API 變更： 一些 API 已被刪除或替換，且擴充功能不同元件之間的訊息傳遞系統已更新。

步驟2：更新清單文件

以下是如何將 Pomodoro 計時器擴展的 manifest.json 檔案從 V2 更新到 V3：

原始清單 V2 範例：

{
  "name": "Pomodoro Clock",
  "version": "1.1.0",
  "description": "Simple background timer for productivity",
  "manifest_version": 2,
  "permissions": ["storage"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/tomato16.png",
      "32": "img/tomato32.png",
      "48": "img/tomato48.png",
      "128": "img/tomato128.png"
    }
  },
  "icons": {
    "16": "img/tomato16.png",
    "32": "img/tomato32.png",
    "48": "img/tomato48.png",
    "128": "img/tomato128.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "options_page": "options.html"
}

更新了 Manifest V3 範例：

{
  "name": "Pomodoro Timer & Focus Clock",
  "version": "2.0.1",
  "description": "Boost productivity with this simple Pomodoro timer. Focus on tasks, minimize distractions, and manage your time effectively.",
  "manifest_version": 3,
  "permissions": ["storage","notifications","alarms"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/tomato16.png",
      "32": "img/tomato32.png",
      "48": "img/tomato48.png",
      "128": "img/tomato128.png"
    }
  },
  "icons": {
    "16": "img/tomato16.png",
    "32": "img/tomato32.png",
    "48": "img/tomato48.png",
    "128": "img/tomato128.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

清單中的主要變更：

後台腳本：

• V2: "background": {"scripts": ["background.js"]}
• V3: "background": {"service_worker": "background.js"}

在 V3 中，後台腳本被 Service Worker 取代。 Service Worker 僅在必要時運行，以提高資源效率。

操作與瀏覽器操作：

• V2: "browser_action": { ... }
• V3: "動作": { ... }

browser_action 已被 action 取代，這鞏固了功能並簡化了清單。

步驟 3：更新背景腳本以使用 Service Worker

我的擴充功能在後台使用了一個簡單的 setInterval() ，對於服務工作者，此行為將不起作用，因為為了節省瀏覽器資源，它僅在需要時運行。

在我的例子中，我必須修改計時器並將時間戳記儲存在儲存中，使用警報來安排通知呼叫者的觸發程式碼運行。

當然，使用chrome的內建通知來發送通知，以擺脫惱人的霸王龍後方。如果我的擴充功能的早期用戶閱讀了我的內容，我真的很抱歉？

這裡不會有程式碼範例，因為它太具體了。

結論

結果如下。我覺得很酷。簡約且易於使用

更新並沒有那麼困難，主要是了解舊的後台腳本和服務工作者之間的區別，但是要小心警報，我什至在測試時使 Chrome 崩潰了幾次？

隨意嘗試更新的番茄鐘計時器和焦點時鐘擴展，祝您更新成功！