DEV Community: Marcus Paulo M Dias

O fim do vazamento de secrets: protegendo seus arquivos .env de forma definitiva

Marcus Paulo M Dias — Sat, 30 May 2026 18:02:37 +0000

O pesadelo do compartilhamento de tela

Você já viveu isso (ou tem medo de viver): chamada de vídeo com dezenas de pessoas, demonstrando uma feature nova ou depurando um hot-reload ao vivo. Num momento de distração, você troca para a aba errada — e por uma fração de segundo suas chaves da Stripe, credenciais do banco de produção e segredos da AWS aparecem em texto puro na frente de todo mundo.

Esse "flash" momentâneo é o pesadelo de qualquer dev. E quem usa extensões de máscara tradicionais conhece bem a ansiedade que sobra: a maioria delas age de forma reativa, aplicando "decorações" por cima do texto depois que ele já foi renderizado.

A Protect My Env ataca o problema pela raiz — mudando a arquitetura, não o curativo.

O fim do "flash" antes da máscara carregar

O diferencial crítico é a abordagem proativa.

Ferramentas comuns tentam mascarar o texto dentro de um editor padrão. O resultado é o vazamento do primeiro frame — o famoso Zero-Frame Flash. A Protect My Env implementa um CustomTextEditorProvider: em vez de decorar o editor de texto, ela o substitui por um Secure Editor baseado em Webview.

Na prática, a máscara é aplicada à lógica de renderização antes de a interface ser desenhada na tela.

The custom editor opens .env files in a table view where secrets are masked before any rendering occurs — eliminating the "decoration flash" you get with text-editor overlays.

O conteúdo é interceptado e apresentado numa tabela segura. O texto puro nunca chega a tocar a camada de exibição do editor padrão. Durante um live coding ou a gravação de um tutorial, não existe frame residual exibindo segredo nenhum.

Seus segredos não saem da sua máquina (zero telemetria)

Qualquer ferramenta que manipula variáveis de ambiente merece desconfiança — e isso é saudável. A Protect My Env foi desenhada sob privacidade absoluta: todo o processamento e exibição roda localmente, na sua instância do VS Code.

✅ Zero data collection — nenhuma variável, chave ou valor é registrado, armazenado ou transmitido.
✅ No remote calls — funciona 100% offline. Sem telemetria, sem analytics, sem chamadas a servidores externos.
✅ Total privacy — seus segredos ficam exclusivamente na sua máquina, no escopo local do editor.

E como é um projeto open source (MIT), você não precisa confiar na minha palavra: o código está aberto, com CI, análise estática via CodeQL, OpenSSF Scorecard e cobertura de testes no Codecov. Transparência é parte do produto.

Recursos principais

Recurso	O que faz
🔒 Secure Editor	Abre o `.env` já mascarado por padrão — sem flash de texto puro
👁️ Per-key Reveal	Revela ou oculta valores individuais com ícones de ação na linha
🌐 Reveal All / Hide All	Alterna todos os valores mascarados pelo cabeçalho do editor
🔍 Search & Sort	Filtra por chave ou comentário e ordena sem mexer na ordem do arquivo
🎭 Dois modos de máscara	`all` mascara tudo; `pattern` mascara só o que casa com glob
💬 Comment Protection	Opcionalmente mascara comentários de linha inteira e inline
✏️ Edição inline	Edita valores direto na visualização segura
📝 Open as Text	Volta para o editor padrão do VS Code, sem overlays de máscara

Máscaras inteligentes: ocultando só o que importa

Segurança não precisa custar fluidez. O Obfuscation Mode permite ocultar tudo ou usar padrões glob para mascarar apenas o que é sensível — esconder chaves terminadas em _SECRET ou _KEY, por exemplo, e manter visíveis nomes de provedores ou chaves públicas.

Bônus de produtividade: você consegue pesquisar e ordenar as variáveis na tabela sem alterar a ordem original das linhas no arquivo .env físico. DX puro.

Os principais parâmetros de controle no seu settings.json:

Configuração	Tipo	Default	Descrição
`protectMyEnv.obfuscationMode`	`string`	`"all"`	`"all"` mascara tudo; `"pattern"` usa padrões glob.
`protectMyEnv.patterns`	`string[]`	ver abaixo	Padrões glob aplicados no modo `pattern` (case-insensitive).
`protectMyEnv.rules`	`string[]`	`[]`	Chaves exatas sempre mascaradas, independente do modo.
`protectMyEnv.maskCharacter`	`string`	`"•"`	Caractere usado na máscara.
`protectMyEnv.maskLength`	`number`	`8`	Comprimento da máscara; use `0` para espelhar o tamanho real.
`protectMyEnv.protectComments`	`boolean`	`false`	Quando ativo, oculta também os comentários do arquivo.

Um exemplo de configuração:

{
  "protectMyEnv.obfuscationMode": "pattern",
  "protectMyEnv.patterns": ["*_SECRET", "*_KEY", "*_PASSWORD", "*_TOKEN"],
  "protectMyEnv.rules": ["DATABASE_URL"],
  "protectMyEnv.maskCharacter": "•",
  "protectMyEnv.maskLength": 0,
  "protectMyEnv.protectComments": true
}

O detalhe do maskLength: 0 é especialmente útil: ele mascara os caracteres mas revela o comprimento do segredo. Assim você valida visualmente se uma chave está completa sem nunca expor o conteúdo. (O padrão é 8, comprimento fixo.)

Privacidade visual ≠ isolamento de contexto para IA

Aqui vale uma honestidade técnica que poucos têm: privacidade visual não é sandbox de sistema.

A Protect My Env é uma barreira visual robusta, feita para proteger sua tela contra olhos humanos (e câmeras). Mas o arquivo .env no disco continua em repouso (at rest) como texto puro — uma escolha de design para garantir compatibilidade com compiladores, runtimes e ferramentas de build.

Consequência: agentes de IA como GitHub Copilot ou Cursor ainda têm acesso ao conteúdo do arquivo. A ferramenta protege o que você mostra, não o que o seu sistema lê. Ela foi feita exatamente para um problema: evitar a exposição acidental em screen sharing, gravações, live coding e pair programming. Saber dessa fronteira é parte de usar a ferramenta com responsabilidade.

Como instalar

Abra o VS Code e pressione Ctrl+Shift+X (ou Cmd+Shift+X no macOS).
Busque por Protect My Env.
Clique em Install.

Ou direto pelo Marketplace. O código está no GitHub — requer Node.js ≥ 18 e VS Code ≥ 1.75 para builds locais.

Um novo padrão para o seu ambiente

A Protect My Env transforma o .env — de vulnerabilidade latente — em uma interface gerenciável, organizada e profissional. Ao eliminar o flash de renderização e oferecer controle granular via Secure Editor, ela tira o estresse das apresentações técnicas e deixa o foco onde ele deve estar: no código.

Pequenos ajustes no workflow de segurança são exatamente o que separam um ambiente profissional de um desastre iminente.

Na sua próxima reunião com tela compartilhada, você teria certeza de que seus segredos estão realmente ocultos desde o primeiro segundo?

Se este artigo te poupou de um susto futuro, deixa um 💜, dá uma ⭐ no repositório e compartilha com aquele colega que vive fazendo live coding.

Fill All: Generating E2E Tests and Automating Forms with Gemini Nano & TF.js

Marcus Paulo M Dias — Mon, 02 Mar 2026 00:08:52 +0000

The Community

Fill All was built for developers and QA engineers who spend their days filling out forms with locally valid data during testing and development. Every timezone, every locale, every country has its own data formats — CPF, CNPJ, RG, ID numbers, postal codes, phone numbers with regional codes — and most form-fillers don't understand them.

Standard auto-fill tools generate random strings or default to a single region's formats. Developers and QA engineers end up manually calculating valid check digits, hunting for correct postal code ranges, or switching between multiple generator websites. This happens dozens of times per sprint, across different environments and locales.

Fill All gives you a single, privacy-first tool that understands data validation natively — whatever your region — and goes further by using on-device AI to intelligently classify form fields without ever sending data to external servers.

The project is fully open source (MIT) and welcomes contributions from the dev and QA community.

What I Built

Fill All is a Chrome Extension (Manifest V3) that automatically fills web forms using a combination of:

🤖 Chrome Built-in AI (Gemini Nano) — local LLM that classifies fields contextually
🧠 TensorFlow.js — a custom-trained MLP classifier that runs entirely in the browser
� Locale-aware data generators — CPF, CNPJ, RG, CNH, PIS, CEP, phone numbers, PIX keys, credit cards, and more — all with valid check digits and regional formatting
📏 Configurable rules engine — set fixed values or specific generators per URL pattern + CSS selector
💾 Saved form templates — fill once, reuse across sessions
🔍 Smart field detection pipeline — HTML type → Keyword → TensorFlow → Chrome AI, composable and immutable
🎯 E2E script export — generates ready-to-use Playwright, Cypress, or Pest/Dusk test scripts from filled forms

Key Features Built This Weekend

Feature	Description
i18n	Full internationalization — PT-BR, English, Spanish
Fill Emptys Mode	Only fills blank fields, preserving user-entered data
Improved Rule UX	Live preview, auto-suggested generators, keyboard shortcuts
Enhanced DOM Watcher	Configurable debounce, Shadow DOM support, smart refill for SPAs
Advanced Logging	Timestamped, filterable, exportable logs with audit trail
AI Feedback	Visual badges on AI-filled fields, configurable timeout, graceful fallback
E2E Script Export	Record interactions → export as Playwright/Cypress/Pest test code
Comprehensive Tests	70+ test files with Vitest + Playwright, merged coverage reports

How It Works (Priority Pipeline)

User triggers fill → Background routes → Content Script detects fields
                                              │
                                    For each field:
                                    1. Ignored?      → Skip
                                    2. Fixed value?  → Use rule value
                                    3. Saved form?   → Use template
                                    4. Chrome AI?    → Gemini Nano (local)
                                    5. TensorFlow?   → Classify + Generate
                                    6. Fallback      → Default generator
                                              │
                                    Fill + dispatch events
                                    (input/change/blur)

Privacy First

Zero data leaves the device. No external APIs, no telemetry, no analytics. Both AI models (Gemini Nano and TensorFlow.js) run 100% locally. All user data is stored in chrome.storage.local only.

Demo

Quick Start Video

Real-World Usage Example

Watch real-world usage example on Loom →

Screenshots

Popup — Quick Actions & Generators

Floating Panel — In-Page Controls

DevTools Panel — Real-Time Field Inspection

Options Page — Full Configuration

Settings	Saved Forms	Training Dataset

Add Rules Directly From Fields

Code

marcuspmd / fill-all

Fill All é uma extensão Chrome de código aberto que preenche formulários automaticamente usando inteligência artificial e geradores de dados brasileiros válidos. Combina Chrome Built-in AI (Gemini Nano), TensorFlow.js e um motor de regras configurável para classificar campos e gerar dados realistas — CPF, CNPJ, RG, CEP, telefone e muito mais.

Fill All

AI-powered Chrome extension for smart form filling, recording, and demo generation

Chrome Web Store · Features · Getting started · Documentation · Security · Contributing

Overview

Fill All is an open-source Chrome extension that fills web forms using a layered pipeline of:

rules and saved templates
built-in generators for valid Brazilian data
TensorFlow.js field classification
Chrome Built-in AI / Gemini Nano for contextual filling

It is built for developers, QA engineers, automation teams, and anyone tired of filling the same form repeatedly.

Everything runs locally in the browser. No external AI API is required for the built-in AI and machine-learning flows.

Install from the Chrome Web Store:

https://chromewebstore.google.com/detail/fill-all/djnkgmelgfdjpeacmolelikhgioendjh

Screenshots

Popup

Field Icons and Rule Configuration

Options Page

General Settings	Language	Rules

Saved Forms	Form Creation	Dataset

Detection Strategy	Field Icons	Learning

Training	Log

DevTools Panel

Actions	Fields

Actions (Light Theme)	Fields (Light Theme)

Recording and Export

Recording

…

View on GitHub

How I Built It

Tech Stack

Layer	Technology	Purpose
Build	Vite 7.3 + @crxjs/vite-plugin	Modern bundling with HMR
Language	TypeScript ES2022 (strict)	Full type safety
Native AI	Chrome Prompt API (Gemini Nano)	Local LLM classification
ML	TensorFlow.js 4.22	Client-side field classifier
Validation	Zod v4	Schema validation (two-layer: full Zod + light typeof)
Data	@faker-js/faker	Realistic data generation
Storage	Chrome Storage API (local)	Local-only persistence
Testing	Vitest + Playwright	Unit + E2E with merged coverage
Extension	Manifest V3	Modern Chrome extension standard

Architecture

┌─────────────┐     ┌──────────────────┐     ┌──────────────────┐
│  Popup UI   │────▶│    Background     │◀────│  Content Script  │
│             │     │  (Service Worker) │     │  (DOM + Forms)   │
└─────────────┘     └────────┬─────────┘     └────────┬─────────┘
                             │                        │
┌─────────────┐    ┌─────────┼─────────┐    ┌─────────┼─────────┐
│  Options    │    │         │         │    │         │         │
│   Page      │    ▼         ▼         ▼    ▼         ▼         │
└─────────────┘  Storage   Rules    AI    Form     DOM        │
                   │       Engine  Modules Detector Watcher     │
┌─────────────┐    │                │                           │
│  DevTools   │    │       ┌────────┴────────┐                  │
│   Panel     │    │       ▼                 ▼                  │
└─────────────┘    │   Chrome AI      TensorFlow.js             │
                   │  (Gemini Nano)    (Classifier)             │
                   │       │                 │                  │
                   │       └──► Learning ◄───┘                  │
                   │            Store                           │
                   └────────────────────────────────────────────┘

Design Decisions

Immutable detection pipeline — classifiers are chained via DetectionPipeline that returns new instances on every transformation (.with(), .without(), .withOrder()). This makes the pipeline composable, testable, and free from side effects.
Two-layer validation — Full Zod schemas for background/options (correctness first), lightweight typeof checks in the content script (performance first on the hot path).
Atomic storage updates — updateStorageAtomically() uses a per-key write queue with pure updater functions (current: T) => T to prevent race conditions.
Continuous learning loop — Chrome AI predictions feed into a learning store (max 500 entries, FIFO). TensorFlow.js can retrain in-browser using these entries, creating a self-improving cycle.
Adapters pattern — UI component libraries (Ant Design, Select2) have dedicated adapters so the form filler handles custom selects, datepickers, and cascaders correctly.
E2E export via Strategy pattern — each framework (Playwright, Cypress, Pest) has its own code generator, registered in a strategy registry. Adding a new framework means adding one file.

What I Learned

Building a Chrome extension that bridges on-device AI with practical developer tools taught me that the real power of Gemini Nano isn't in replacing server-side AI — it's in enabling privacy-respecting intelligence for tools that handle sensitive data (like form fillers). The continuous learning loop between Chrome AI and TensorFlow.js creates a system that gets smarter over time without ever leaving the user's machine.

Fill All is open source and welcomes contributions. If you're tired of manually generating valid test data or filling the same form for the hundredth time — this one's for you.

marcuspmd / fill-all

Fill All é uma extensão Chrome de código aberto que preenche formulários automaticamente usando inteligência artificial e geradores de dados brasileiros válidos. Combina Chrome Built-in AI (Gemini Nano), TensorFlow.js e um motor de regras configurável para classificar campos e gerar dados realistas — CPF, CNPJ, RG, CEP, telefone e muito mais.

Fill All

AI-powered Chrome extension for smart form filling, recording, and demo generation

Chrome Web Store · Features · Getting started · Documentation · Security · Contributing

Overview

Fill All is an open-source Chrome extension that fills web forms using a layered pipeline of:

rules and saved templates
built-in generators for valid Brazilian data
TensorFlow.js field classification
Chrome Built-in AI / Gemini Nano for contextual filling

It is built for developers, QA engineers, automation teams, and anyone tired of filling the same form repeatedly.

Everything runs locally in the browser. No external AI API is required for the built-in AI and machine-learning flows.

Install from the Chrome Web Store:

https://chromewebstore.google.com/detail/fill-all/djnkgmelgfdjpeacmolelikhgioendjh

Screenshots

Popup

Field Icons and Rule Configuration

Options Page

General Settings	Language	Rules

Saved Forms	Form Creation	Dataset

Detection Strategy	Field Icons	Learning

Training	Log

DevTools Panel

Actions	Fields

Actions (Light Theme)	Fields (Light Theme)

Recording and Export

Recording

…

View on GitHub