Uma nova maneira de iniciar sua jornada de desenvolvimento das extensões do Chrome

Amy Steam
Amy Steam

Nesta postagem, temos o prazer de compartilhar algumas melhorias significativas na experiência inicial da extensão do Chrome e algumas maneiras de participar desse sonho.

O guia antigo

Antes, o tutorial de primeiros passos da extensão do Chrome era um exemplo básico que mudava a cor do plano de fundo da página atual quando o usuário clicava em um botão no pop-up da extensão. Também havia uma página de opções em que você podia escolher uma das quatro cores.

Esse exemplo básico não demonstrou como adicionar os recursos mais usados nas extensões reais. Era hora de uma reformulação.

Uma nova abordagem

Sabemos que os desenvolvedores contam com nossa documentação para iniciar a jornada de aprendizado da extensão do Chrome, e nosso objetivo é oferecer um caminho acessível, fácil de começar e relevante. Em vez de tentar melhorar o exemplo de tutorial atual, decidimos começar do zero.

Apresentamos a coleção nova e aprimorada Como começar:

Introdução às extensões
Abordamos brevemente alguns conceitos fundamentais do desenvolvimento de extensões do Chrome, como tecnologias da Web e os componentes de extensão usados com frequência. Além disso, a política inclui o que você precisa saber ao projetar e distribuir uma extensão na Chrome Web Store.
Conceitos básicos de desenvolvimento
Introduz o fluxo de trabalho de desenvolvimento de extensões criando um exemplo em Hello, Extensions. Ela mostra como carregar a extensão durante o desenvolvimento, localizar registros e erros, escolher uma estrutura de projeto e usar o Typescript.
Tutorial do tempo de leitura
É bom saber quanto tempo precisamos para terminar de ler um artigo. O recurso Tempo de leitura ensina a inserir um elemento contendo o tempo de leitura estimado em cada página de documentação de extensão.
Tutorial do modo de foco
Remover a confusão em uma página permite que nossas mentes se concentrem nas informações mais relevantes. O "Modo sem distrações" mostra como mudar o estilo da página e ocultar alguns elementos que causam distrações.
Tutorial do gerenciador de guias
Ao pesquisar desenvolvimento de extensões, você pode acabar com muitas guias de documentação em várias janelas. O Gerenciador de guias organiza as guias da documentação da extensão do Chrome e da Chrome Web Store.

Esses tutoriais não só ensinam como criar extensões reais, mas também compartilham dicas de desenvolvimento e práticas recomendadas. Além disso, o uso dessas extensões melhorará sua experiência durante a leitura da documentação da extensão.

O que esperar

Cada tutorial inclui as seguintes seções:

  • A tarefa que a extensão vai realizar.
  • As lições que serão abordadas.
  • O que você precisa saber antes de começar.
  • Instruções passo a passo para criar a extensão.
  • Como carregar e testar a extensão.

Se quiser encarar um desafio, incluímos uma seção com algumas ideias sobre como personalizar ou adicionar outros recursos à sua extensão.

Queremos sua ajuda

Queremos muito saber sua opinião. Se você notar algo errado ou pouco claro nesses guias, informe um bug no nosso repositório do GitHub (link em inglês).

Acreditamos que o novo Guia explicativo é uma melhoria significativa em relação ao antigo, mas não vamos parar por aqui. Vamos continuar trabalhando para melhorar e expandir nossa documentação para atender melhor a todos os desenvolvedores de extensões.


Foto de Vardan Papikyan no Unsplash.