Chrome Extension

Njectify — Seu navegador, suas regras.

21 de junho de 2026|Diego Dias|Chrome Extension

01001110 01001100

01.10.00.njectify

New Level

Njectify: O dia em que cansei de brigar com o DevTools e criei meu próprio IDE de navegador.

njectify

O que é o Njectify

Eu sempre tive uma mania meio chata de ficar ajustando o visual e o comportamento das ferramentas e sites que uso no dia a dia, principalmente SaaS e sistemas legados do trabalho.

Mas quem já usa extensões para injetar CSS e JavaScript sabe o quanto isso é trabalhoso. Você abre o DevTools, faz as alterações no CSS, copia tudo para um Stylebot da vida, depois abre o Tampermonkey para injetar um script. Os logs ficam espalhados, a experiência de depuração é ruim e, se a página recarregar, você perde parte do progresso ou precisa refazer tudo. E, para piorar, a experiência de uso dessas extensões praticamente parou no tempo. A interface é antiga, o fluxo é engessado e falta uma integração que torne esse processo realmente agradável.

Criei o Njectify a partir dessas dores. Ele é uma extensão para o Chrome, usando o Manifest V3, que junta tudo o que eu precisava em um só lugar. Em vez de ficar pulando de extensão em extensão, ele traz um inspetor visual super rápido, um editor CSS avançado que lembra bastante o Elementor do WordPress, um console de debug dedicado e um IDE completo baseado no Monaco (o mesmo editor por trás do VS Code) direto para o navegador. A ideia principal é simples: você edita CSS e JavaScript em tempo real em qualquer site, sem precisar abrir o DevTools e sem que a página dê aquele flash chato na hora de salvar.

Casos de uso

Se você trabalha com design ou desenvolvimento frontend, sabe como é útil testar ajustes de tipografia, cores, espaçamentos ou até criar protótipos rápidos diretamente na página de um cliente ou de uma ferramenta interna. O painel Quick Edit foi pensado exatamente para isso: alterar visualmente margens, bordas, sombras, gradientes e diversas outras propriedades, sem precisar escrever uma única linha de CSS.

Outro caso clássico é a personalização de sites e sistemas que você usa todos os dias. Aquele painel com um banner irritante ocupando metade da tela, ou aquele sistema interno que exige dezenas de cliques repetitivos para executar uma tarefa simples. Com o Njectify, você pode criar pequenos projetos vinculados a URLs específicas, armazenar chaves de API de forma segura e executar scripts personalizados para resolver essas pequenas dores do dia a dia.

A ferramenta também é extremamente útil para quem trabalha com QA ou automação. É possível isolar estilos, inspecionar elementos e capturar seletores CSS estáveis com um clique, evitando aquelas classes aleatórias geradas por frameworks modernos.

E a verdade é que o limite é praticamente a sua criatividade. Se você sabe JavaScript, consegue transformar qualquer página em algo muito mais útil: criar um botão para baixar vídeos do YouTube, montar um adblock pessoal, ocultar conteúdos que contenham determinadas palavras, integrar APIs, automatizar tarefas repetitivas e muito mais. Em vez de apenas consumir um site, você passa a adaptá-lo exatamente às suas necessidades.

Njectify x concorrentes

Eu não criei o Njectify com a mentalidade arrogante de que ele veio para matar o Tampermonkey, o Violentmonkey, o Stylus ou o Stylebot. Essas extensões são incríveis, históricas e cumprem muito bem o papel delas. O ponto é que elas nasceram em uma época diferente e tratam o scripting e o CSS como hacks isolados.

O diferencial do Njectify é que ele propõe um fluxo integrado. Os outros nasceram especializados: Tampermonkey e Violentmonkey cuidam de JavaScript, enquanto Stylus e Stylebot cuidam de CSS. Para fazer as duas coisas num mesmo site, você acaba mantendo duas extensões, dois editores e dois fluxos separados. O Njectify junta tudo numa suite unificada.

Mas só dizer "é integrado" é vago, então aqui está o que eu tenho certeza que o Njectify entrega e que os concorrentes, cada um na sua especialidade, não oferecem ao mesmo tempo:

Recurso	Njectify	Tampermonkey / Violentmonkey	Stylus / Stylebot
Injeção de JavaScript	✅	✅	❌
Injeção de CSS	✅	parcial (via `GM_addStyle`)	✅
Editor visual point-and-click	✅	❌	✅ (só CSS)
IDE completo (`Monaco`, o do VS Code)	✅	editor simples	editor simples
Histórico de versões para restaurar snapshots	✅	❌	❌
Debug Inspector com canal de log próprio	✅	❌	❌
Cofre de segredos para chaves de API	✅	❌	❌
Bibliotecas externas prontas (React, Vue, jQuery...)	✅	via `@require` manual	❌
`Hot reload` de CSS sem flash na tela	✅	❌	varia

Vale destacar alguns desses pontos. O primeiro é o Debug Inspector: em vez de entupir o console principal do navegador com logs dos seus scripts, o Njectify tem um canal próprio que redireciona as mensagens direto para o painel de debug do IDE, mostrando exatamente o arquivo e a linha de origem.

Outro ponto forte é a persistência. Tudo que você cria fica gravado localmente em IndexedDB, organizado por regra de URL, com um histórico de versões que permite restaurar snapshots anteriores de cada arquivo. A camada de armazenamento foi pensada para ser resistente: ela poda automaticamente o histórico mais antigo quando o espaço aperta, e nunca deixa um estouro de cota quebrar o seu trabalho na hora de salvar.

E como o foco é JavaScript de verdade, o Njectify já vem com uma curadoria de bibliotecas externas prontas para usar via CDN, como React, Vue, jQuery, Lodash, Axios, GSAP, Alpine.js e o Tailwind. Em vez de caçar URLs de CDN e colar @require na mão, você escolhe a biblioteca de uma lista e ela é injetada no seu script. Fechando, o hot reload (live preview) de CSS é instantâneo e não faz a tela piscar, algo que poupa muita paciência ao longo do dia.

Como utilizei a IA pra me ajudar no projeto

Vale um contexto antes: a IA entrou no meu fluxo como ferramenta, não como muleta. Já programava antes dela, então leio e reviso o que é gerado ( pelo menos as mais importantes hehe), e as decisões técnicas passam por mim antes de virarem código ( e do codex também hehe²). Ela acelera o trabalho, mas o rumo continua sendo meu.

Dito isso, a inteligência artificial foi uma das principais ferramentas que utilizei durante todo o desenvolvimento e hoje faz parte do meu fluxo de trabalho da mesma forma que um editor de código, um debugger ou um sistema de versionamento.

Antes mesmo de escrever a primeira linha de código, comecei o projeto utilizando uma arquitetura de prompts em Markdown que desenvolvi ao longo dos últimos meses. Todos os meus projetos começam assim: faço um processo de briefing, entrevistas, levantamento de requisitos e planejamento antes de partir para a implementação. No fundo, um bom prompt é uma especificação técnica bem escrita, e escrever uma boa especificação depende de saber exatamente o que você quer construir.

Durante o desenvolvimento, utilizei o Claude principalmente como agente executor, enquanto o Codex foi a ferramenta que mais usei para testes, brainstorming, revisão de código e discussões sobre arquitetura. A palavra final, porém, sempre foi minha: validei, ajustei e muitas vezes reescrevi o que foi sugerido.

A IA foi essencial para acelerar a criação do boilerplate inicial com React 19, TypeScript e Tailwind CSS v4, além de ajudar nas partes mais burocráticas da API de extensões do Chrome. Quem já trabalhou com Manifest V3 sabe que o gerenciamento do Service Worker e da comunicação entre os diferentes contextos da extensão tem diversas armadilhas. Trabalhamos juntos para projetar uma arquitetura de mensageria mais robusta e implementar testes end-to-end com Playwright, garantindo que a injeção de scripts continuasse funcionando de forma confiável.

Como sou bastante criterioso com design, toda a identidade visual, o design system e a interface foram desenvolvidos manualmente por mim, com forte inspiração na linguagem visual da Vercel. É uma parte do processo que gosto de controlar nos mínimos detalhes, então preferi não utilizar IA na construção do frontend.

O desenvolvimento foi extremamente iterativo. Eu descrevia uma funcionalidade, discutíamos alternativas de implementação, refinávamos a arquitetura e ajustávamos o código até chegar ao resultado esperado. Muitas decisões surgiram dessas conversas, desde otimizações na renderização do Monaco Editor até estratégias para gerenciamento de estado, mensageria e comunicação entre os diferentes módulos da extensão. Cada etapa foi validada com uma combinação de testes end-to-end e testes manuais para garantir a estabilidade e a confiabilidade da aplicação.

No fim, a IA não substituiu o processo de desenvolvimento. Ela acelerou tarefas repetitivas, ajudou a explorar alternativas de implementação e serviu como um excelente parceiro técnico para discutir, e aprender a resolução das soluções. As decisões de produto, arquitetura, experiência de uso e design continuaram sendo conduzidas por mim.

Lições futuras

O projeto está rodando super bem, mas criar o Njectify me trouxe vários aprendizados e já me deu uma visão clara do que precisa vir a seguir. A principal lição que tirei é que a facilidade de uso não pode atropelar a segurança e a estabilidade da página.

Olhando para a frente, o meu roadmap está focado em três pilares fundamentais de segurança e robustez técnica. A primeira prioridade é isolar completamente o canal de comunicação dos scripts para impedir que códigos injetados acessem dados sensíveis ou segredos do projeto. A segunda é criar um runtime de ciclo de vida para os scripts de JavaScript. Atualmente, o hot reload de CSS é perfeito, mas quando o JavaScript é atualizado, ele se acumula na página sem limpar os listeners e timers anteriores. Esse runtime vai garantir que a recarga limpe o estado anterior automaticamente.

Também quero unificar o motor de seletores para tornar a detecção de elementos ainda mais inteligente e menos dependente de classes dinâmicas, abrindo caminho para um gravador de macros visual, onde o usuário possa apenas clicar na página e a extensão gere o script correspondente.

Permissões e por que elas são pedidas

Uma extensão que injeta CSS e JavaScript em qualquer site naturalmente desperta desconfiança, e com razão. Por isso faço questão de ser transparente sobre cada permissão que o Njectify pede no Manifest V3 e o motivo de cada uma existir. Nada aqui é pedido "por garantia": se uma permissão está no manifesto, é porque uma funcionalidade depende dela.

Permissão	Por que é pedida
`<all_urls>` (acesso a todos os sites)	É a permissão mais ampla e a que mais assusta. O Njectify precisa rodar em qualquer endereço porque a proposta é deixar você customizar o site que quiser, sem uma lista pré-aprovada. Na prática, ele só faz algo numa página quando existe uma regra que você criou para aquela URL. Sem regra, fica inerte.
`scripting` e `userScripts`	São o coração da ferramenta: permitem injetar os seus scripts e estilos na página de forma controlada e isolada.
`activeTab` e `tabs`	Saber em qual aba você está, aplicar as alterações na página certa e atualizar as abas quando você liga ou desliga uma regra.
`storage`	Tudo que você cria fica salvo localmente no navegador, em `IndexedDB`. Seus scripts, estilos e configurações não saem da sua máquina por aqui.
`identity` e `identity.email`	Apenas para o login opcional com a conta Google, caso você queira sincronizar seus projetos. Se você não logar, não fazem nada.
`alarms`	Tarefas agendadas em segundo plano, como a verificação periódica de atualizações de scripts.

Vale destacar o ponto mais sensível: as chaves de API e segredos que você guarda nos projetos. Eles ficam isolados do código injetado, e blindar ainda mais esse canal de comunicação é, inclusive, a primeira prioridade do roadmap que mencionei acima.

Por fim, um ponto que dá tranquilidade a quem instala: o Njectify só chegou à Chrome Web Store depois de passar pelo processo de revisão do Google. Cada permissão precisou ser justificada, e a extensão foi analisada para garantir que faz exatamente o que diz, sem comportamento malicioso ou coleta indevida de dados. Não é uma extensão solta na internet pedindo para você confiar na palavra de um desconhecido, ela passou pelo mesmo crivo rigoroso que qualquer outra publicada oficialmente na loja.

Resumo

No fim das contas, o Njectify nasceu de uma frustração pessoal com o fluxo de trabalho de desenvolvimento frontend e customização de páginas no dia a dia. Com o apoio da IA, mas sempre guiado pela minha própria experiência técnica, desenvolvi em torno de 6 meses e consegui transformar essa dor em um IDE completo de navegador que une estilo e comportamento de forma fluida. O projeto ainda tem um caminho longo pela frente com melhorias importantes, espero que realmente possa ser útil para as pessoas.