Manifest V3 中的擴充功能動作

西蒙恩文森
Simeon Vincent

自 Chrome 擴充功能推出以來,這個平台允許開發人員使用「動作」,直接在頂層 Chrome UI 中公開擴充功能功能。動作是一種圖示按鈕,可用於開啟彈出式視窗,或觸發擴充功能中的部分功能。Chrome 以往支援兩種動作、瀏覽器動作和網頁動作。Manifest V3 將其功能整合至新的 chrome.action API 後,改變了這一點。

擴充功能操作的簡短記錄

雖然 chrome.action 本身是 Manifest V3 的新功能,但其基本功能可提供截至 2010 年 1 月穩定降至的擴充功能。Chrome 擴充功能平台的第一個穩定版本支援兩種動作:瀏覽器動作頁面動作

瀏覽器動作可讓擴充功能開發人員在主要的 Google Chrome 工具列中顯示「在網址列右側」(來源) 圖示,讓使用者可以輕鬆在任何頁面上觸發擴充功能功能。另一方面,網頁動作的意義是表示可對目前頁面採取的動作,但不適用於所有網頁 (來源)。

網址列會顯示網頁動作 (左側),表示擴充功能可以在這個頁面上執行特定操作。瀏覽器動作 (右側) 一律會顯示。

換句話說,瀏覽器動作可讓擴充功能開發人員在瀏覽器中持續顯示使用者介面,頁面動作則只有在擴充功能對目前頁面有助益時才會顯示。

這兩種動作都是選用動作,因此擴充功能開發人員可以選擇不提供動作、網頁動作或瀏覽器動作 (不得指定多項動作)。

大約六年後,Chrome 49 便為擴充功能推出新的 UI 模式。為協助使用者瞭解自己的擴充功能,Chrome 開始在網址列右側顯示所有使用中的擴充功能。使用者可以視需求將擴充功能「溢位」到 Chrome 選單。

隱藏的擴充功能圖示會顯示在 Chrome 選單中。

為了為每個擴充功能顯示圖示,這次更新也針對擴充功能在 Chrome 使用者介面中的行為,提供了兩項重大變更。首先,所有擴充功能都開始在工具列中顯示圖示。 如果擴充功能沒有圖示,Chrome 會自動產生圖示。再來,網頁動作會與瀏覽器動作一起移至工具列,並提供區分「顯示」和「隱藏」狀態的預設用途。

停用的網頁動作 (左側) 會在工具列中呈現灰階圖片,啟用圖片 (右側) 則會以全彩顯示。

這項變更允許網頁動作擴充功能繼續正常運作,但也會隨時間而降低頁面動作角色。重新設計使用者介面的其中一項影響,是瀏覽器動作可以有效控制網頁動作。由於所有擴充功能都顯示在工具列中,使用者預期在點選擴充功能的工具列圖示後,就會叫用擴充功能,而瀏覽器動作對 Chrome 擴充功能造成更重要的互動。

Manifest V3 變更

在 2016 年擴充功能 UI 重新設計後的幾年,Chrome UI 和擴充功能持續演進,但瀏覽器動作和網頁動作大致上仍維持不變。也就是說,至少直到我們開始規劃如何使用 Manifest V3 翻新擴充功能平台為止。

擴充功能團隊清楚表明,瀏覽器動作和網頁動作在無意義的情況下越來越明顯。更糟的是,這些細微的行為差異導致開發人員難以決定要使用哪一種。我們發現,只要將瀏覽器動作和網頁動作合併成單一「動作」,就能解決這些問題。

輸入 Action API;chrome.actionchrome.browserAction 最類似,但有一些明顯的差異。

首先,chrome.action 引進了名為 getUserSettings() 的新方法。這個方法可讓擴充功能開發人員檢查使用者是否已將擴充功能的動作釘選到工具列。

let userSettings = await chrome.action.getUserSettings();
console.log(`Is the action pinned? ${userSettings.isOnToolbar ? 'Yes' : 'No'}.`);

與「isPinned」相比,這項功能的「getUserSettings」看起來像是個不尋常的名稱,但 Chrome 的動作記錄顯示瀏覽器 UI 的變更速度比擴充功能 API 更快。因此,這個 API 的目標是在一般介面中公開動作相關使用者偏好設定,藉此盡量減少日後的 API 流失。此外,這項政策還可讓其他瀏覽器供應商在這個方法傳回的 UserSettings 物件中顯示瀏覽器專屬的 UI 概念。

第二,擴充功能動作的圖示和啟用/停用狀態可以使用 Declarative Content API 控制。這項功能的重要性在於,擴充功能可讓擴充功能回應使用者的瀏覽行為,而無需存取內容,甚至是造訪的網頁網址。舉例來說,讓我們看看當使用者造訪 example.com 上的網頁時,擴充功能如何啟用其動作。

// Manifest V3
chrome.runtime.onInstalled.addListener(() => {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: {hostSuffix: '.example.com'},
          })
        ],
        actions: [new chrome.declarativeContent.ShowAction()]
      }
    ]);
  });
});

上述程式碼幾乎與擴充功能處理網頁動作的方式幾乎相同。唯一的差別在於,在 Manifest V3 中,我們在 Manifest V2 中使用 declarativeContent.ShowAction,而非 declarativeContent.ShowPageAction

最後,內容攔截器可以使用 DeclarativeNetRequest API 的 setExtensionActionOptions) 方法,顯示擴充功能在特定分頁中封鎖的要求數量。這項功能非常重要,因為可讓內容攔截器讓使用者掌握情況,而不會向擴充功能公開可能具敏感性的瀏覽中繼資料。

總結

翻新 Chrome 擴充功能平台是 Manifest V3 的主要動機之一。在許多情況下,都必須改用新技術,同時也能簡化 API 介面,這就是我們的目標。

希望這篇文章有助於您稍微瞭解 Manifest V3 平台的這個角落。如要進一步瞭解 Chrome 團隊如何因應瀏覽器擴充功能的未來發展,請參閱開發人員說明文件中的平台願景Manifest V3 總覽頁面。您也可以透過 chromium-extensions Google 網路論壇,與其他開發人員討論 Chrome 擴充功能。