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 em suas extensões, o que é e por isso estamos felizes em torná-lo um padrão de plataforma. Com a nova API Side Panel, você agora podem oferecer uma IU persistente que é aberta ao lado de uma página que o usuário está visitando. Os usuários vão se beneficiam de posicionamento e layout consistentes entre as extensões. Além disso, a capacidade de mostrar interface sem solicitar permissões de host é uma grande vantagem da privacidade para os usuários, além de se beneficiam 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 a necessidade de manter a compatibilidade em sites diferentes e analisar relatórios de bugs sobre interrupções acidentais causadas pelo .
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 manter algo em 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 deve atuar como um complemento útil para os insights experiências de navegação, fornecendo 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 outro página de extensão. O ícone do painel lateral será retirado da extensão icon – não se esqueça de fazer essa configuraçã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 de aparecer 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)