Há um ano, em maio de 2022, adicionamos o painel lateral ao Chrome. Essa é uma nova superfície complementar que permite aos usuários usar ferramentas junto com o conteúdo que estão navegando. Hoje, temos o prazer de anunciar que sua extensão pode começar a mostrar conteúdo no painel lateral, a partir do Chrome 114.
Melhor para os usuários, mais fácil para os desenvolvedores
Já vimos muitos desenvolvedores implementarem experiências semelhantes à barra lateral na extensão. Por isso, estamos muito felizes em torná-la um padrão de plataforma. Com a nova API Side Panel, você agora pode oferecer uma interface persistente que é aberta ao lado de uma página que o usuário está visitando. Os usuários se beneficiarão do posicionamento e layout consistentes entre as extensões. Além disso, a capacidade de mostrar a interface sem solicitar permissões de host é uma vitória significativa de privacidade para os usuários, com o benefício adicional de reduzir o número de avisos que aparecem para sua extensão no momento da instalação.
A API Side Panel elimina as dores de cabeça associadas à injeção de conteúdo em uma página não confiável. Ela também reduz significativamente o requisito de manter a compatibilidade em diferentes sites e de analisar relatórios de bugs sobre interrupções acidentais causadas pela extensão.
Um companheiro para usuários em toda a Web
Ao criar uma nova experiência de painel lateral como parte da extensão, você precisa ter uma coisa em mente: como você está ajudando os usuários a concluir tarefas na Web? Confira algumas perguntas que você precisa considerar:
- Como meu painel lateral ajuda o usuário?
- A política de finalidade única também se aplica ao painel lateral. Verifique se o painel lateral oferece funcionalidades diretamente relacionadas ao restante da extensão e ao que o usuário está tentando alcançar.
- Meu painel lateral só aparece quando é relevante?
- A API Side Panel permite escolher em quais sites os usuários vão ver o painel lateral. Dessa forma, você pode evitar mostrá-lo quando não for relevante para o usuário ou não estiver relacionado ao conteúdo que ele está navegando.
- O design é consistente com o restante da minha extensão?
- O painel lateral precisa ter um design visualmente atraente que corresponda ao logotipo, às cores, aos ícones e às fontes da extensão e da página Detalhes do app. Isso oferece aos usuários uma experiência consistente e reconhecível em qualquer lugar em que eles estejam usando a extensão.
- Como os usuários descobrem meu painel lateral?
- Informe aos novos usuários como usar o painel lateral fornecendo documentação ou treinamento suficiente na extensão. Isso vai ajudar você a reter usuários e evitar avaliações ruins na página Detalhes do app. Lembre-se de que você pode começar a ensinar os usuários antes de instalarem a extensão, incluindo um vídeo do YouTube que mostre como a extensão funciona na página Detalhes do app.
Também atualizamos nossas políticas do programa, com atualizações nas seções de práticas recomendadas e diretrizes de qualidade para refletir algumas dessas considerações. Essas mudanças destacam que o painel lateral precisa atuar como um companheiro útil para as experiências de navegação dos usuários, fornecendo funcionalidades complementares. Elas também deixam claro que o painel lateral não pode ter distrações desnecessárias.
Visão geral da API
Para que a extensão apareça no painel lateral, solicite a permissão "sidePanel" no manifesto e adicione a chave "side_panel" com um "default_path" apontando para uma página na extensão:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
Em uma página do painel lateral, você pode carregar scripts e chamar APIs de extensão como faria em qualquer outra página de extensão. O ícone do painl lateral será extraído do ícone da extensão. Não se esqueça de definir isso para um toque extra de polimento.
Recursos extras
Você pode vincular o painel lateral ao ícone de ação para que ele possa ser aberto facilmente a qualquer momento:
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
Se você quiser que o painel lateral apareça apenas em páginas específicas, é possível controlar isso e impedir que ele apareça em outros lugares em que não seja relevante para o usuário:
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 });
}
});
Saiba mais
Publicamos a documentação da API Side Panel, que você pode começar a ler hoje. Também adicionamos exemplos ao repositório chrome-extensions-samples, que é um ótimo lugar para ver como a API pode ser usada na prática.
Como mencionado, nossas páginas de políticas e práticas recomendadas também foram revisadas para compartilhar mais informações sobre como criar um painel lateral que ofereça a melhor experiência para os usuários.
Você pode acompanhar as notícias sobre extensões do Chrome acessando nossa página Novidades. Se tiver dúvidas ou precisar de ajuda com a API Side Panel, acesse o Grupo do Google de extensões do Chromium.