Manifest V3 中的擴充功能動作

Simeon Vincent
Simeon Vincent

自 Chrome 擴充功能推出以來,開發人員便可使用動作,直接在頂層 Chrome UI 中公開擴充功能。動作是可開啟彈出式視窗或觸發擴充功能中某些功能的圖示按鈕。過去,Chrome 支援兩種動作:瀏覽器動作和網頁動作。Manifest V3 改變了這項情況,在新的 chrome.action API 中整合了這兩種功能。

擴充功能動作簡史

雖然 chrome.action 本身是 Manifest V3 的新功能,但它提供的基本功能可追溯至 2010 年 1 月擴充功能首次穩定推出時。Chrome 擴充功能平台的第一個穩定版本支援兩種不同類型的動作:瀏覽器動作網頁動作

瀏覽器動作可讓擴充功能開發人員在「主要 Google Chrome 工具列的網址列右側」顯示圖示 (來源),並為使用者提供在任何網頁上觸發擴充功能的簡單方法。另一方面,網頁動作的用途是「代表可在目前網頁上採取的動作,但不適用於所有網頁」(來源)。

全方位工具列會顯示網頁動作 (左圖),表示擴充功能可在這個網頁上執行某些動作。瀏覽器動作 (右圖) 一律會顯示在畫面上。

換句話說,瀏覽器動作可讓擴充功能開發人員在瀏覽器中提供持續性的 UI 介面,而網頁動作只會在擴充功能可在目前網頁上執行有用的動作時顯示。

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

大約六年後,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 概念。

其次,您可以使用宣告式內容 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 中使用 declarativeContent.ShowAction,而非 Manifest V2 中的 declarativeContent.ShowPageAction

最後,內容封鎖程式可以使用 declarativeNetRequest API 的 setExtensionActionOptions 方法,顯示擴充功能針對特定分頁封鎖的要求數量。這項功能非常重要,因為它可讓內容封鎖程式向使用者提供資訊,同時不會將可能含有敏感資訊的瀏覽中繼資料洩漏給擴充功能。

總結

翻新 Chrome 擴充功能平台是我們推出 Manifest V3 的主要動機之一。在許多情況下,這意味著要改用新技術,但也意味著要簡化 API 介面,這正是我們的目標。

希望這篇文章能讓您對 Manifest V3 平台的這項功能有更深入的瞭解。如要進一步瞭解 Chrome 團隊如何規劃瀏覽器擴充功能的未來發展,請參閱開發人員說明文件中的「平台願景」和「Manifest V3 總覽」頁面。您也可以在 chromium-extensions Google 網路論壇上,與其他開發人員討論 Chrome 擴充功能。