Pitch: Eu criei minha primeira extensão Chrome porque editar localStorage era irritante
Finalmente publiquei minha primeira extensão Chrome.
Ela se chama DataSidekick, e eu criei porque cansei de brigar com o DevTools toda vez que precisava inspecionar ou editar localStorage e sessionStorage.
E sim, eu paguei a lendária taxa de US$ 5 da Chrome Web Store, então emocionalmente eu precisava publicar alguma coisa. Caso contrário, teria sido o pior investimento da minha vida.
O que é o DataSidekick?
DataSidekick é uma extensão Chrome que abre como um painel lateral e ajuda desenvolvedores a trabalhar com storage do navegador de uma forma mais limpa.
Em vez de ficar cavando no DevTools e editando strings cruas, você ganha uma interface focada para:
- visualizar
localStorage - visualizar
sessionStorage - buscar por chave ou valor
- editar valores simples inline
- editar JSON visualmente
- importar dados de um JSON
- exportar dados para JSON
- esconder keys ruidosas
- solicitar acesso por site/origem
Você pode conferir aqui:
Por que eu criei isso
Storage do navegador é simples até deixar de ser.
Muitas aplicações salvam estados úteis no localStorage, mas a experiência padrão de desenvolvimento ainda é bem ruim:
{"user":{"name":"Rodrigo","settings":{"theme":"dark"}}}
Tecnicamente legível? Sim.
Agradável de editar? De jeito nenhum.
Eu queria algo mais próximo de um pequeno cockpit de desenvolvimento: abrir o painel, encontrar a key, inspecionar o valor, editar com segurança e seguir em frente.
A feature com que eu mais me importei: edição visual de JSON
A ideia principal era simples:
Se um valor é um JSON válido, não trate ele como uma string qualquer.
Então, em vez disso:
{"a":"b","settings":{"theme":"dark"}}
O DataSidekick exibe o JSON estruturado de um jeito mais legível, facilitando a inspeção e edição de valores aninhados.
Esse foi o primeiro momento de “ok, isso aqui é realmente útil”.
Permissões do Chrome foram o chefão final
A extensão precisa ler e editar o storage da página atual. Isso significa que permissões importam.
No começo, eu deixei uma permissão desnecessária no manifest e a Chrome Web Store rejeitou a extensão.
Justo. Vacilo meu.
A abordagem final ficou mais intencional:
- sem permissão
downloadsdesnecessária - acesso ao site é solicitado apenas quando necessário
- o usuário vê quando o acesso é exigido
- os dados permanecem locais no navegador
Para uma ferramenta que mexe com storage do navegador, acho que essa transparência é importante.
Exportando sem a permissão de downloads
Uma pequena lição: exportar um arquivo JSON não exige necessariamente a permissão downloads do Chrome.
Para o meu caso, isso aqui já é suficiente:
const blob = new Blob([JSON.stringify(payload, null, 2)], {
type: "application/json"
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "datasidekick-export.json";
a.click();
URL.revokeObjectURL(url);
Como eu não estava usando chrome.downloads.download(), a permissão era desnecessária.
A Chrome Web Store percebeu. A Chrome Web Store estava certa.
Dolorido, mas útil.
Features atuais
A primeira versão pública inclui:
- interface em Chrome Side Panel
- suporte a
localStorageesessionStorage - editor visual de JSON
- busca por chave/valor
- import/export JSON
- fluxo de acesso por site
- keys ocultas
- filtro de keys ruidosas
- favoritos
- dark/light mode
- controle de tamanho da fonte
- playground no site
O playground
Também adicionei um playground no site para as pessoas entenderem a ideia antes de instalar qualquer coisa.
Isso foi importante porque ferramentas que mexem com storage do navegador podem parecer um pouco sensíveis. Eu queria que as pessoas vissem o que a extensão faz antes de conceder acesso a uma página.
Teste aqui:
O que eu aprendi
Algumas coisas que levei dessa primeira versão:
- Pequenas dev tools ainda valem muito a pena.
- Permissões em extensões Chrome merecem atenção de verdade.
- Uma decisão simples de UX pode importar mais do que uma feature complexa.
- Publicar em uma store é bem diferente de “funciona localmente”.
- Pagar US$ 5 te deixa emocionalmente comprometido.
O que vem depois?
Essa é minha primeira extensão Chrome, mas definitivamente não será a última.
Algumas ideias para versões futuras:
- suporte a IndexedDB
- visualização melhor de diff
- undo/redo
- validação por schema
- histórico de storage
- interações melhores no editor JSON
Por enquanto, estou feliz que ela está no ar.
Se você trabalha com localStorage ou sessionStorage com frequência, eu adoraria receber feedback:
Ou o link do plugin: DataSideKick
Criado por um desenvolvedor que só queria parar de editar JSON como um homem das cavernas.