O que é o Bookmarks Grid?

Bookmarks Grid é uma extensão para Chrome que transforma a página de nova aba em um gerenciador de favoritos orientado a teclado. Em vez de procurar na barra de favoritos do Chrome ou na nova aba padrão, todos os seus favoritos ficam dispostos em um grid responsivo — a um atalho de distância da busca e a um clique do seu destino.

É a ferramenta que você procura quando a UX nativa de favoritos do Chrome começa a parecer um obstáculo.

O Problema que Resolve

A experiência de favoritos do Chrome não muda há anos. A barra de favoritos comporta poucos itens. O gerenciador de favoritos está enterrado em menus. Navegar por pastas é tedioso. A página de nova aba é espaço desperdiçado.

O Bookmarks Grid inverte tudo isso: abra uma nova aba e toda a sua biblioteca de favoritos já está lá, organizada por pasta, pesquisável instantaneamente e totalmente operável sem tocar no mouse.

Funcionalidades Principais

Abas por pasta

Todas as pastas de favoritos de primeiro nível são exibidas como abas no topo da página. Alternar entre elas é um único clique — sem dropdowns, sem navegação aninhada.

Busca instantânea

Pressione ⌘K (ou Ctrl+K) para focar o campo de busca. Digite qualquer parte do título ou URL de um favorito e o grid filtra em tempo real. O atalho funciona de qualquer lugar na página.

Reordenação por arrastar e soltar

Os favoritos podem ser reorganizados dentro de uma pasta arrastando os cards. A ordem é persistida de volta ao Chrome via API de favoritos — não é apenas uma preferência local. A navegação por teclado também é suportada durante o arraste com as teclas de seta.

CRUD completo

Todas as operações de favoritos estão disponíveis sem sair da nova aba:

• Novo favorito — pressione N ou clique no botão de adicionar, preencha o formulário, pronto
• Editar — passe o mouse sobre um card e pressione E, ou clique com o botão direito para o menu de contexto
• Excluir — passe o mouse sobre um card e pressione Backspace, ou use o menu de contexto
• Confirmar exclusão — um diálogo de confirmação evita remoções acidentais

Favicons inteligentes

Cada card de favorito exibe o favicon do site. A extensão tenta buscá-lo primeiro no DuckDuckGo, cai de volta para o serviço de favicons do Google e, se ambos falharem, renderiza um ícone SVG genérico. Sem quadrados em branco.

Modo escuro

Alterne entre os temas claro e escuro com o botão no canto superior direito. A preferência é salva no localStorage e sobrevive a reinicializações do navegador.

Atalhos de Teclado

Como Funciona

A extensão substitui a página newtab do Chrome via o campo chrome_url_overrides no manifesto. Todos os dados vêm diretamente de chrome.bookmarks.* — não há backend, nenhum serviço de sincronização e nenhum dado sai do navegador.

Hooks customizados encapsulam cada responsabilidade:

• useBookmarks — busca a árvore completa de favoritos, achata por pasta e filtra pela consulta de busca ativa
• useFavicons — resolve favicons em paralelo com a cadeia de fallback DuckDuckGo → Google → SVG
• useDarkMode — lê e persiste a preferência de tema
• useSearchShortcut — registra o listener de ⌘K / Ctrl+K e encaminha o foco para o ref do campo de busca
• useBookmarkShortcuts — registra os atalhos E e Backspace para o card com hover no momento

O arrastar e soltar é alimentado pelo @dnd-kit, que fornece sensores de ponteiro e teclado prontos para uso. Ao soltar, chrome.bookmarks.move() é chamado para persistir a nova posição.

Instalação

1. Clone o repositório e instale as dependências:

git clone https://github.com/fernandobelotto/bookmarks-grid
cd bookmarks-grid
npm install

2. Compile a extensão:

npm run build

3. Abra chrome://extensions/, ative o Modo de desenvolvedor, clique em Carregar sem compactação e selecione a pasta dist/.

4. Abra uma nova aba.

Para desenvolvimento com recarregamento automático:

npm run dev   # vite build --watch

Após cada mudança, clique no ícone de recarregar no card da extensão em chrome://extensions/.

Stack Tecnológica

• React 18 + TypeScript 5 — modelo de componentes e segurança de tipos
• Vite 5 — builds rápidos com modo watch para desenvolvimento
• Tailwind CSS 3 — estilização utility-first, modo escuro via estratégia de classe
• shadcn/ui — primitivos acessíveis de diálogo, abas, input e botão construídos sobre Radix UI
• @dnd-kit — arrastar e soltar com suporte a sensores de ponteiro e teclado
• react-hotkeys-hook — vinculação declarativa de atalhos de teclado
• Lucide React — conjunto de ícones

Filosofia de Design

Uma tela, zero configuração. Todo o estado vive na API de favoritos do Chrome ou no localStorage. Sem contas, sem nuvem, sem telemetria. A extensão faz exatamente um trabalho — oferecer uma nova aba melhor — e tenta ficar completamente fora do caminho em todo o resto.