Criando uma Extensão do Chrome Usando Vue

As extensões do Chrome são uma ótima maneira de personalizar e aprimorar a experiência de navegação. Se você é um desenvolvedor familiarizado com o framework Vue.js e está interessado em criar uma extensão para o Chrome, você está no lugar certo! Neste artigo, vamos explorar o caminho mais fácil para criar uma extensão do Chrome usando Vue.

Vamos começar criando um novo projeto Vue com Vite. Abra o terminal e navegue até a pasta onde você deseja criar o seu projeto. Em seguida, execute o seguinte comando:

npm init vue@latest

Siga as instruções no terminal para personalizar as configurações do projeto.

Após a criação do projeto, você verá uma estrutura de diretórios básica. Vamos nos concentrar nos seguintes arquivos:

Então agora podemos ir para o nosso projeto e vamos instalar nossos pacote. Navegue ate a pasta de seu projeto e instale as dependências.

cd chrome-extension-vue-3 && yarn && yarn dev

Após executado o comando serão instaladas as dependência e mostrará algo assim, significando que o nosso aplicativo está funcionando.

Agora, que nosso aplicativo está funcionando corretamente. Crie um arquico dentro da pasta public chamado manifest.json e adicione seu logo.png. Altere o conteúdo desse arquivo manifest.json, para:

{
  "manifest_version": 3,
  "name": "Felipecss Extension Example",
  "description": "This is a sample extension",
  "version": "1.0",
  "action": {
      "default_popup": "index.html",
      "default_icon": "Logo.png"
  }
}

Agora para testarmos e executarmos o projeto, rode o comando:

yarn build

Abra seu navegador Chrome (no meu caso estou usando o Edge) e certifique-se de alternar na opção das extensões o para  modo de desenvolvedor

e, em seguida, clique e selecione o projeto com a opção Carregar sem pacote

Após carregar e instalar, o ícone da extensão estará disponível. Para mim eu tenho este ícone, então depois de fixá-lo eu posso apenas abrir a minha extensão clicando nele.

Parabéns! Agora você tem todas as informações necessárias para criar a sua própria extensão do Chrome usando Vue com Vite. Fique à vontade para modificar o conteúdo e adicionar as funcionalidades que desejar. Se você quiser conferir um exemplo prático do que abordamos neste artigo, pode acessar o código-fonte da minha extensão no GitHub: link do GitHub.

Se você gostaria de compartilhar sua extensão com outros usuários do Chrome, você pode considerar a opção de publicá-la na Chrome Web Store. A Chrome Web Store é uma plataforma oficial onde desenvolvedores podem disponibilizar suas extensões para o público. Para aprender mais sobre o processo de publicação, você pode ler a documentação oficial aqui: link para a documentação.