Como Criar uma Extensão do Chrome Com Seu Código

Como criar uma extensão do Chrome 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

  1. Crie uma nova pasta em seu computador. Esta pasta conterá todos os arquivos para sua extensão. Nomeie-a algo como MyFirstExtension.
  2. Dentro da pasta do seu projeto, crie um arquivo chamado manifest.json. Este arquivo informa ao Chrome sobre sua extensão e suas capacidades.
  3. 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

  1. 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.
  2. Adicione o seguinte código ao popup.html: HTML My First Extension

    Olá, Mundo!

3. Adicione estilos e funcionalidade JavaScript (Opcional)

  1. Se você quiser estilizar seu popup, crie um arquivo chamado popup.css e vincule-o em popup.html: HTML
  2. Adicione seus estilos CSS em popup.css.
  3. Se você precisar de funcionalidade JavaScript, crie um arquivo chamado popup.js e vincule-o em popup.html: HTML
  4. Adicione seu código JavaScript em popup.js.

4. Adicione um ícone e carregue sua extensão

  1. Adicione uma imagem de ícone à sua pasta do projeto e nomeie-a icon.png. Este ícone será exibido na barra de ferramentas do Chrome.
  2. Abra o Chrome e vá para chrome://extensions/.
  3. Ative o Modo de desenvolvedor alternando o interruptor no canto superior direito.
  4. Clique no botão Carregar sem compactação e selecione sua pasta de projeto.

5. Teste sua extensão e publique-a (Opcional)

  1. Sua extensão deve agora estar carregada no Chrome. Clique no ícone da extensão na barra de ferramentas para ver seu popup.
  2. 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.