Como criar uma extensão no google chrome com react e tailwind

Caso você goste de conteúdo em vídeo, aproveite para se inscrever no meu canal e ativar as notificações para não perder nenhum conteúdo novo!

Agora bora para o conteúdo!

Se você é um desenvolvedor e já está familiarizado com as milhares de extensões disponíveis no Chrome, sabe que algumas delas facilitam muito a nossa vida.

É possível automatizar tarefas, criar processos e consumir dados que ajudam no desenvolvimento, como, por exemplo, o Redux DevTool, React DevTool, e aplicativos que auxiliam na correção de textos.

Enfim, é um mercado gigantesco. Basta dar uma olhada na loja do Google Chrome, onde você encontra quase de tudo, desde aplicativos para produtividade até apps que modificam o cursor do mouse.

Neste artigo, vou te ensinar o básico para criar sua própria extensão com react, vite e tailwind. A extensão que vamos desenvolver é um simples gerador de CPF e CNPJ, o codigo fonte esta aqui.

Vamos para o código?

SETUP

Primeiro você precisa ter um projeto rodando em vite

npm create vite@latest my-project -- --template react

Para instalar o Tailwind, você pode fazer isso facilmente seguindo a documentação oficial do próprio Tailwind.

Criando arquivo manifest

Agora na pasta public crie um arquivo manifest.json

O arquivo manifest.json é um arquivo de manifesto utilizado em extensões do navegador, incluindo extensões para o Google Chrome, Mozilla Firefox, Microsoft Edge e outros navegadores que suportam extensões.

O manifest.json contém informações sobre a extensão, como nome, versão, descrição, ícones, permissões necessárias, páginas que a extensão deve incluir ou modificar, entre outras configurações. Esse arquivo é essencial para a criação e funcionamento de uma extensão.

{
  "name": "Extensions",
  "description": "Chrome Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "index.html",
    "default_title": "Extension"
  },
  "icons": {
    "16": "document.png",
    "48": "document.png",
    "128": "document.png"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self';"
  }
}

Rodando

Agora so rodar npm run build abrir o google chrome ir em configurações/extensão/gerenciar extensão e muuuuuuito importante você estar com o modo desenvolvedor habilitado beleza?

Depois você clica em 'Carregar sem compactação' e selecionar sua pasta de dist e pronto!!

Sua primeira extensão ja esta criada. Agora o Céu e o limite para você.

Gerador de documentos

Para criar o gerador de documentos você precisa dessa lib

npm install cpf-cnpj-validator

No arquvio App.jsx altere para

...
import { cpf, cnpj } from 'cpf-cnpj-validator';
...

function App() {
  const [typeOperation, setTypeOperation] = useState('cpf');
  const [isFormat, setIsFormat] = useState(true);
  const [inputValue, setInputValue] = useState('');
  const [isAlert, setIsAlert] = useState(false);

  const operations = {
    cpf: {
      generate: cpf.generate,
      format: cpf.format,
    },
    cnpj: {
      generate: cnpj.generate,
      format: cnpj.format,
    },
  };

  useEffect(() => {
    setInputValue(operations[typeOperation].generate(isFormat));
  }, [typeOperation]);

  function generateDocument() {
    const value = operations[typeOperation].generate(isFormat);
    setInputValue(value);
  }

  async function showAlert() {
    setIsAlert(true);
    await navigator.clipboard.writeText(inputValue);
    setTimeout(() => setIsAlert(false), 2500);
  }

  return (
    <>
      <div className="flex justify-center">
        <div>
          <p className=" text-3xl font-bold my-3">
            Gerador de documento brasileiro
          </p>
          <p>Selecione o tipo o documento</p>
          <div className="flex mb-4">
            <Checkbox
              label="CPF"
              onChange={() => setTypeOperation('cpf')}
              checked={typeOperation == 'cpf'}
            />
          </div>
          <div className="flex items-center ">
            <Checkbox
              label="CNPJ"
              onChange={() => setTypeOperation('cnpj')}
              checked={typeOperation === 'cnpj'}
            />
          </div>
          <div className="flex  items-center justify-between ">
            <Toggle
              label="Formatado?"
              checked={isFormat}
              onChange={(e) => {
                setInputValue(
                  !isFormat
                    ? operations[typeOperation].format(inputValue)
                    : inputValue.replace(/\D/g, '')
                );
                setIsFormat(!isFormat);
              }}
            />
            <Button text="Gerar" onClick={() => generateDocument()} />
          </div>
          <div className="relative my-3">
            <input
              type="search"
              id="search"
              className="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 my-3"
              placeholder="Search"
              value={inputValue}
              required
              disabled
            />
            {isAlert && (
              <div
                class="p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400 mt-3"
                role="alert"
              >
                <span class="font-medium">Copiado com sucesso 😊 </span>
              </div>
            )}
            <Button text="Copiar" onClick={() => showAlert()} />
          </div>
        </div>
      </div>
      <div className="flex mt-3 text-sm text-gray-400">
        <a href="https://lorenaporphirio.com/" target="_blank">
          Feito por: Lorena Porphirio ✨
        </a>
      </div>
    </>
  );
}

export default App;

Espero que eu tenha te ajudado em algo, boa sorte na sua jornada!

Caso você tenha gostado desse conteúdo, da uma olhada la no youtube, e se fazer sentido para você se inscreva =)

Para mais conteúdo em texto tem meu site

Até a próxima!