Extensões para Navegador - Turbinando sua experiência no GitHub
Tags: beginners, programming, github, usability
Published: 2022-04-20 20:44:59

![Extensions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qul561irm9t9t2vnx8yb.png)‎

Atualmente a maioria de nós gasta maior parte de nosso tempo em navegadores da Web em vez de aplicativos de desktop. Assim, para a experiência de navegação e otimizar a produtividade geral, as extensões vieram para nos ajudar cada vez mais. Elas são nada mais que pacotes de software que introduzem funcionalidades adicionais ao seu navegador permitindo que você personalize sua experiência de navegação na Web adicionando recursos com um único clique no mouse, ajudam você a fazer uso efetivo da internet, permitindo que se concentre no seu trabalho, economize dinheiro, torne-se mais eficiente e mantenha suas informações pessoais seguras.‎ 

‎Esses pacotes permitem executar tarefas específicas no navegador e comumente o HTML, CSS e JavaScript são usados por desenvolvedores para criar essas extensões.‎

Agora que falamos um pouco do que são e como funcionam, vamos falar do Github... A equipe do Github, vem fazendo um trabalho sensacional trazendo várias novidades, porém existe algumas coisas que podem ser melhoradas e é isso que essas extensões que mencionaremos atuaram. 

### Nossa lista de extensões

![Code Wing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hoa52mfrpuprn29fu6zn.png)
 

- **Code Wing** - É uma extensão que ajuda você com a next-level code navigation em repositórios contendo código escrito em Python, Java e Go no GitHub. A extensão do navegador é totalmente de código aberto, com o código-fonte completo disponível no GitHub. No entanto, o servidor é uma fonte fechada. Além disso, ele ignora completamente os repositórios privados e apenas envia locais de código para o servidor, mantendo-os seguros.

As principais características desta extensão incluem:

**Hover Docs**: Passe o cursor sobre qualquer variável, função ou classe para ver sua documentação em uma dica de ferramenta destacada por sintaxe.
 
**Pule para a definição variável**: Clicar em qualquer variável, função ou classe permite que você pule para sua definição dentro de um arquivo ou uma pull request. A melhor coisa aqui é que o CodeWing funciona em pull requests, visualizações de arquivos, visualizações diff e blame views

**Entende mais construções linguísticas**: Apenas as funções são reconhecidas pelo GitHub, enquanto o CodeWing também detecta variáveis locais, funções, classes, campos, parâmetros e assim por diante.


| Repo GitHub                                      | Chrome Store                                                                                                 | Mozilla Store |
| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------- |
| [Here](https://github.com/codewing-dev/codewing) | [Here](https://chrome.google.com/webstore/detail/codewing-github-code-navi/njkkfaliiinmkcckepjdmgbmjljfdeee) | NONE          |


- **OctoLinker** - é uma extensão que converte instruções específicas da liguagens, ou em links. Ele utiliza o recurso de conectar dependências definidas em arquivos para sua página de projeto GitHub correspondente.

![Octo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/haa07ue3cu2p8yz2v5pl.png) 

Ele lê o código-fonte que você está visualizando atualmente no navegador ou, em algumas situações, sobre a API do GitHub; assim, nunca haverá qualquer código fonte transferido para um servidor, e o código fonte permanecerá sempre apenas no seu navegador.

![Linker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rs4bomyi4ph08w95mr53.png)

Ele ajuda você a encontrar efetivamente um arquivo dentro do nosso código, chamando um plugin com base no tipo de arquivo, que então executa uma expressão regular no código-fonte para detectar declarações de importação. Enquanto isso, ele usa a [API OctoLinker](https://github.com/OctoLinker/api) em seu navegador para resolver referências de arquivos relacionadas. Da mesma forma, ele usa para resolver as dependências externas usando o nome da dependência e o tipo de registro.

Além disso, ele se conecta aos documentos oficiais da API para facilitar o desenvolvimento mais rápido, o OctoLinker também injeta links se detectar um tipo de arquivo a partir de um trecho de código em um Markdown file, Issue, or Pull Request ou um comentário ajudando assim em revisões de código mais rápidas.

O OctoLinker ajuda você a aproveitar todas essas funcionalidades para repositórios públicos e privados, embora isso exigiria um token de acesso do GitHub para acessar seus repositórios privados. Não se preocupe o token não é enviado para o servidor, em vez disso, ele permanece em seu navegador garantindo uma experiência de navegação segura e segura.

| Repo GitHub                                      | Chrome Store                                                                                  | Mozilla Store                                                      |
| ------------------------------------------------ | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| [Here](https://github.com/OctoLinker/OctoLinker) | [Here](https://chrome.google.com/webstore/detail/octolinker/jlmafbaeoofdegohdhinkhilhclaklkp) | [Here](https://addons.mozilla.org/pt-BR/firefox/addon/octolinker/) |

- **Sourcegraph** - é uma extensão gratuita e de código aberto do Chrome que adiciona navegação de código e inteligência ao GitHub, GitHub Enterprise, GitLab, Bitbucket Server e Phabricator. Ele suporta mais de 20 linguagens de programação e inclui pair com documentação e informações de tipo, definição de variável ou função e localização de importações e dependências.

![Sourcegraph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jt7m4q63jsbbrfzaw1a.png)

‎Ela‎‎ também suporta interfaces com serviços de terceiros, como sobreposições de cobertura codecov, botões de editor aberto e muitos outros. Ele também inclui uma extensa documentação de extensão do navegador para ajudá-lo a tirar o máximo dele.‎

![Sourcegraph docs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xe14btcfd0m0qhl2y3n.png)

‎A implantação auto-hospedada é gratuita para até 10 usuários e suporta hosts de código adicionais. Ele fornece um monte de funcionalidades orientadas à equipe e até mesmo uma avaliação gratuita de 30 dias de recursos somente para empresas para ajudá-lo a construir, escrever, referenciar, corrigir e implantar códigos mais rapidamente. Enquanto isso, o Sourcegraph Cloud permite que os indivíduos acessem seu índice de mais de 1 milhão de repositórios de código aberto facilmente, mas não oferece suporte a recursos corporativos, como gerenciamento de usuários, integração SAML e alterações em lote.‎

| Repo GitHub                            | Chrome Store                                                                                                                      | Mozilla Store                                                                   |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| [Here](https://github.com/sourcegraph) | [Here](https://chrome.google.com/webstore/detail/sourcegraph/dgjhfomjieaadpoljlnidmbgkdffpack/related?utm_source=chrome-ntp-icon) | [Here](https://addons.mozilla.org/pt-PT/firefox/addon/sourcegraph-for-firefox/) |

- **Whats-new-github** - é uma simples extensão que permite verificar as alterações no feed do GitHub desde sua última visita, classificando-as como novas ou antigas. Isso permite que você veja seu feed de forma limpa, simples e fácil, garantindo que você não perca nenhuma atualização essencial na linha do tempo. Diminui as distrações e aumenta o foco, permitindo que você explore seu feed para atividades recentes das pessoas e lugares que você segue.‎

![New or Old](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvpp7vsjq2zp1mtbvpdr.png)

| Repo GitHub                                         | Chrome Store                                                                                           | Mozilla Store                                                                                                                                      |
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Here](https://github.com/flawyte/whats-new-github) | [Here](https://chrome.google.com/webstore/detail/whats-new-on-github/ldleapnlgbkpkabhbkkeangmnfpikahe) | [Here](https://addons.mozilla.org/fy-NL/android/addon/whats-new-github/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=recommended) |


- **Octotree** - é uma excelente extensão que melhora o processo de revisão e exploração de códigos do GitHub, introduzindo uma barra lateral semelhante a vscode que ajuda você a navegar em arquivos de forma eficiente e eficaz dentro de alguns cliques com filtragem de arquivos baseada em árvores e suporte a várias guias.‎

![OctoTree Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgnwctk1bddjof7u3d7v.png)

‎Ele também fornece recursos como avaliações de pull requests, temas de sintaxe, fontes de código personalizadas, temas do GitHub Enterprise, temas de ícones e pesquisas. Possui uma ampla base de usuários, com mais de 400.000 usuários ativos e avaliações de mais de 1000+ 5 estrelas no Chrome.‎

![OctoTree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edsib3vrq07ujwcc9pyu.png)

| Repo GitHub                               | Chrome Store                                                                                                          | Mozilla Store                                                    |
| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| [Here](https://github.com/ovity/octotree) | [Here](https://chrome.google.com/webstore/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc?hl=en-US) | [Here](https://addons.mozilla.org/pt-BR/firefox/addon/octotree/) |

- **Refined GitHub** - A Interface do GitHub tem suas nuances, algumas das quais podem ser simplificadas com pequenas correções e melhorias. Assim, o Refinado GitHub veio para o resgate. Esta extensão é carregada com inúmeros recursos que ajudam a facilitar a experiência do usuário no GitHub.

![Refined GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kp2xk9d9m4m871dlicvf.png)

Alguns dos destaques essenciais desta extensão incluem:

- Faz referências de emissão/RP e URLs em código vinculável.
- Exibe caracteres whitespace.
- Reduza o tamanho das guias para quatro espaços em vez de - - oito.
- Inclui resolverções de conflito de fusão de um clique.
- Inclui avatares de reação para exibir quem reagiu a um comentário.
- Adiciona um botão para desfazer todas as modificações feitas em um arquivo em um RP.
- Coloque um ícone de status build/CI ao lado do nome do repositório.
- Adicione um botão para ver a fonte do arquivo Markdown.
- Exibe PRs que têm impacto no arquivo atual.
- Destaque os comentários conversadores mais úteis.
- Exibe a tag git inicial na qual uma RP mesclada foi incluída.
- Para cada tag/versão, adicione um link ao changelog automático.
- Aumente o número de páginas e alternativas disponíveis para 404 páginas.
- Exibir a idade do repositório na barra lateral.

![Image Extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lw8m2iuta9pbl1d5m6ei.png)

| Repo GitHub                                              | Chrome Store                                                                                            | Mozilla Store                                                           |
| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| [Here](https://github.com/refined-github/refined-github) | [Here](https://chrome.google.com/webstore/detail/refined-github/hlepfoohegkhhmjieoechaddaejaokhf?hl=en) | [Here](https://addons.mozilla.org/pt-BR/firefox/addon/refined-github-/) |

- **GitHub Hovercard** - Traz acesso instantâneo a informações rápidas sobre o usuário, repo, problemas, compromissos e informações de solicitações de qualquer lugar no GitHub.

![Card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s43svhrv5r463e3n14bs.png)

Esta extensão oferece opções para definir temas para o hovercard, definir atrasos ou até mesmo desativar cartões hover em determinadas páginas de projeto para interferência mínima. Uma vez que as pontas das ferramentas podem ser complicadas às vezes, também permite definir a colocação padrão da ponta da ferramenta na tela, permitindo assim uma experiência mais suave.

![Hover cards](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9sigo6ez6h5mhlufgd7g.png)

| Repo GitHub                                          | Chrome Store                                                                                        | Mozilla Store |
| ---------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------------- |
| [Here](https://github.com/Justineo/github-hovercard) | [Here](https://chrome.google.com/webstore/detail/github-hovercard/mmoahbbnojgkclgceahhakhnccimnplk) | NONE          |

- **GitHub File Icons** - Ajuda você a alterar os ícones de arquivo no GitHub, GitLab, gitea e gogs. Isso auxilia o reconhecimento visual de diferentes tipos de arquivos nessas plataformas, pois ter ícones semelhantes para todos os arquivos muitas vezes fica confuso e chato.

![File Icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1b2l7w5bkq5xidsv4tf8.png)

Esta extensão também permite alternar o tema de cores do ícone entre colorido e monocromático, tornando os ícones mais brilhantes e legíveis no modo escuro do GitHub.

| Repo GitHub                                              | Chrome Store                                                                                                 | Mozilla Store                                                             |
| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
| [Here](https://github.com/homerchen19/github-file-icons) | [Here](https://chrome.google.com/webstore/detail/file-icons-for-github-and/ficfmibkjjnpogdcfhfokmihanoldbfe) | [Here](https://addons.mozilla.org/en-US/firefox/addon/github-file-icons/) |

Assim, em poucas palavras, quanto mais extensões do Chrome você emprega, mais eficiência você pode experimentar. Essas extensões atuam como atualizações ao GitHub para desenvolvedores, designers e programadores, permitindo que eles aumentem a produtividade, reduzam as distrações e o conteúdo de origem tudo a partir da conveniência do seu navegador. Torço para que a equipe do GitHub adicione essas melhorias em um feat junto aos desenvolvedores/empresas responsáveis por essas extensões, ia ser bem legal né? (o que, sonhar não é proibido)

Fontes onde pesquisei esse conteúdo:

- https://github.com/codewing-dev/codewing
- https://github.com/OctoLinker/OctoLinker
- https://github.com/sourcegraph
- https://github.com/flawyte/whats-new-github
- https://github.com/ovity/octotree
- https://github.com/refined-github/refined-github
- https://github.com/Justineo/github-hovercard
- https://github.com/homerchen19/github-file-icons