如何過渡到鍍鉻擴展的V3

最近，我的一位客戶因為我的擴展程序“過時”而拒絕了它，這促使我深入研究了 Chrome 擴展程序的 Manifest V3。網上關於 Manifest V3 的信息匱乏，理解起來也比較困難。

經過一番努力，我終於完成了任務，但不想讓我的研究成果浪費，因此決定分享我的學習經驗。

Manifest V3 遷移的重要性

Manifest V3 是 Google 用於 Chrome 瀏覽器的 API，它是當前 API Manifest V2 的繼任者，它管理 Chrome 擴展程序如何與瀏覽器交互。 Manifest V3 對擴展程序的規則進行了重大更改，其中一些將成為我們習慣使用的 V2 的新支柱。

Manifest V3 的遷移可以概括如下：

1. 遷移自 2018 年就開始進行。
2. Manifest V3 將於 2023 年 1 月正式開始推出。
3. 到 2023 年 6 月，運行 Manifest V2 的擴展程序將不再可在 Chrome 網上應用店中使用。
4. 不符合 Manifest V3 中引入的新規則的擴展程序最終將從 Chrome 網上應用店中刪除。

Manifest V3 的主要目標之一是提高用戶安全性並改善整體瀏覽器體驗。以前，許多瀏覽器擴展程序依賴於雲端的代碼，這意味著很難評估擴展程序是否有風險。 Manifest V3 旨在通過要求擴展程序包含所有將要運行的代碼來解決這個問題，從而允許 Google 掃描它們並檢測潛在風險。它還強制擴展程序向 Google 請求對其可以在瀏覽器上實施的更改的權限。

及時了解 Google 向 Manifest V3 的遷移非常重要，因為它為擴展程序引入了旨在提高用戶安全性和整體瀏覽器體驗的新規則，而不符合這些規則的擴展程序最終將從 Chrome 網上應用店中刪除。

簡而言之，如果您不盡快進行遷移，您在創建使用 Manifest V2 的擴展程序方面所做的所有努力都可能付諸東流。

Manifest V2 和 V3 之間的關鍵區別

兩者之間存在許多差異，雖然我強烈建議您閱讀 Chrome 的“遷移到 Manifest V3”指南，但以下是關鍵點的簡短總結：

1. 在 Manifest V3 中，服務工作者取代了後台頁面。
2. 網絡請求修改在 Manifest V3 中使用新的 declarativeNetRequest API 處理。
3. 在 Manifest V3 中，擴展程序只能執行其包中包含的 JavaScript 代碼，而不能使用遠程託管的代碼。
4. Manifest V3 為許多方法引入了 Promise 支持，儘管回調仍然作為替代方案受支持。
5. Manifest V3 中的主機權限是一個單獨的元素，必須在“host_permissions”字段中指定。
6. Manifest V3 中的內容安全策略是一個對象，其成員表示替代內容安全策略 (CSP) 上下文，而不是 Manifest V2 中的字符串。

在一個簡單的更改網頁背景的 Chrome 擴展程序的清單中，可能如下所示：

<code>// Manifest V2
{
  "manifest_version": 2,
  "name": "Shane's Extension",
  "version": "1.0",
  "description": "A simple extension that changes the background of a webpage to Shane's face.",
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [ "activeTab", ],
  "optional_permissions": ["<all_urls>"]
}</all_urls></code>

<code>// Manifest V3
{
  "manifest_version": 3,
  "name": "Shane's Extension",
  "version": "1.0",
  "description": "A simple extension that changes the background of a webpage to Shane's face.",
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [ "activeTab", ],
  "host_permissions": [ "<all_urls>" ]
}</all_urls></code>

如果您發現上面的一些標籤看起來很陌生，請繼續閱讀以了解您需要了解的內容。

如何順利遷移到 Manifest V3

我已經將向 Manifest V3 的遷移總結為四個關鍵領域。當然，雖然新的 Manifest V3 中有很多需要從舊的 Manifest V2 實現的新功能，但在這四個領域進行更改將使您的 Chrome 擴展程序為最終遷移做好準備。

這四個關鍵領域是：

1. 更新清單的基本結構。
2. 修改主機權限。
3. 更新內容安全策略。
4. 修改網絡請求處理。

通過這四個方面，您的清單的基本要素將準備好遷移到 Manifest V3。讓我們詳細查看每個關鍵方面，並了解如何努力使您的 Chrome 擴展程序免受此遷移的影響。

更新清單的基本結構

更新清單的基本結構是遷移到 Manifest V3 的第一步。您需要做的最重要更改是將“manifest_version”元素的值更改為 3，這表示您正在使用 Manifest V3 功能集。

Manifest V2 和 V3 之間的主要區別之一是用 Manifest V3 中的單個擴展程序服務工作者替換後台頁面。您需要在“background”字段下註冊服務工作者，使用“service_worker”鍵並指定單個 JavaScript 文件。即使 Manifest V3 不支持多個後台腳本，您也可以選擇通過指定“type”: “module”將服務工作者聲明為 ES 模塊，這允許您導入更多代碼。

在 Manifest V3 中，“browser_action”和“page_action”屬性合併為單個“action”屬性。您需要在清單中將這些屬性替換為“action”。同樣，Manifest V3 中的“chrome.browserAction”和“chrome.pageAction”API 合併為單個“Action”API，您需要遷移到此 API。

<code>// Manifest V2
"background": {
  "scripts": ["background.js"],
  "persistent": false
},
"browser_action": {
  "default_popup": "popup.html"
},</code>

<code>// Manifest V3
"background": {
  "service_worker": "background.js"
},
"action": {
  "default_popup": "popup.html"
}</code>

總的來說，更新清單的基本結構是遷移到 Manifest V3 過程中的一個關鍵步驟，因為它允許您利用此版本的 API 中引入的新功能和更改。

修改主機權限

遷移到 Manifest V3 的第二步是修改主機權限。在 Manifest V2 中，您在清單文件的“permissions”字段中指定主機權限。在 Manifest V3 中，主機權限是一個單獨的元素，您應在清單文件的“host_permissions”字段中指定它們。

以下是如何修改主機權限的示例：

<code>// Manifest V2
{
  "manifest_version": 2,
  "name": "Shane's Extension",
  "version": "1.0",
  "description": "A simple extension that changes the background of a webpage to Shane's face.",
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [ "activeTab", ],
  "optional_permissions": ["<all_urls>"]
}</all_urls></code>

<code>// Manifest V3
{
  "manifest_version": 3,
  "name": "Shane's Extension",
  "version": "1.0",
  "description": "A simple extension that changes the background of a webpage to Shane's face.",
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [ "activeTab", ],
  "host_permissions": [ "<all_urls>" ]
}</all_urls></code>

更新內容安全策略

為了將 Manifest V2 擴展程序的 CSP 更新為符合 Manifest V3，您需要對清單文件進行一些更改。在 Manifest V2 中，CSP 在清單的“content_security_policy”字段中指定為字符串。

在 Manifest V3 中，CSP 現在是一個對象，其不同的成員表示替代 CSP 上下文。您現在不必使用單個“content_security_policy”字段，而是需要根據您使用的擴展程序頁面的類型為“content_security_policy.extension_pages”和“content_security_policy.sandbox”指定單獨的字段。

如果您當前的 CSP 中存在外部域，則還應刪除“script-src”、“worker-src”、“object-src”和“style-src”指令中的任何引用。進行這些 CSP 更新對於確保擴展程序在 Manifest V3 中的安全性和穩定性非常重要。

<code>// Manifest V2
"background": {
  "scripts": ["background.js"],
  "persistent": false
},
"browser_action": {
  "default_popup": "popup.html"
},</code>

<code>// Manifest V3
"background": {
  "service_worker": "background.js"
},
"action": {
  "default_popup": "popup.html"
}</code>

修改網絡請求處理

遷移到 Manifest V3 的最後一步是修改網絡請求處理。在 Manifest V2 中，您將使用 chrome.webRequest API 來修改網絡請求。但是，此 API 在 Manifest V3 中由 declarativeNetRequest API 替換。

要使用此新 API，您需要在清單中指定 declarativeNetRequest 權限，並將代碼更新為使用新 API。兩個 API 之間的一個關鍵區別在於，declarativeNetRequest API 需要您指定要阻止的預定地址列表，而不是像使用 chrome.webRequest API 那樣能夠阻止整個 HTTP 請求類別。

對代碼進行這些更改對於確保擴展程序在 Manifest V3 下繼續正常運行非常重要。以下是如何修改清單以在 Manifest V3 中使用 declarativeNetRequest API 的示例：

<code>// Manifest V2
"permissions": [ 
  "activeTab", 
  "storage", 
  "http://www.css-tricks.com/", 
  ":///*" 
]</code>

<code>// Manifest V3
"permissions": [ 
  "activeTab", 
  "scripting", 
  "storage"
],
"host_permissions": [
  "http://www.css-tricks.com/" 
],
"optional_host_permissions": [ 
  ":///*" 
]</code>

您還需要更新擴展程序代碼以使用 declarativeNetRequest API 來代替 chrome.webRequest API。

其他需要檢查的方面

我所介紹的只是冰山一角。當然，如果我想涵蓋所有內容，我可能會在這裡待上好幾天，而且 Google 的 Chrome 開發人員指南也沒有意義。雖然我所介紹的內容將使您的 Chrome 擴展程序在這次遷移中足夠安全，但以下是一些您可能想要查看的其他內容，以確保您的擴展程序能夠正常運行。

• 將後台腳本遷移到服務工作者執行上下文：如前所述，Manifest V3 使用單個擴展程序服務工作者替換後台頁面，因此可能需要更新後台腳本以適應服務工作者執行上下文。
• 統一 chrome.browserAction 和 chrome.pageAction API：這兩個等效的 API 在 Manifest V3 中合併為單個 API，因此可能需要遷移到 Action API。
• 遷移期望 Manifest V2 後台上下文的函數：Manifest V3 中服務工作者的採用與 chrome.runtime.getBackgroundPage()、chrome.extension.getBackgroundPage()、chrome.extension.getExtensionTabs() 和 chrome.extension.getViews() 等方法不兼容。可能需要遷移到在其他上下文和後台服務工作者之間傳遞消息的設計。
• 將內容腳本中的 CORS 請求移動到後台服務工作者：為了符合 Manifest V3，可能需要將內容腳本中的 CORS 請求移動到後台服務工作者。
• 遷移遠離執行外部代碼或任意字符串：Manifest V3 不再允許使用 chrome.scripting.executeScript({code: '...'})、eval() 和 new Function() 執行外部邏輯。可能需要將所有外部代碼（JavaScript、WebAssembly、CSS）移動到擴展程序包中，更新腳本和样式引用以從擴展程序包加載資源，並使用 chrome.runtime.getURL() 在運行時構建資源 URL。
• 更新選項卡 API 中的某些腳本和 CSS 方法：如前所述，一些方法從選項卡 API 移動到 Manifest V3 中的腳本 API。可能需要更新對這些方法的任何調用以使用正確的 Manifest V3 API。

以及更多！

請花一些時間來了解所有更改。畢竟，這種變化是不可避免的，如果您不想因為避免此遷移而丟失 Manifest V2 擴展程序，那麼請花一些時間來掌握必要的知識。

另一方面，如果您是 Chrome 擴展程序編程的新手並且想要入門，一個很好的方法是深入研究 Chrome 的 Web 開發人員工具的世界。我通過 Linkedin Learning 上的一個課程完成了這項工作，這讓我很快掌握了速度。掌握了這些基礎知識後，請回到本文並根據 Manifest V3 翻譯您所了解的內容！

那麼，我將來如何使用新的 Manifest V3 中的功能呢？

對我來說，向 Manifest V3 的遷移以及 chrome.webRequestAPI 的刪除似乎正在將擴展程序從以數據為中心的使用案例（例如廣告攔截器）轉移到更多功能性和基於應用程序的使用案例。我最近一直在避免應用程序開發，因為它有時會非常消耗資源。但是，這種轉變可能會讓我重新開始！

近年來，人工智能工具的興起，許多工具都提供可用的 API，這激發了大量新的和新鮮的 SaaS 應用程序。我個人認為，這與向更多基於應用程序的 Chrome 擴展程序的轉變恰逢其時！雖然許多舊的擴展程序可能會因這次遷移而被清除，但許多圍繞新穎 SaaS 創意構建的新擴展程序將取而代之。

因此，這是一個令人興奮的更新，可以用來改進舊的擴展程序或構建新的擴展程序！我個人認為，在擴展程序中使用涉及人工智能的 API 來增強用戶瀏覽體驗有很多可能性。但這真的只是冰山一角。如果您想真正地使用您自己的專業擴展程序或聯繫公司為他們構建/更新擴展程序，我建議您升級您的 Gmail 帳戶，因為它在協作、開發和將擴展程序發佈到 Chrome 網上應用店方面具有優勢。

但是，請記住，每個開發人員的需求都不同，因此請學習您需要的內容來保持當前擴展程序的運行，或讓新的擴展程序運行！

以上是如何過渡到鍍鉻擴展的V3的詳細內容。更多資訊請關注PHP中文網其他相關文章！