一年前，也就是 2022 年 5 月，我们向 Chrome 添加了侧边栏。这是一种新的辅助界面，可让用户在浏览内容的同时使用工具。今天，我们很高兴地宣布，从 Chrome 114 开始，您的扩展程序可以在侧边栏中显示内容。
更适合用户，更方便开发者
我们已经看到许多开发者在其扩展程序中实现了类似侧边栏的体验，因此我们很高兴能将其设为平台标准。借助新的侧边栏 API，您现在可以提供一个持久性界面，该界面会与用户正在访问的页面一起打开。用户将受益于扩展程序之间一致的定位和布局。此外，无需请求主机权限即可显示界面，这对于用户来说是一项重大的隐私保护改进，同时还可减少在安装时针对您的扩展程序显示的警告数量。
侧边栏 API 可消除将内容注入不受信任的网页时带来的麻烦。此外，它还可大幅降低在不同网站上保持兼容性的要求，并减少因扩展程序导致意外中断而需要过滤的 bug 报告。
面向网络用户的配套应用
在构建新的侧边栏体验作为扩展程序的一部分时，您需要牢记一件事：如何帮助用户在整个网络中完成任务？以下是一些您应该考虑的问题：
- 侧边栏如何帮助用户？
- 单用途政策也适用于您的侧边栏。请确保侧边栏提供的功能与扩展程序的其余部分以及用户尝试实现的目标直接相关。
- 侧边栏是否仅在相关时显示？
- 借助边栏 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 });
}
});
了解详情
我们已发布侧边栏 API 文档，您可以立即开始阅读。我们还在 chrome-extensions-samples 代码库中添加了示例，您可以在其中了解如何在实践中使用该 API。
如上所述，我们还修订了政策页面和最佳实践，以便更详细地介绍如何构建能够为用户提供最佳体验的侧边栏。
您可以访问我们的“新变化”页面，及时了解 Chrome 扩展程序的最新动态；如果您对 Side Panel API 有任何疑问或需要相关帮助，可以访问 Chromium 扩展程序 Google 群组。