Chrome Extension

Njectify — Seu navegador, suas regras.

Extensão para Injeção de Javascript & CSS.

21 de junho de 2026Diego Dias

Customize qualquer site, injetando CSS & Javascript.

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 — CSS

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 cores e gradientes, tipografia, layout, bordas, sombras, filtros, transições e transform, sem escrever uma linha de CSS. E não fica só no estado normal do elemento: você edita :hover, :focus, :active, ::before e ::after separadamente, e cada breakpoint responsivo tem as suas próprias regras. Tem undo/redo ilimitado na sessão, seleção de vários elementos com Ctrl+clique, carregamento de Google Fonts ali no painel e até exportação das edições como classes Tailwind.

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.

O painel Quick Edit aplicando um gradiente na home do TechCrunch. Cliquei no bloco do hero, o Njectify capturou o seletor sozinho e o editor de cor abriu ali mesmo: tipo de gradiente, ângulo, paradas e o hex, tudo point-and-click, sem uma linha de CSS. O preview é ao vivo, e a mudança só vira permanente naquele domínio quando você aplica.

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.

Casos de uso — JavaScript

O CSS resolve o que a página parece. O JavaScript resolve o que ela faz, e é aqui que o limite passa a ser a sua criatividade. Como o script roda no contexto da página, já autenticado e com acesso ao DOM e à rede, dá para ir muito além de esconder um banner.

Caso de uso	O que dá para fazer
Webhook fantasma / interceptor HTTP	Sobrescrever `fetch` e `XMLHttpRequest` para espelhar toda requisição do site num endpoint seu. Descobre a API interna de qualquer SaaS (endpoints, payloads, headers de auth) sem abrir o `DevTools`.
Sniffer de API → gerador de cliente	Acumular os endpoints observados num mapa de schema (método, path, params, forma da resposta) e exportar como cliente TypeScript ou coleção do Postman. Você navega no site normalmente e sai com o SDK pronto.
Persistência de estado que o site não te dá	Salvar em `IndexedDB` filtros, rascunhos, posição de scroll e formulário meio-preenchido, restaurando ao voltar. Mata a raiva de perder trabalho naquele sistema corporativo sem autosave.
Camada universal de atalhos de teclado	Mapear teclas para ações que só existem em menus escondidos: `j`/`k` para navegar a lista, `/` para focar a busca, `g`+`i` para pular de tela. Transforma qualquer ERP ou painel lento em algo pilotável sem mouse.
Mutation observer que reage à página	Vigiar o `DOM` e agir sozinho: auto-clicar em "carregar mais" até o fim, fechar modal de cookie ou newsletter, marcar preço que caiu, destacar linha de tabela que bateu um critério. É automação contínua, não script de uma passada.
Extração estruturada + exportação	Varrer a tabela ou lista já renderizada e cuspir CSV/JSON via `Blob` e download, ou copiar para o clipboard. Scraping do lado do cliente, já autenticado, sem lidar com login ou anti-bot.
Mock e interceptação de resposta	Devolver payload falso para endpoints específicos, forçar um erro 500, atrasar 3s ou simular lista vazia. Testar os estados de erro e loading da sua própria app sem tocar no backend.
Painel de debug flutuante injetado	Um HUD próprio na página mostrando eventos disparados, valor de variáveis globais, Web Vitals, requisições em voo e `localStorage` ao vivo. Um DevTools customizado e persistente, sempre presente naquele domínio.

Repare no que essas ideias têm em comum: nenhuma delas exige backend, build ou deploy. Você escreve o script no IDE, vincula a uma regra de URL e ele passa a rodar naquele site para sempre. Em vez de apenas consumir uma página, você passa a adaptá-la exatamente às suas necessidades.

O IDE do Njectify, com o editor Monaco e a árvore de regras por domínio à esquerda. O script aberto é um case real: injetei um chat com IA no site de um escritório de advocacia, sem tocar no código do site. O script.js monta o widget, guarda a sessão no localStorage, formata a resposta e conversa com um webhook externo, enquanto o style.css ao lado cuida da aparência.

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	✔	◐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	✔	✕	✕
Debug Inspector com log próprio	✔	✕	✕
Cofre de segredos para chaves de API	✔	✕	✕
Bibliotecas externas prontas	✔10 via CDN	◐via`@require` manual	✕
Hot reload de CSS sem flash na tela	✔	✕	◐varia
Edição de `:hover`, `::before` e breakpoints	✔	✕	◐só escrevendo CSS

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 em pastas, projetos e arquivos, e cada projeto carrega as suas próprias regras de URL, por wildcard ou regex. O histórico de versões guarda snapshots de cada arquivo, com diff, para você restaurar qualquer estado anterior. Essa camada foi pensada para ser resistente: ela poda sozinha os snapshots mais antigos quando o espaço aperta e, se a cota estourar na hora de salvar, o save continua funcionando em vez de quebrar no seu colo.

E como o foco é JavaScript de verdade, o Njectify já vem com uma curadoria de bibliotecas externas prontas para usar via CDN: React, ReactDOM, Vue, jQuery, Lodash, Axios, Day.js, 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 a IA entrou no projeto

A IA entrou no meu fluxo como ferramenta, não como muleta. Já programava antes dela, então as decisões técnicas passam por mim antes de virarem código: leio e reviso o que é gerado, e muitas vezes reescrevo. Ela acelera o trabalho, mas o rumo continua sendo meu.

Antes da primeira linha de código, comecei pelo harness próprio que fui montando nos últimos meses: um conjunto de instruções, agentes e regras que orienta a IA dentro do meu jeito de trabalhar. Todo projeto meu começa assim: briefing, levantamento de requisitos e planejamento antes da implementação. No fundo, um bom prompt é uma especificação técnica bem escrita, e isso depende de saber exatamente o que você quer construir. Na prática, usei o Claude como agente executor e o Codex para testes, revisão de código e discussões de arquitetura.

O ganho maior foi nas partes burocráticas: o boilerplate com React 19, TypeScript e Tailwind CSS v4, e as armadilhas do Manifest V3, que é gerenciar o Service Worker e a comunicação entre os contextos da extensão. Dessas conversas saíram decisões reais, da mensageria à renderização do Monaco Editor, cada uma validada com testes end-to-end no Playwright e testes manuais. O frontend foi a exceção: toda a identidade visual, o design system e a interface foram feitos à mão por mim, com inspiração na linguagem visual da Vercel. É a parte que gosto de controlar nos mínimos detalhes, então preferi não usar IA ali.

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 aplicação.

A próxima prioridade do roadmap é criar um runtime de ciclo de vida para os scripts de JavaScript. Hoje o hot reload de CSS troca o conteúdo do estilo no lugar, sem recarregar nada e sem piscar. Já o JavaScript é simplesmente reexecutado: os listeners e timers da execução anterior continuam vivos na página e vão se acumulando. Esse runtime vai expor um gancho de limpeza, para que cada recarga desmonte o estado anterior antes de rodar a nova versão.

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. O `userScripts` é o que habilita o modo isolado, onde o seu script roda num mundo separado do da página.
`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`	Guardar suas configurações, chaves de API e preferências no próprio navegador. Os projetos e arquivos ficam em `IndexedDB`, e nada disso sai da sua máquina por aqui.
`identity`	Apenas para a sincronização opcional com o Google Drive. O acesso pedido é o escopo `drive.appdata`, uma pasta privada do app: o Njectify não vê nem toca no resto dos seus arquivos do Drive. Se você não ativar o sync, ela não faz nada.
`alarms`	Um alarme diário que faz limpeza interna: apaga registros de exclusão antigos usados pela sincronização, para eles não acumularem para sempre em quem nem usa o Drive.

Vale destacar o ponto mais sensível: as chaves de API e segredos que você guarda nos projetos. Eles nunca são escritos dentro do script nem trafegam pela window da página. No modo isolado, o seu script pede o segredo ao background e recebe o valor por um canal próprio. No modo de fallback, em que o script compartilha o contexto com a página, esse pedido é recusado de propósito e devolve vazio: é melhor a funcionalidade não funcionar ali do que expor a sua chave para o site.

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

O Njectify nasceu de uma frustração com o fluxo de customizar páginas no dia a dia: inspetor visual, editor CSS point-and-click, console de debug e um IDE baseado no Monaco, tudo em uma extensão só. Foram cerca de 6 meses de desenvolvimento, e o roadmap ainda é longo, mas o que está no ar já resolve a dor que me fez começar. Espero que seja útil para você também.