一年前，我們在 2022 年 5 月為 Chrome 新增了側邊面板。這是新的隨播廣告介面，可讓使用者搭配使用工具與瀏覽的內容。今天很高興在此宣布，自 Chrome 114 版起，你的擴充功能可以開始在側邊面板中顯示內容。
對使用者而言更便利，開發人員也更容易
目前已有許多開發人員在擴充功能中導入類似側欄的使用體驗， 因此很高興推出這項平台標準。有了新的側邊面板 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 擴充功能的最新消息，歡迎造訪我們的新功能頁面。如果您對 Side Panel API 有任何疑問或需要協助，請造訪 Chromium 擴充功能 Google 網路論壇群組。
相片來源：Vardan Papikyan 發表於 Unsplash 網站上