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 junto com o conteúdo em que estão navegando. Hoje, temos o prazer de anunciar que sua extensão poderá 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
Muitos desenvolvedores já implementam experiências semelhantes a barras laterais nas extensões, e é por isso que estamos felizes em tornar esse app um padrão da plataforma. Com a nova API Side Panel, agora é possível oferecer uma IU persistente que é aberta ao lado de uma página que o usuário está visitando. Os usuários vão se beneficiar do posicionamento e do layout consistentes entre as extensões. Além disso, a capacidade de mostrar a interface sem solicitar permissões de host proporciona uma grande vantagem em termos de privacidade para os usuários, com o benefício 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 entre diferentes sites e filtrar relatórios de bugs sobre interrupções acidentais causadas pela extensão.
Um complemento para os usuários na Web
Ao criar uma nova experiência de painel lateral como parte da sua extensão, você precisa ter em mente: como você ajuda os usuários a concluir tarefas na Web? Aqui estão algumas perguntas que você deve 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 fornece funcionalidades diretamente relacionadas ao restante da sua extensão e ao que o usuário está tentando alcançar.
- Meu painel lateral só aparece quando é relevante?
- A API Side Panel permite que você escolha em quais sites os usuários vão ver o painel lateral. Assim, você evita a exibição quando não é relevante ou relacionado ao conteúdo que o usuário está procurando.
- 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 estejam usando sua extensão.
- Como os usuários descobrem meu painel lateral?
- Mostre aos novos usuários como usar seu painel lateral com documentação ou treinamento suficiente na extensão. Isso ajudará você a reter usuários e evitar avaliações ruins na página "Detalhes do app". Para começar a ensinar os usuários antes que eles instalem a extensão, inclua 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 deve atuar como um complemento útil para as experiências de navegação dos usuários, fornecendo funcionalidades complementares. Eles também deixam claro que seu painel lateral não deve ter distrações desnecessárias.
Uma visão geral da API
Para que sua extensão apareça no painel lateral, solicite a permissão "sidePanel" no seu 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"
]
...
}
Em uma página do painel lateral, é possível carregar scripts e chamar APIs de extensão como você faria em qualquer outra página de extensões. O ícone do painel lateral será usado no ícone da extensão. Não se esqueça de configurá-lo para dar um toque especial.
Recursos extras
Vincule o painel lateral ao ícone de ação para abrir 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, 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 mesmo. Também adicionamos exemplos ao repositório chrome-extensions-samples, que é um ótimo lugar para entender 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 mostrar mais sobre como criar um painel lateral que proporcione a melhor experiência aos usuários.
Para acompanhar as novidades sobre a extensão do Chrome, acesse 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.