我們在 2022 年 5 月在 Chrome 中新增了側邊面板。這是新的隨附介面，可讓使用者在正在瀏覽的內容旁使用工具。今天，我們很高興在此宣布，自 Chrome 114 起，擴充功能將開始在側邊面板中顯示內容。
對使用者而言更便利
我們已經看過許多開發人員在擴充功能中實作類似側欄的體驗，因此很高興將其納入平台標準。透過全新的Side Panel API，您現在可以提供永久的 UI，在使用者造訪的頁面旁開啟。使用者若能在擴充功能之間使用相同的定位和版面配置，就能從中受益。此外，無需要求主機權限也能顯示 UI 功能，可大幅保障使用者的隱私權，同時減少擴充功能在安裝時顯示的警告次數的額外優勢。
Side Panel API 可用來消除將內容插入不受信任的頁面的相關頭痛。此外，這麼做還能大幅降低維護不同網站相容性的需求，以及瀏覽錯誤報告，瞭解擴充功能造成的意外中斷情形。
可供網路上的使用者
在擴充功能中打造新的側邊面板體驗時，請記住一點：您如何協助使用者在網路上完成工作？請思考以下幾個問題：
- 我的側邊面板如何協助使用者？
- 「單一用途」政策也適用於側邊面板。確認側邊面板提供的功能與擴充功能的其餘部分和使用者想達成的目標直接相關。
- 我的側邊面板只會在找到相關的時顯示嗎？
- Side Panel API 可讓您選擇要向使用者顯示側邊面板的網站。如此一來，當廣告與使用者無關或與使用者瀏覽的內容無關時，就可以避免顯示。
- 設計與擴充功能的其餘部分一致嗎？
- 側邊面板應採用賞心悅目的設計，與擴充功能和商店資訊中的標誌、顏色、圖示和字型相符。因此無論使用者在何處使用擴充功能，都能享有一致且容易辨識的體驗。
- 使用者如何找到我的側邊面板？
- 在擴充功能中提供充分的文件或訓練課程，讓新使用者瞭解如何使用側邊面板。這有助於您留住使用者，並避免商店資訊出現負面評論。別忘了，您可以在使用者安裝擴充功能前，先在商店資訊中加入 YouTube 影片，說明擴充功能的運作方式！
此外，我們也更新了計畫政策，將「最佳做法」和「品質指南」一節的內容更新，以反映上述幾點注意事項。這些異動強調，側邊面板必須提供輔助功能，才能有效提升使用者的瀏覽體驗。同時也清楚呈現側邊面板不應出現不必要的干擾。
API 總覽
如要讓擴充功能顯示在側邊面板中，請在資訊清單中要求 "sidePanel" 權限，然後使用 "default_path" 並指向擴充功能中網頁的 "default_path" 新增 "side_panel" 鍵：
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
您可以在側邊面板頁面上載入指令碼和來電額外資訊 API，就像在任何其他擴充功能頁面上一樣。側邊面板的圖示會取自擴充功能的圖示，別忘了進行一些調整。
額外功能
你可以將側邊面板連結至動作圖示，以便隨時輕鬆開啟：
service-worker.js：
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
如果您只想在特定頁面上顯示側邊面板，可以自行控管，避免在與使用者無關的其他位置顯示側邊面板：
service-worker.js：
chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
if (!tab.url) return;
const url = new URL(tab.url);
if (url.origin === 'https://example.com') {
chrome.sidePanel.setOptions({ tabId, path: 'sidepanel.html', enabled: true });
} else {
chrome.sidePanel.setOptions({ tabId, enabled: false });
}
});
瞭解詳情
我們發布了 Side Panel API 說明文件，您現在可立即開始閱讀。我們也在 chrome-extensions-samples 存放區中新增了範例，方便您查看 API 實際使用的方式。
如先前所述，我們也修訂了政策頁面和最佳做法，進一步分享如何打造能帶來最佳使用者體驗的側邊面板。
如要隨時掌握 Chrome 擴充功能的最新消息，請前往「最新消息」頁面。如果您對 Side Panel API 有任何疑問或需要協助，請造訪 Chromium 擴充功能 Google 網路論壇。
相片來源：Vardan Papikyan，發表於 Unsplash 網站上