Como criar uma extensão para o google chrome ?

11/01/2023 admin

Criar uma extensão para o Google Chrome é bastante simples e pode ser feito usando HTML, CSS e JavaScript.

Aqui está um exemplo básico de como criar uma extensão com um botão que exibe uma mensagem ao ser clicado:

Crie uma pasta com qualquer nome para a extensão, por exemplo: “minha-primeira-extensão”.
Dentro desta pasta crie um arquivo chamado “manifest.json” e adicione o seguinte conteúdo nele :

{

    "manifest_version": 2,

    "name": "Minha primeira extensão",

    "description": "Uma extensão de exemplo",

    "version": "1.0",

    "browser_action": {

        "default_popup": "popup.html"

    },

    "permissions": [

        "activeTab"

    ]

}

Em seguida, crie um arquivo chamado “popup.html” e adicione o seguinte conteúdo nele:

<!DOCTYPE html>

<html>

<head>

    <title>Minha primeira extensão</title>

</head>

<body>

    <button id="my-button">Clique aqui</button>

    <script>

        document.getElementById('my-button').addEventListener('click', function() {

            alert('Você clicou no botão!');

        });

    </script>

</body>

</html>

Agora adicione arquivos de estilo css, caso desejado, no caso de “popup.css”
Abra o Google Chrome e vá para “chrome://extensions/”.
Ative o “Modo do desenvolvedor” no canto superior direito da tela.
Clique no botão “Carregar sem compactação” e selecione a pasta “minha-primeira-extensão” que você criou anteriormente.
Agora você verá a sua extensão listada na página “chrome://extensions/”. Clique no ícone da extensão para abrir o “popup” que você criou. Ao clicar no botão, você verá a mensagem “Você clicou no botão!”.

Você pode personalizar e ampliar essa extensão adicionando mais funcionalidades e interagindo com o conteúdo da página usando o JavaScript e o APIs do navegador. Existem diversas documentações da google para seguir e estudar como por exemplo : https://developer.chrome.com/docs/extensions/get_started