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 年擴充功能使用者介面的幾年後,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'}.`);

「getUserSettings」相較之下,這個功能似乎的名稱看起來有點不尋常 「isPinned」,但 Chrome 動作記錄顯示,瀏覽器使用者介面的變更速度比 。因此,我們設計這個 API 的目的,是希望在以下位置顯示與動作相關的使用者偏好設定: 較通用的介面,以盡量減少 API 流失率。其他瀏覽器供應商也能藉此 瀏覽器專屬的 UI 概念 (位於 UserSettings 物件中,這會傳回 方法。

其次,您可以使用 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 中,我們使用的是 declarativeContent.ShowAction Manifest V2 中的 declarativeContent.ShowPageAction

最後,內容攔截器可以使用 declarativeNetRequest API 的 setExtensionActionOptions) 方法,顯示 擴充功能封鎖了特定分頁的要求。這項功能很重要 內容攔截器讓使用者掌握相關資訊,而不揭露敏感的瀏覽中繼資料 加入擴充功能

總結

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

希望這篇文章有助於瞭解 Manifest V3 平台的特定角落。目的地: 如要進一步瞭解 Chrome 團隊如何推動瀏覽器擴充功能的未來發展,請參閱 《平台願景》和《Manifest V3 總覽》頁面 開發人員文件。您也可以前往 chromium-extensions Google 群組。