How create google extension

If you enjoy video content, feel free to subscribe to my channel and turn on notifications to stay updated on new content!

Now let's dive into the content!

If you are a developer and are already familiar with the thousands of extensions available on Chrome, you know that some of them make our lives much easier.

It's possible to automate tasks, create processes, and consume data that aid in development, such as Redux DevTool, React DevTool, and apps that assist in text correction.

In short, it's a massive market. Just take a look at the Google Chrome store, where you can find almost everything from productivity apps to mouse cursor modifiers.

In this article, I'll teach you the basics of creating your own extension with React, Vite, and Tailwind. The extension we'll develop is a simple CPF and CNPJ generator. The source code is available here.

Let's get to the code!

SETUP

First, you need to have a project running in Vite.

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

To install Tailwind, you can easily do so by following the official documentation from Tailwind.

Creating the manifest file

Now, in the public folder, create a file named manifest.json.

The manifest.json file is a manifesto file used in browser extensions, including extensions for Google Chrome, Mozilla Firefox, Microsoft Edge, and other browsers that support extensions.

The manifest.json contains information about the extension, such as the name, version, description, icons, required permissions, pages the extension should include or modify, among other settings. This file is essential for the creation and operation of an extension.

{
  "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';"
  }
}

Running

Now just run npm run build, open Google Chrome, go to Settings/Extensions/Manage Extensions, and it's very important that you have developer mode enabled, okay?

Then click on 'Load unpacked' and select your dist folder. That's it!

Your first extension is now created. The sky's the limit for you now.

Document Generator

To create the document generator, you need this library.

npm install cpf-cnpj-validator

In the App.jsx file, make the following changes:

...
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;

I hope I've helped you with something. Good luck on your journey!

If you enjoyed this content, check out my YouTube channel, and if it makes sense to you, subscribe =)

Until next time!