Год назад, в мае 2022 года, мы добавили в Chrome боковую панель. Это новая сопутствующая поверхность, которая позволяет пользователям использовать инструменты наряду с контентом, который они просматривают. Сегодня мы рады сообщить, что ваше расширение может начать отображать контент на боковой панели, начиная с Chrome 114.
Лучше для пользователей, проще для разработчиков
Мы уже видели, как многие разработчики реализовали в своих расширениях возможности, подобные боковой панели, поэтому мы очень рады сделать это стандартом платформы. Благодаря новому API боковой панели теперь вы можете предложить постоянный пользовательский интерфейс, который открывается рядом со страницей, которую посещает пользователь. Пользователи получат выгоду от единообразного позиционирования и макета между расширениями. Кроме того, возможность отображать пользовательский интерфейс без запроса разрешений хоста является значительным преимуществом конфиденциальности для пользователей, а дополнительным преимуществом является уменьшение количества предупреждений, отображаемых для вашего расширения во время установки.
API боковой панели устраняет головную боль, связанную с внедрением контента на ненадежную страницу. Это также значительно снижает требования к поддержанию совместимости между различными сайтами и анализу отчетов об ошибках, связанных со случайными сбоями, вызванными вашим расширением.
Компаньон для пользователей в Интернете
Создавая новую боковую панель как часть вашего расширения, вам необходимо помнить одну вещь: как вы помогаете пользователям выполнять задачи в Интернете? Вот несколько вопросов, которые вам следует рассмотреть:
- Как моя боковая панель помогает пользователю?
- Политика единого назначения также применяется к вашей боковой панели. Убедитесь, что ваша боковая панель обеспечивает функциональность, которая напрямую связана с остальной частью вашего расширения и тем, чего пытается достичь пользователь.
- Моя боковая панель появляется только тогда, когда это актуально?
- API боковой панели позволяет вам выбирать, на каких сайтах ваши пользователи будут видеть боковую панель. Таким образом, вы можете избежать его показа, когда он не имеет отношения к пользователю или не связан с контентом, который он просматривает.
- Соответствует ли дизайн остальной части моего расширения?
- Ваша боковая панель должна иметь визуально привлекательный дизайн, соответствующий логотипу, цветам, значкам и шрифтам вашего расширения и списка магазинов. Это обеспечивает пользователям единообразный и узнаваемый опыт, где бы они ни использовали ваше расширение.
- Как пользователи узнают мою боковую панель?
- Сообщите новым пользователям, как использовать вашу боковую панель, предоставив достаточную документацию или обучение в рамках расширения. Это поможет вам сохранить пользователей и избежать плохих отзывов на странице вашего магазина. Помните, что вы можете начать обучать пользователей еще до того, как они установят расширение, включив на страницу своего магазина видео YouTube , показывающее, как работает ваше расширение!
Мы также обновили наши правила программы , включив обновления в разделы «Лучшие практики » и «Руководства по качеству» , чтобы отразить некоторые из этих соображений. Эти изменения подчеркивают, что ваша боковая панель должна выступать в качестве полезного помощника при просмотре страниц пользователями, предоставляя дополнительные функции. Они также дают понять, что на вашей боковой панели не должно быть ненужных отвлекающих факторов.
Обзор API
Чтобы ваше расширение отображалось на боковой панели, запросите разрешение "sidePanel" в своем манифесте и добавьте ключ "side_panel" с "default_path" , указывающим на страницу внутри вашего расширения:
манифест.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
На странице боковой панели вы можете загружать сценарии и вызывать API расширений, как и на любой другой странице расширения. Значок вашей боковой панели будет взят из значка вашего расширения — не забудьте установить его для дополнительной доработки.
Дополнительные возможности
Вы можете связать боковую панель со значком действия, чтобы ее можно было легко открыть в любое время:
сервис-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
Если вы хотите, чтобы ваша боковая панель отображалась только на определенных страницах, вы можете контролировать это и запретить ее появление в других местах, где она не имеет отношения к пользователю:
сервис-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, посетив нашу страницу «Что нового» , а если у вас есть вопросы или вам нужна помощь с API боковой панели, вы можете посетить группу Google по расширениям Chromium .
Фото Вардана Папикяна на Unsplash