Como visualizar o código-fonte de uma extensão do Chrome

Cum să vizualizați codul sursă al unei extensii Chrome
⏱️ 4 min read

As extensões que você instala no navegador Chrome em seu computador nada mais são do que um grupo de arquivos de código-fonte que fazem as atividades predefinidas. Algumas mentes curiosas podem querer ver o código exato que constrói essas extensões. Embora visualizar o código-fonte de uma página da web no Chrome seja tão fácil quanto clicar com o botão direito do mouse na página e selecionar uma opção, acessar o código-fonte de uma extensão do Chrome não é tão fácil.

No entanto, isso não deve impedi-lo de visualizar o código-fonte de uma extensão. Usando os dois métodos a seguir, você poderá visualizar o código-fonte de uma extensão do Chrome em seu computador.

Os métodos a seguir são demonstrados usando um Mac.

Visualize o código-fonte de uma extensão do Chrome no File Explorer

Embora os arquivos das extensões que você instala no Chrome sejam salvos no seu computador, eles não são muito fáceis de encontrar, pois os nomes das pastas são científicos. No entanto, com o método abaixo, você poderá revelar as pastas onde os arquivos de origem da extensão estão localizados.

1. Abra o Chrome em seu computador e digite chrome://extensions na barra de endereço e pressione Enter. Isso abrirá a lista de extensões no navegador.

2. Quando a página de extensões for aberta, selecione a caixa rotulada como “Modo de desenvolvedor” no canto superior direito. Ele deve permitir que você veja mais detalhes sobre as extensões na página.

extsource-developer

3. Agora você deve ser capaz de ver os IDs dos ramais mostrados na tela. O que você precisa fazer aqui é anotar o ID da extensão cujos arquivos de código-fonte você deseja ver.

No exemplo a seguir, destaquei o ID da extensão “Adblock para Youtube”. Estarei revelando o código-fonte desta extensão nas etapas a seguir.

extsource-id

4. Agora que você tem o ID da extensão, digite chrome://version na barra de endereço do seu navegador e pressione Enter. Deve ajudá-lo a localizar a pasta onde existem arquivos de extensão.

extsource-version

5. Na página da versão do Chrome, realce e copie o valor de “Caminho do Perfil” para a área de transferência. Isso é mostrado na imagem a seguir.

extsource-profile

6. Abra o Finder (ou o gerenciador de arquivos do seu sistema operacional). Clique em “Go” na parte superior e selecione “Go to Folder…” Isso permitirá que você acesse a pasta de extensões em seu Mac.

extsource-goto

7. Cole o caminho do perfil que você copiou para a área de transferência no painel Ir para a pasta e clique em “Ir” para abrir essa pasta em uma janela do Finder.

extsource-path

8. Clique duas vezes na pasta “Extensões” na tela seguinte para abrir a pasta onde todas as suas extensões estão disponíveis.

O que você verá aqui é uma série de pastas com alguns nomes confusos. Embora essas pastas sejam para as extensões que você instalou no Chrome, elas não têm o mesmo nome da extensão e, portanto, é difícil encontrar a pasta para a sua extensão.

Agora procure a pasta que tem o mesmo nome do ID de extensão que você anotou em uma das etapas acima. Essa é a pasta da sua extensão.

extsource-folder

9. Todos os arquivos de extensão devem estar na pasta, e você pode abri-los com seu editor favorito para ver seus códigos.

É assim que você pode visualizar o código-fonte de uma extensão do Chrome sem usar uma ferramenta de terceiros. Se você não se importa em instalar uma extensão, a seção a seguir é para você.

Ver o código-fonte de uma extensão do Chrome usando uma extensão

1. Abra o Chrome em seu computador, vá para o Visualizador de fonte de extensão do Chrome página na Chrome Web Store e clique em “Adicionar ao Chrome”.

extsource-add

2. Clique em “Adicionar extensão” na tela seguinte.

extsource-prompt

3. Depois que a extensão for adicionada ao seu navegador, abra a página de uma extensão na Chrome Web Store, como a página de extensão Markdown Preview.

Quando a página for carregada, clique no ícone CRX na barra de extensões do Chrome e selecione “Exibir fonte”.

extsource-crx

4. Você deve ser capaz de ver o código-fonte da extensão selecionada na janela do Chrome.

código-fonte

Conclusão

Se você está curioso para ver os códigos-fonte das extensões que instala em seu navegador, o guia acima deve ajudá-lo a fazer exatamente isso de duas maneiras fáceis.

Crédito da imagem: Código fonte Clef

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Avatar of Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

Você pode gostar...

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x