Pitch: OpenCode Browser: extensão open source que conecta o Chrome ao seu agente OpenCode
Olá, pessoal do TabNews!
Estou desenvolvendo o OpenCode Browser, uma extensão de navegador open source (licença MIT) que conecta o Chrome ao OpenCode, um agente de código open source que roda no terminal, instalado na sua máquina. Ela tem duas caras: um chat no painel lateral (side panel) e um conjunto de ferramentas browser_* que o agente pode usar para navegar, ler e interagir com páginas.
A ideia nasceu de uma limitação prática: o agente escreve e revisa código, mas não consegue ver o resultado na tela. Com a extensão, ele abre uma aba, lê a página, clica, preenche formulários e confere o console — com você aprovando as ações.
Aviso desde já: o projeto está em desenvolvimento ativo. A instalação ainda é manual (build local e carregar sem compactação), a API pode mudar e algumas coisas vão quebrar. É justamente por isso que estou publicando: quero feedback e ajuda para amadurecer.
O que dá para fazer
- Conversar com o modelo que você já usa no OpenCode direto no painel lateral do navegador.
- Pedir coisas como "abra o Hacker News e resuma as 5 principais notícias" e acompanhar o agente executando, com cards de progresso.
- Usar as 18 ferramentas
browser_*: ler a página (árvore de acessibilidade com refs), buscar elementos, extrair texto, clicar e digitar, preencher formulários, executar JavaScript, tirar screenshot, ler console e requisições de rede, criar/anexar/fechar abas, redimensionar janela, fazer upload de arquivo, rodar um lote de até 20 ações e até gerar um GIF da sessão. - Manter o agente isolado em um grupo de abas da sessão — ele não sai mexendo nas suas abas.
- Aprovar permissões: leitura roda direto; ações pedem confirmação (uma vez / nesta sessão / sempre / negar), com lista de domínios bloqueados e um card de plano quando o agente vai visitar domínios novos.
Dois modos de uso
1. Direto no navegador: o painel lateral tem chat, seletor de modelo e o histórico das conversas criadas por ele. É o jeito mais confortável para explorar.
2. Pela CLI: o plugin browser-relay registra as ferramentas browser_* no seu OpenCode. Ou seja, em qualquer sessão normal no terminal, o agente pode usar o navegador — basta a extensão estar conectada. Isso abre espaço para coisas como depurar uma página enquanto você olha o código ou acompanhar uma automação passo a passo.
Nos dois casos, a extensão fala apenas com o servidor local do OpenCode (127.0.0.1) e o plugin escuta somente em loopback. O modelo é o que você já tem configurado no OpenCode.
Como testar
Pré-requisitos: Node.js 20+, Chrome/Chromium 116+ e OpenCode v2.
git clone https://github.com/marcos2872/opencode-browser-extension
cd opencode-browser-extension
npm install
npm run build
npm run install:plugin
Depois:
- Abra
chrome://extensions, ative o modo desenvolvedor e clique em "Carregar sem compactação", apontando para a pastadist/. - Rode
opencode pairno terminal, copie o link e cole no onboarding do painel lateral. - Escolha um modelo, crie uma conversa e peça algo.
A documentação cobre arquitetura, as ferramentas, o protocolo do plugin e o modelo de segurança na pasta docs/.
Status e limitações
- Em desenvolvimento ativo, sem release estável. A instalação é manual e ainda não está na Chrome Web Store.
- Foco em Chrome/Chromium (testado em Chromium e Brave). Firefox não é suportado no momento.
- Mudanças podem quebrar a compatibilidade entre extensão e plugin; mantenha os dois atualizados.
- Segurança é um tema em aberto: automação de navegador é poderosa. O modo "permitir automaticamente" deve ser evitado em sites sensíveis.
Open source, issues e PRs
O código está sob MIT em: https://github.com/marcos2872/opencode-browser-extension
Issues e PRs são muito bem-vindos. Especialmente:
- relatos de bugs com passos para reproduzir (navegador, versão do OpenCode e o que o agente tentava fazer);
- problemas de instalação ou pareamento em Linux, macOS e Windows;
- melhorias de documentação e testes;
- ideias de ferramentas ou de UX para as permissões.
Se você testar e algo não funcionar, abre uma issue mesmo que pareça pequeno — nessa fase, todo relato ajuda a priorizar.
E se o projeto fizer sentido para você, uma estrela no repo ajuda a divulgar.
Obrigado!