一年前,我們在 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 網站上