一年前 (2022 年 5 月)，我們在 Chrome 中新增了側邊面板。這是一項全新的隨附介面，可讓使用者在瀏覽內容時使用工具。我們很高興在此宣布，自 Chrome 114 版起，您的擴充功能就能開始在側邊面板中顯示內容。
對使用者而言更便利，開發人員也更容易
許多開發人員已在擴充功能中實作類似側欄的體驗，因此很高興將其納入平台標準。有了新的 Side Panel API，您現在可以提供持續性 UI，讓使用者在瀏覽網頁時一併開啟。使用者會因為擴充功能之間的一致位置和版面配置而受益。此外，不必要求主機權限就能顯示使用者介面，對使用者而言是重大的隱私權勝利，此外，這項功能還可減少在安裝時顯示的擴充功能警告數量。
Side Panel API 可避免在未信任的網頁中插入內容時遇到的麻煩。這也大幅降低了在不同網站上維持相容性的需求，並篩選因擴充功能造成的意外中斷情形的錯誤報告。
隨時隨地為使用者提供協助
在擴充功能中建立新的側邊欄體驗時，請務必牢記一點：您如何協助使用者在網路上完成工作？以下是您應考慮的幾個問題：
- 我的側邊面板如何協助使用者？
- 「單一用途」政策也適用於側邊面板。確認側邊面板提供的功能，與擴充功能的其他部分以及使用者嘗試達成的目標直接相關。
- 側邊面板是否只會在相關情況下顯示？
- 您可以使用 Side Panel API，選擇使用者在哪些網站上看到側邊面板。這樣一來，您就能避免在廣告與使用者不相關，或與使用者正在瀏覽的內容無關時，顯示廣告。
- 設計是否與擴充功能的其他部分一致？
- 側邊面板應採用吸引人的設計，與擴充功能和商店資訊的標誌、顏色、圖示和字型相符。這樣一來，無論使用者在何處使用擴充功能，都能享有一致且易於辨識的體驗。
- 使用者如何發現我的側邊面板？
- 在擴充功能中提供充足的說明文件或訓練，讓新使用者瞭解如何使用側邊面板。這有助於留住使用者，並避免商店資訊出現負面評論。別忘了，你可以在商店資訊中加入YouTube 影片，說明擴充功能的運作方式，讓使用者在安裝前先行瞭解！
我們也更新了計畫政策，其中的最佳做法和品質指南章節也已更新，反映部分上述考量。這些異動特別指出側邊面板應提供相輔相成的功能，有效提升使用者的瀏覽體驗。他們也明確指出，側邊面板不應包含不必要的干擾內容。
API 總覽
如要讓擴充功能顯示在側邊面板中，請在資訊清單中要求 "sidePanel" 權限，然後新增 "side_panel" 鍵，並讓 "default_path" 指向擴充功能中的網頁：
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 擴充功能的最新消息，請造訪我們的新功能頁面。如果您對側邊欄 API 有任何問題或需要協助，歡迎加入 Chromium 擴充功能 Google 討論群組。
相片來源：Vardan Papikyan 發表於 Unsplash 網站上