Como Criar uma Extensão do Chrome Com Seu Código
Muitos usuários querem aprender como fazer uma extensão do Chrome e aprimorar as capacidades de seu navegador. Se você já domina a parte de codificação, não é tão difícil criar uma extensão do Chrome.
Como eu crio uma extensão do Chrome?
1. Crie um arquivo de manifesto
- Crie uma nova pasta em seu computador. Esta pasta conterá todos os arquivos para sua extensão. Nomeie-a algo como MyFirstExtension.
- Dentro da pasta do seu projeto, crie um arquivo chamado manifest.json. Este arquivo informa ao Chrome sobre sua extensão e suas capacidades.
- Adicione o seguinte código ao manifest.json:
JSON{ "manifest_version": 3, "name": "My First Extension", "version": "1.0", "description": "Uma extensão simples do Chrome.", "action": { "default_popup": "popup.html", "default_icon": { "16": "icon.png", "48": "icon.png", "128": "icon.png" } }, "permissions": [] }
2. Crie o HTML do popup
- Crie um arquivo chamado popup.html na pasta do seu projeto. Este arquivo define a estrutura da janela popup que aparece quando você clica no ícone da extensão.
- Adicione o seguinte código ao popup.html:
HTMLMy First Extension Olá, Mundo!
3. Adicione estilos e funcionalidade JavaScript (Opcional)
- Se você quiser estilizar seu popup, crie um arquivo chamado popup.css e vincule-o em popup.html:
HTML - Adicione seus estilos CSS em popup.css.
- Se você precisar de funcionalidade JavaScript, crie um arquivo chamado popup.js e vincule-o em popup.html:
HTML - Adicione seu código JavaScript em
popup.js.
4. Adicione um ícone e carregue sua extensão
- Adicione uma imagem de ícone à sua pasta do projeto e nomeie-a icon.png. Este ícone será exibido na barra de ferramentas do Chrome.
- Abra o Chrome e vá para chrome://extensions/.
- Ative o Modo de desenvolvedor alternando o interruptor no canto superior direito.
- Clique no botão Carregar sem compactação e selecione sua pasta de projeto.
5. Teste sua extensão e publique-a (Opcional)
- Sua extensão deve agora estar carregada no Chrome. Clique no ícone da extensão na barra de ferramentas para ver seu popup.
- Se você quiser publicar sua extensão na Chrome Web Store, precisará criar uma conta de desenvolvedor e seguir a Documentação do Desenvolvedor da Chrome Web Store.
Esperamos que isso ajude você a começar a criar sua própria extensão do Chrome! Deixe-nos saber se você tem alguma dúvida ou precisa de mais assistência nos comentários abaixo.