Год назад, в мае 2022 года, мы добавили боковую панель в Chrome. Это новая дополнительная панель, позволяющая пользователям использовать инструменты рядом с просматриваемым контентом. Сегодня мы рады сообщить, что ваше расширение может начать отображать контент на боковой панели, начиная с Chrome 114.
Лучше для пользователей, проще для разработчиков.
Мы уже видели, как многие разработчики внедряют в свои расширения элементы, похожие на боковые панели, поэтому мы рады сделать это стандартом платформы. Благодаря новому API боковой панели вы теперь можете предлагать постоянно отображаемый пользовательский интерфейс, который открывается рядом со страницей, которую посещает пользователь. Пользователи получат выгоду от единообразного позиционирования и компоновки между расширениями. Кроме того, возможность отображения пользовательского интерфейса без запроса разрешений хоста является значительным преимуществом с точки зрения конфиденциальности для пользователей, а также позволяет уменьшить количество предупреждений, отображаемых для вашего расширения во время установки.
API боковой панели избавляет от проблем, связанных с внедрением контента на ненадежную страницу. Он также значительно снижает необходимость обеспечения совместимости на разных сайтах и анализа сообщений об ошибках, связанных со случайными сбоями, вызванными вашим расширением.
Помощник для пользователей по всему интернету
При создании новой боковой панели в рамках вашего расширения необходимо помнить об одном: как вы помогаете пользователям выполнять задачи в интернете? Вот несколько вопросов, которые следует рассмотреть:
- Какую пользу моя боковая панель приносит пользователю?
- Принцип "одноцелевого назначения" также распространяется на вашу боковую панель. Убедитесь, что ваша боковая панель предоставляет функциональность, которая напрямую связана с остальной частью вашего расширения и с тем, чего пытается достичь пользователь.
- Боковая панель отображается только тогда, когда это необходимо?
- 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, посетив нашу страницу «Что нового» , а если у вас есть вопросы или вам нужна помощь с API боковой панели, вы можете посетить группу Google по расширениям Chromium .