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 implementarem experiências do tipo barra lateral nas extensões, e é por isso que 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 de uma página visitada pelo usuário. Os usuários se beneficiarão de posicionamento e layout consistentes entre as extensões. Além disso, a capacidade de mostrar a interface sem solicitar permissões de host é uma vantagem de privacidade significativa para os usuários, com a vantagem de reduzir o número de avisos exibidos 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 o requisito de manter a compatibilidade em diferentes sites e a filtragem de relatórios de bugs sobre interrupções acidentais causadas pela extensão.
Um complemento para os usuários em toda a Web
Ao criar uma nova experiência de painel lateral como parte da sua extensão, você precisa ter uma coisa em mente: como você está ajudando os usuários a concluir tarefas na Web? Aqui estão algumas perguntas que você precisa considerar:
- Como meu painel lateral ajuda o usuário?
- A política de propósito único também se aplica ao seu painel lateral. Verifique se o painel lateral oferece uma funcionalidade diretamente relacionada ao restante da extensão e ao que o usuário está tentando fazer.
- Meu painel lateral só aparece quando é relevante?
- A API Side Panel permite escolher em quais sites os usuários vão ter acesso ao painel lateral. 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 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, onde quer que eles estejam usando sua extensão.
- Como os usuários encontram meu painel lateral?
- Forneça documentação suficiente ou treinamento na extensão para que novos usuários saibam como usar o painel lateral. 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 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 complemento útil para as experiências de navegação dos usuários, oferecendo funcionalidade complementar. Eles também deixam claro que o painel lateral não deve ter distrações desnecessárias.
Uma 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 sua extensão:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
Na página do painel lateral, você pode carregar scripts e APIs de extensão de chamada como faria em qualquer outra página de extensões. 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ê já pode ler. Também adicionamos samples 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 proporcione a melhor experiência aos usuários.
Fique por dentro das novidades sobre a extensão do Chrome acessando nossa página "O que há de novo". Se você tiver dúvidas ou precisar de ajuda com a API Side Panel, acesse o Grupo do Google sobre extensões do Chromium.
Foto de Vardan Papikyan no Unsplash (links em inglês)