一年前，也就是 2022 年 5 月，我們在 Chrome 中新增了側邊面板。這是全新的輔助介面，可讓使用者在瀏覽內容時使用工具。我們很高興在此宣布，自 Chrome 114 版起，擴充功能可以在側邊面板中顯示內容。
使用者體驗更佳，開發人員更輕鬆
我們發現許多開發人員已在擴充功能中導入類似側邊欄的體驗，因此很高興能將這項功能設為平台標準。有了全新的 Side Panel API，您現在可以提供持續顯示的 UI，與使用者造訪的網頁並排開啟。使用者將可享有擴充功能之間一致的定位和版面配置。此外，不必要求主機權限就能顯示 UI，對使用者來說是隱私權的一大保障，而且還能減少安裝擴充功能時顯示的警告數量。
側邊面板 API 可避免將內容插入不受信任的頁面時發生問題。此外，您也不必再費心維護不同網站的相容性，以及篩選擴充功能導致意外中斷的錯誤報告。
網路使用者的好幫手
在擴充功能中建構新的側邊面板體驗時，請務必思考一個問題：如何協助使用者完成網頁上的工作？以下列出幾個要考量的部分：
- 側邊面板如何協助使用者？
- 側邊面板也須遵守單一用途政策。請確保側邊面板提供的功能與擴充功能的其餘部分直接相關，且與使用者想達成的目標相關。
- 側邊面板是否只會在相關時顯示？
- 側邊面板 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 擴充功能最新消息，請造訪最新消息頁面。如有 Side Panel API 相關問題或需要協助，請前往 Chromium 擴充功能 Google 群組。