Há um ano, em maio de 2022, adicionamos o painel lateral ao Chrome. Essa é uma nova plataforma complementar que permite aos usuários usar ferramentas com o conteúdo em 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 implementar experiências semelhantes à barra lateral nas extensões. Por isso, estamos felizes em torná-la um padrão da plataforma. Com a nova API Side Panel, agora é possível oferecer uma interface persistente que é aberta ao lado da página que o usuário está visitando. Os usuários vão se beneficiar de um 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. Isso também reduz significativamente a necessidade de manter a compatibilidade em diferentes sites e analisar relatórios de bugs sobre interrupções acidentais causadas pela sua extensão.
Um companheiro para os usuários na Web
Ao criar uma nova experiência de painel lateral como parte da sua extensão, você precisa se lembrar de uma coisa: como você está ajudando os usuários a concluir tarefas na Web? Aqui estão algumas perguntas a serem consideradas:
- Como meu painel lateral ajuda o usuário?
- A política de uso único também se aplica ao painel lateral. O painel lateral precisa oferecer uma funcionalidade que se relacione diretamente com o restante da extensão e com o que o usuário está tentando fazer.
- Meu painel lateral só aparece quando é relevante?
- A API Side Panel permite escolher em quais sites o painel lateral vai aparecer para os usuários. Dessa forma, você evita a exibição quando não é relevante para o usuário ou não está relacionada ao conteúdo que o usuário está navegando.
- O design é consistente com o restante da extensão?
- O painel lateral precisa ter um design visualmente atraente que combine com o logotipo, as cores, os ícones e as fontes da extensão e da página "Detalhes do app". Isso proporciona aos usuários uma experiência consistente e reconhecível onde quer que eles estejam usando sua extensão.
- Como os usuários descobrem meu painel lateral?
- Deixe os novos usuários saberem como usar o painel lateral fornecendo documentação ou treinamento suficiente na extensão. Isso ajudará você a reter usuários e evitar avaliações negativas na página "Detalhes do app". Você pode começar a ensinar os usuários antes de eles instalarem a extensão. Basta incluir um vídeo do YouTube que mostre como ela funciona na página "Detalhes do app".
Também atualizamos as 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 ser útil para a experiência de navegação dos usuários, oferecendo funcionalidades complementares. Eles também deixam claro que o painel lateral não deve 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 manifest e adicione a chave "side_panel" com um "default_path" apontando para uma página na sua extensão:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
Em uma página do painel lateral, é possível carregar scripts e chamar APIs de extensão como em qualquer outra página de extensão. O ícone do painel lateral será retirado do ícone da extensão. Não se esqueça de fazer essa definição para dar um toque extra.
Recursos extras
É possível 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 quiser que o painel lateral apareça apenas em páginas específicas, controle isso e evite que ele apareça em outros lugares onde 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, um ótimo lugar para conferir 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 proporcione a melhor experiência aos usuários.
Para ficar por dentro das novidades das extensões do Chrome, acesse nossa página de novidades. Se você tiver dúvidas ou precisar de ajuda com a API Side Panel, acesse o grupo do Google Extensões do Chromium.
Foto de Vardan Papikyan no Unsplash