一年前，我們在 2022 年 5 月為 Chrome 新增了側邊面板。這是新的隨播廣告介面，可讓使用者搭配使用工具與瀏覽的內容。今天很高興在此宣布，自 Chrome 114 版起，你的擴充功能可以開始在側邊面板中顯示內容。
對使用者而言更便利，開發人員也更容易
許多開發人員已在擴充功能中實作類似側欄的體驗，因此很高興將其納入平台標準。您現在可以使用新的 Side Panel API，提供永久 UI，在使用者造訪的頁面旁邊開啟。每個擴充功能之間的定位和版面配置都一致，因此能帶給使用者好處。此外，在不要求主機權限的情況下顯示 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 擴充功能的最新消息，歡迎造訪我們的新功能頁面。如果您對 Side Panel API 有任何疑問或需要協助，請造訪 Chromium 擴充功能 Google 網路論壇群組。
相片來源：Vardan Papikyan 發表於 Unsplash 網站上