Obsidian Web Clipper
Sumário
- Introdução
- O que é clipping?
- Obsidian app principal e extensão
- Instalação
- Comandos básicos
- Clipper
- Highlighter
- Configuração avançada do Highlighter
- Transcrição do Youtube
- Código para extrair transcrição dos vídeos do Yotube
- Uso com outros aplicativos
- Saiba mais
- Vídeo tutorial em inglês
Introdução
Com o fim do Omnivore, ferramenta de captura de artigos da web, a melhor alternativa parece ser o Wallabag. Todavia, não consegui instalá-lo no Debian 12 e ainda não tenho um servidor dedicado. Por hora, o Obsidian Web Clipper (versão 0.10.5 na data de publicação deste post) tem se mostrado bem útil, especialmente por ser uma extensão e não um app dedicado.
Este longo post é voltado para quem costuma salvar artigos para ler depois ou deseja ter uma cópia deles para referência futura. Destacarei um uso que não exige o app principal do Obsidian e utiliza área de transferência em conjunto com outros apps.
Atenção: Caso saiba inglês ou queira arriscar a tradução automática de legendas do Youtube, há um excelente tutorial em vídeo que menciono no final do post, possivelmente mais didático e completo que o meu.
O que é clipping?
Seu nome é bem sugestivo e remete à velha prática de recortar (clipping) techos de jornais impressos (um suporte de mídia efêmero), por exemplo: algum anúncio de imóvel / vaga de emprego (para uso mais imediato) ou alguma matéria importante a ser guardada como lembrança, referência, evidência etc.
Já no mundo digital, aplicativos e extensões com esta finalidade geralmente são conhecidos e categorizados como Read It Later, numa tradução livre: (salvar para) ler depois. Uma evolução da função "Favoritos" do navegador, com a diferença de que o artigo é copiado (clipped). Desta forma, mesmo que no futuro a página saia do ar ou fique disponível somente para assinantes (o famoso paywall), ela estará preservada neste arquivo pessoal. Sem contar o tratamento visual da página, que muitas vezes a deixa mais legível e menos poluída em relação à versão original.
Dentre os aplicativos / extensões dessa categoria, podemos citar: Pocket, Instapaper, Evernote Web Clipper, Joplin Web Clipper, entre outros. Provavelmente, você já deve ter ouvido falar de algum deles; o primeiro está hoje vinculado à Mozilla / Firefox, mas ainda é um app proprietário.
Obsidian app principal e extensão
Para quem não conhece, o Obsidian é um aplicativo de anotações (proprietário), famoso pelos links internos entre notas e diversos plugins da comunidade, incluindo os de integração com outros aplicativos. Muito utilizado por entusiastas de Personal Knowledge Management (Gerenciamento de Base de Conhecimento Pessoal). Recentemente, seu desenvolvedor criou uma extensão para navegadores que é gratuita e open source chamada Obsidian Web Clipper.
Instalação
O Obsidian Web Clipper pode ser instalado na loja de extensões do seu navegador favorito: Chrome, Safari, Firefox, Edge, Brave, Arc, Orion ou Vivaldi. Observação: há também versões para smartphone.
Comandos básicos
Clipper
Serve para salvar o artigo na íntegra. Basta ir ao site desejado, clicar no ícone da extensão ou utilizar o atalho Alt+Shift+O
. Será exibido um quadro com o título e as propriedades da página. Mais abaixo, uma caixa de texto com todo seu conteúdo em Markdown . Na parte inferior, há um botão roxo Add to Obsidian
. Se o referido programa estiver instalado, será realizada a importação para sua base dados.
Highlighter
É a versão virtual do marca-texto amarelo para ser utilizado diretamente no site aberto em seu navegador. Útil para salvar apenas partes do texto que julgar mais importantes. Para acioná-lo, clique no ícone da extensão e depois no ícone da caneta ao lado da engrenagem ou use o atalho Alt+Shift+H
. O cursor do mouse se transformará em cruz.
Se quiser grifar um parágrafo inteiro, mova o cursor sobre ele e, quando aparecer uma moldura pontilhada, clique uma vez com o botão esquerdo; caso queira grifar um trecho menor (frase ou palavra), clique e arraste com o botão esquerdo pressionado até terminar a seleção, então solte.
Observação: Se cometer algum erro, é possível desfazer com Ctrl + Z
. Para excluir algum grifo basta deixar o cursor sobre ele e clicar uma vez com o botão esquerdo do mouse 1. Quando terminar suas marcações, clique em Clip highlights
na parte superior da tela. Neste momento, os grifos já estarão gravados na extensão do navegador, mas será exibida a mesma tela do Clipper, supracitado, com o botão roxo Add to Obsidian
, caso deseje importar para este app.
Configuração avançada do Highlighter
Nesta seção, você definirá como o texto previamente marcado será exibido no navegador e como a Nota será salva ao usar a função Highlighter. Para isso, clique no ícone da extensão e, depois, na engrenagem e, por fim, em Highlighter
.
Se a opção Always show highlights
(sempre mostrar marcações) estiver ativada, ao visitar a página previamente grifada, você a verá com todas suas marcações. Caso esteja desativada, o site será exibido em sua forma original.
Já em Clip behavior
(comportamento do recorte), temos três opções:
Highlight the page content
(destaque o conteúdo da página): A Nota será gerada com o artigo na íntegra e as partes grifadas com marcação em amarelo;Replace the page content
(substitua o conteúdo da página): A Nota gerada contará apenas com os textos das marcações. Ou seja: todo o texto que você marcou de amarelo será recortado e colado na Nota;Do nothing
(não faça nada): A Nota será criada com o artigo na íntegra, mas sem nenhuma marcação.
Transcrição do Youtube
Para quem não sabe o que é transcrição: trata-se da geração de voz para texto das falas presentes em vídeos do Youtube. Elas não são perfeitas, mas ajudam bastante em alguns casos. Exemplo: pesquisar o momento exato de determinada fala numa entrevista, pesquisando por palavras-chave. Além do texto, há também o tempo, vulgo "minutagem", chamado em inglês de timestamp. A propósito: clicando com o botão direito no vídeo, temos a opção Copiar URL do vídeo no momento atual
, algo útil para compartilhar o link com o tempo exato da fala.
A ideia de manter uma Nota com transcrição de vídeos remete à época pré-Youtube, na qual o acervo do Programa Roda Viva da TV Cultura não estava digitalizado. Para rever, dependíamos de uma reprise ou comprar o VHS (caso nós mesmos não o tivéssemos gravado). Alternativamente, buscar no site Memória Roda Viva, que conta também com transcrição dos episódios (acredito que, ao menos no início, feito por humanos). Aqui, um exemplo com o saudoso Domenico de Masi.
Voltando ao Obsidian Web Clipper, ele permite também a criação de templates (modelos) personalizados. Contudo, isso requer conhecimento técnico do usuário ou então que alguém disponibilize um código pronto. No meu caso, foi a segunda opção: @kepano (desenvolvedor do Obsidian) postou um código para extrair a transcrição de vídeos do Youtube.
Código para extrair transcrição dos vídeos do Youtube
Primeiro, copie o código do quadro abaixo:
{{description}}
{{selectorHtml:ytd-engagement-panel-section-list-renderer[visibility$=\"EXPANDED\"] #segments-container|strip_tags:"h2,ytd-transcript-segment-renderer"|replace:"ytd-transcript-segment-renderer":"li"|markdown}}
Agora, clique no ícone da extensão, depois no ícone da engrenagem. Certifique-se que à esquerda existe apenas o Template Default
. Se houver outros, o importante é que o Default
esteja selecionado. Depois, clique em More
e Duplicate
à direita superior. Será criado um Template chamado Default 2
. Em Template Name
mude seu nome para Youtube
. No penúltimo quadro da página, Note content
, cole o código copiado anteriormente. Por último, no campo Template triggers
, digite https://www.youtube.com
(para que este template seja selecionado automaticamente quando estiver no Youtube).
Agora feche a tela de configuração e abra um vídeo do Youtube que não seja ao vivo. Na descrição dele, clique em ...mais
, depois em Mostrar transcrição
. Pronto: clique no ícone da extensão ou use o atalho Alt+Shift+O
. À esquerda superior, certifique-se que Youtube
está selecionado. Então você pode adicionar essa nota ao Obsidian (Add to Obsidian
), salvar o arquivo ou copiá-lo para área de transferência, clicando na seta da direita inferior (como já veremos adiante).
Uso com outros aplicativos
Deste ponto em diante, focaremos no uso da extensão em conjunto com outros apps. Para isso, depois de usar o Clipper ou Highlighter (cf. acima, no tópico Comandos Básicos) clique na seta para baixo que está à direita do botão Add to Obsidian
. Serão abertas mais duas opções: 1) Copy to clipboard
(Copiar para área de transferência) e 2) Save file...
(Salvar arquivo):
Na opção 2, será salvo um arquivo em markdown .md
. Já na primeira opção, o conteúdo ficará disponível na sua área de transferência, vulgo Ctrl + V
, podendo ser colada em qualquer editor de texto, desde um simples bloco de notas até editores mais complexos, que suportam este formato, como o próprio Obsidian, Joplin e até mesmo o Evernote. Obviamente, a formatação será exibida corretamente somente nos apps que suportam a linguagem markdown que, aliás, é mais uma (co)criação do saudoso Aaron Swartz.
Abaixo, colei o texto no app Joplin versão 3.0.12 para Linux Debian 12. Não gosto dessa visualização em dois painéis, mas a habilitei para mostrar as diferenças entre o texto puro (à esquerda) e o modo de visualização (à direita). Alguns editores Markdown permitem highlights (grifos, marcações), usando dois sinais de igual no início e no final do trecho a ser destacado. Perceba que o texto fica bem mais legível e enxuto no modo renderizado:
Saiba mais
Este post foi longo, principalmente por tentar ser o mais analítico e didático possível, a fim de incluir pessoas que tem pouco ou nenhum conhecimento com estas ferramentas. Dito isto, para quem quiser se aprofundar ainda mais, saiba que o Obsidian Web Clipper abre inúmeras possibilidades.
Você pode buscar mais informações no site oficial da extensão e em seu repositório oficial do GitHub, que conta com a documentação completa e exemplos de uso.
Vídeo tutorial em inglês
Pouco antes de terminar o post, encontrei o vídeo abaixo. Ele tem 14 minutos e parece ser o melhor tutorial em vídeo do Obsidian Web Clipper até o momento. Gostei muito de um template mostrado nele, chamado URL. Está em inglês, mas caso não se sinta confortável com o idioma, pode usar a ferramenta de tradução de legendas do Youtube. Também estou deixando o sumário do vídeo com as respectivas marcações de tempo, caso queira ir direto a algum ponto:
- 00:00 0) What's happening
- 00:17 1) What you get
- 00:50 2) Installation
- 01:32 3) Configuration
- 03:40 4) Default template
- 05:53 5) Our first clipping
- 07:28 6) Custom templates
- 08:34 7) Common use cases
- 13:49 8) How to get help
O comando para excluir os grifos parece não funcionar em alguns sites. Não sei qual o critério.↩