eugrifo
do zero ao widget

O processo completo tem seis etapas e leva cerca de 10 minutos. Você vai precisar de:

• ✦ Uma conta no GitHub (gratuita)
• ✦ Um repositório no GitHub — pode ser privado ou público
• ✦ O Chrome ou outro navegador baseado em Chromium
• ✦ Um site onde colar o widget (HTML puro, WordPress, Vercel — qualquer coisa) — opcional

Esse repositório vai funcionar como seu banco de dados pessoal de destaques. Pode ser privado — só você vai escrever nele via token. O widget pode lê-lo sem token se for público.

1. Acesse github.com e clique em New repository
2. Dê um nome — ex: meus-highlights
3. Escolha Private ou Public (sua preferência)
4. Marque "Add a README file" para que o repositório não fique vazio
5. Clique em Create repository

O token é o que permite à extensão salvar e ler seus highlights no GitHub. Ele fica guardado localmente no seu navegador e nunca é compartilhado.

1. Vá em github.com → Settings → Developer settings → Personal access tokens → Tokens (classic)
2. Clique em Generate new token (classic)
3. Dê um nome como eugrifo-extension
4. Em Expiration, escolha No expiration para não precisar renovar
5. Em Select scopes, marque apenas repo
6. Clique em Generate token e copie o token agora — ele só aparece uma vez

A extensão não está na Chrome Web Store — você a instala como um arquivo local. Por isso o Chrome precisa estar em modo desenvolvedor.

Primeiro, baixe e organize os arquivos numa pasta — ex: eugrifo/:

1. Abra o Chrome e acesse chrome://extensions
2. Ative o Modo do desenvolvedor (toggle no canto superior direito)
3. Clique em Carregar sem compactação
4. Selecione a pasta eugrifo/
5. A extensão vai aparecer na lista — clique no ícone de puzzle 🧩 na barra do Chrome para fixá-la

Agora você conecta a extensão ao seu repositório GitHub.

1. Clique no ícone da extensão na barra do Chrome
2. Clique em ⚙️ Configurações
3. Na aba 🔗 GitHub, preencha:

   Token       ghp_xxxxxxxxxxxxxxxx      ← o que você copiou no passo 2
   Usuário     od3zza                   ← seu usuário do GitHub
   Repositório meus-highlights          ← o repo criado no passo 1
   Arquivo     eugrifo-highlights.json  ← pode deixar o padrão

4. Clique em 💾 Salvar configurações
5. Clique em 🧪 Testar conexão — deve aparecer "Conectado!"

Na aba 🎨 Aparência você pode personalizar o nome da extensão e as quatro cores disponíveis para destacar textos.

Com tudo configurado, é só usar:

1. Vá em qualquer página da web
2. Selecione um trecho de texto com o mouse
3. Clique no ícone da extensão na barra do Chrome
4. Escolha uma cor, adicione uma nota ou tags se quiser
5. Clique em 💾 Salvar highlight — o destaque é enviado ao GitHub primeiro e só então aparece visualmente na página

O arquivo eugrifo-highlights.json no seu repositório será criado automaticamente nesse primeiro save.

O widget lê seu eugrifo-highlights.json do GitHub e exibe tudo automaticamente — com busca e filtro por tags. Você não precisa subir nenhum arquivo extra.

Na aba 📎 Widget das configurações, o snippet já estará gerado com seus dados. A estrutura é essa:

<div id="meus-grifos"></div>
<script
  src="https://cdn.jsdelivr.net/gh/od3zza/eugrifo@main/highlights-widget/widget.js"
  data-owner="seu-usuario"
  data-repo="seu-repositorio"
  data-file="eugrifo-highlights.json"
  data-lang="pt"
  data-target="meus-grifos">
</script>

Para repositórios privados, gere um segundo token no GitHub com permissão de leitura apenas (Fine-grained token → Contents: Read-only) e adicione o atributo:

  data-token="github_pat_xxxxx"

O highlight não fica destacado na página após recarregar
Clique em 🔄 Restaurar highlights no popup. Se ainda não funcionar, abra o DevTools (F12), vá em Console e veja se há erros.

O destaque some logo após salvar
A partir da v4.0, o highlight só aparece na página após confirmação do GitHub. Se o texto sumiu sem mensagem de erro, verifique a conexão e as configurações de token.

O arquivo JSON está como [] (array vazio)
Edite o arquivo no GitHub e troque o conteúdo para {} (chaves, não colchetes). O sistema espera um objeto.

O widget não carrega no site
Verifique se os atributos data-owner e data-repo estão preenchidos corretamente na tag <script>, se o repositório existe e se o caminho do arquivo bate com o que está nas configurações da extensão.

As cores dos highlights aparecem todas iguais no widget
Certifique-se de estar usando o widget.js v4.0 ou superior. Versões antigas não reconheciam cores no formato hex — apenas nomes como yellow ou blue. A migração automática normaliza os dados na próxima vez que você salvar ou restaurar um highlight.

Erro "token inválido" nas configurações
O token precisa começar com ghp_ ou github_pat_. Se tiver outro formato, gere um novo na página de tokens do GitHub.

Erro 404 ao testar conexão
O nome do repositório ou do usuário está errado nas configurações. Verifique se batem exatamente com a URL do repositório no GitHub.