教學課程：遷移至 Manifest V2

Chrome 18 已淘汰資訊清單版本 1，根據 資訊清單第 1 版支援時間表。第 1 版到第 2 版的各項變更可分為二 廣泛類別：API 變更和安全性變更。

這份文件提供檢查清單，協助您將 Chrome 擴充功能從資訊清單第 1 版遷移至 第二版則是更詳盡的摘要，說明這些變更的意義和執行原因。

API 變更檢查清單

  • 要使用 browser_actions 屬性還是 chrome.browserActions API？

  • 將 browser_actions 替換為單數 browser_action 屬性。

  • 將 chrome.browserActions 替換為 chrome.browserAction。

  • 將 icons 屬性替換為 default_icon。

  • 將 name 屬性替換為 default_title。

  • 將 popup 屬性替換為 default_popup (現在必須是字串)。

  • 要使用 page_actions 屬性還是 chrome.pageActions API？

  • 將 page_actions 替換為 page_action。

  • 將 chrome.pageActions 替換為 chrome.pageAction。

  • 將 icons 屬性替換為 default_icon。

  • 將 name 屬性替換為 default_title。

  • 將 popup 屬性替換為 default_popup (現在必須是字串)。

  • 您使用的是 chrome.self 屬性嗎？

  • 替換為 chrome.extension。

  • 您使用的是 Port.tab 屬性嗎？

  • 替換為 Port.sender。

  • 您使用的是「chrome.extension.getTabContentses()」還是 還是chrome.extension.getExtensionTabs() API？

  • 替換為 chrome.extension.getViews( { "type" : "tab" } )。

  • 擴充功能是否使用背景網頁？

  • 將 background_page 屬性替換為 background 屬性。

  • 加入含有網頁程式碼的 scripts 或 page 屬性。

  • 新增 persistent 屬性並設為 false，即可將背景網頁轉換為事件 頁面

安全性變更檢查清單

  • 您是否在 HTML 網頁中使用內嵌指令碼區塊？

  • 移除 <script> 標記內含的 JS 程式碼，然後把程式碼放在外部 JS 檔案中。

  • 您是否使用內嵌事件處理常式 (例如 Click 等)？

  • 請將這些變數從 HTML 程式碼中移除，移至外部 JS 檔案，並使用 addEventListener() 。

  • 擴充功能是否將內容指令碼插入需要存取資源的網頁 (例如 圖片與指令碼)？

  • 定義 web_accessible_resources 屬性並列出資源 (選用) 這些資源會個別指定「內容安全政策」)。

  • 你的擴充功能是否嵌入外部網頁？

  • 定義 sandbox 屬性。

  • 您的程式碼或程式庫是否使用 eval()、新的 Function()、innerHTML、setTimeout() 或 否則會傳送動態評估的 JavaScript 程式碼字串？

  • 如要將 JSON 程式碼剖析為物件，請使用 JSON.parse()。

  • 使用適合 CSP 的程式庫，例如 AngularJS。

  • 在資訊清單中建立沙箱項目，然後使用 postMessage()，即可與沙箱頁面通訊。

  • 您是否載入外部程式碼，例如 jQuery 或 Google Analytics？

  • 建議您下載程式庫並封裝至擴充功能，然後從 local 套件。

  • 將「content_security_policy」中提供資源的 HTTPS 網域加入許可清單您的部分 資訊清單。

API 變更摘要

資訊清單第 2 版針對瀏覽器動作和網頁動作 API 推出了幾項異動 有幾個舊的 API 和較新的 API

瀏覽器動作變更

瀏覽器動作 API 導入了一些命名變更：

  • browser_actions 和 chrome.browserActions 屬性已替換為 browser_action 和 chrome.browserAction 的單一對應項目。

  • 舊的 browser_actions 屬性下方有 icons、name 和 popup 屬性。 這些函式已由以下系統取代：

  • 瀏覽器動作標記圖示的 default_icon

  • default_name 代表將滑鼠遊標懸停在徽章上時，顯示在工具提示的文字上

  • HTML 網頁：default_popup，代表瀏覽器動作的使用者介面 (現在必須 為字串，不能是物件)

網頁動作變更

與瀏覽器動作的變更類似，頁面動作 API 也有所變更：

  • page_actions 和 chrome.pageActions 屬性已替換為單數 page_action 和 chrome.pageAction 這兩個版本。

  • 舊的 page_actions 屬性下方有 icons、name 和 popup 屬性。這些 已由：

  • 網頁動作徽章圖示的default_icon

  • default_name 代表將滑鼠遊標懸停在徽章上時，顯示在工具提示的文字上

  • 代表網頁動作使用者介面的 HTML 網頁 default_popup (現在必須 字串，不能是物件)

已移除及變更的 API

部分擴充功能 API 已移除，並替換為新的對應 API：

  • background_page 屬性已由「背景」取代。
  • chrome.self 屬性已移除，請使用 chrome.extension。
  • Port.tab 屬性已由 Port.sender 取代。
  • chrome.extension.getTabContentses() 和 chrome.extension.getExtensionTabs() API 已 已由 chrome.extension.getViews( { "type" : "tab" } ) 取代。

安全性變更摘要

從資訊清單第 1 版遷移至新版本時，會發生幾項安全性相關變更 2.這些異動源自 Chrome 的內容安全政策採用。你 建議您詳閱本政策，瞭解這項政策帶來的影響。

不允許內嵌指令碼和事件處理常式

由於使用內容安全政策，您無法再使用內嵌的 <script> 標記 與 HTML 內容搭配使用這類檔案必須移至外部 JS 檔案。此外，內嵌事件處理常式 都不支援 HTTPS 連線舉例來說，假設您的擴充功能含有以下程式碼：

<html>
<head>
  <script>
    function myFunc() { ... }
  </script>
</head>
</html>

這個程式碼會導致執行階段發生錯誤。如要修正這個問題，請將 <script> 個標記內容移至外部檔案 並透過 src='path_to_file.js' 屬性參照這些函式。

同樣地，內嵌事件處理常式常用於許多人常常發生，而且很便利 網頁程式開發人員則不會執行。例如，請考慮下列常見的執行個體：

<body onload="initialize()">
<button onclick="handleClick()" id="button1">

這些指令不適用於資訊清單 V2 擴充功能。移除內嵌事件處理常式，並放在 外部 JS 檔案，並使用 addEventListener() 為其註冊事件處理常式。適用對象 範例，請在 JS 程式碼中使用：

window.addEventListener("load", initialize);
...
document.getElementById("button1").addEventListener("click",handleClick);

這樣就能以更簡潔的方式，將擴充功能的行為與使用者介面標記區隔開來。

嵌入內容

在某些情況下，你的擴充功能可能會嵌入可供外部使用或 來自外部來源

網頁中的擴充功能內容： 如果擴充功能嵌入了內容中使用的資源 (例如圖片、指令碼、CSS 樣式等) 這是插入網頁的指令碼，您必須使用 web_accessible_resources 屬性 將這些資源加入許可清單，以便外部網頁使用：

{
...
  "web_accessible_resources": [
    "images/image1.png",
    "script/myscript.js"
  ],
...
}

嵌入外部內容： 「內容安全政策」只允許從套件載入本機指令碼和物件。 可防止外部攻擊者在您的擴充功能中加入未知的程式碼。不過 您想載入外部提供的資源 (如 jQuery 或 Google Analytics 程式碼) 的時間。 方法有以下兩種：

  1. 在本機下載相關程式庫 (例如 jQuery)，然後將其封裝至擴充功能中。

  2. 如要以有限的方式放寬 CSP，您可以將 &quot;content_security_policy&quot;部分資訊清單。如要加入 Google Analytics 等資料庫， 方法如下：

    {
  ...,
  "content_security_policy": "script-src 'self'
  https://ssl.google-analytics.com; object-src 'self'",
  ...
}

使用動態指令碼評估

新版資訊清單 v2 配置的最大改變或許是擴充功能已無法 使用動態指令碼評估技術，例如 eval() 或新的 Function()，或傳遞 JS 字串 導致使用 eval() 的函式 (例如 setTimeout())。此外， Google 地圖和特定範本程式庫等常用 JavaScript 程式庫， 來運用其中一些技巧

Chrome 提供沙箱機制，讓頁面在自己的來源中執行，而無法存取 Chrome。* 相互整合為了使用 eval() 及類似新版《內容安全政策》規定，請按照下列步驟操作：

  1. 在資訊清單檔案中建立沙箱項目。
  2. 在沙箱項目中，列出您想在沙箱中執行的網頁。
  3. 請使用透過 postMessage() 傳遞的訊息與沙箱頁面通訊。

如要進一步瞭解相關做法，請參閱採用沙箱機制評估說明文件。

延伸閱讀

資訊清單第 2 版中的變更內容旨在引導開發人員打造更安全的環境，並 或完善架構的擴充功能和應用程式如何查看資訊清單版本 1 的完整變更清單 第 2 版，請參閱資訊清單檔案說明文件。進一步瞭解如何使用沙箱 隔離不安全的程式碼，請參閱沙箱評估作業一文。歡迎進一步瞭解「內容」 請瀏覽我們的擴充功能相關教學課程，並瀏覽這篇文章 HTML5Rocks。