一年前的 2022 年 5 月，我们在 Chrome 中添加了侧边栏。这是一款全新的辅助界面，可让用户在浏览内容的同时利用各种工具。今天，我们很高兴地宣布，从 Chrome 114 开始，您的扩展程序将可以在侧边栏中显示内容。
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">对用户更好，对开发者来说也更简单
我们已经见证了许多开发者在其扩展程序中实现了类似于边栏的体验， 我们为什么非常高兴能够将其打造成平台标准。借助新的 Side Panel API， 现在可以提供常驻界面，并在用户访问的页面旁边打开。用户将 可在扩展程序之间使用一致的位置和布局获益。此外，系统还可以展示 界面无需请求主机权限，对用户隐私大有帮助，添加 这样做的好处是，可以减少在安装扩展程序时显示的警告数量。
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，拍摄者：Unshot