Introdução aos Bookmarklets

Pequenos scripts de código que podem ser guardados como bookmarks e que nos permitem interagir com os websites que visitamos.

Publicado por Braus Team em May 01, 2020

O que são Bookmarklets?

Os bookmarklets são pequenos scripts de código Javascript, armazenados como bookmarks tradicionais e que permitem facilitar a realização de pequenas tarefas nos websites que visitamos.

Por serem baseados em bookmarks são fáceis de adicionar e de gerir. Podem igualmente ser sincronizados entre vários computadores e não necessitam de ser instalados.

Porque são úteis?

Os bookmarklets permitem interagir com a página que está a ser consultada, seja para facilitar a extração de informação, alterar estilos ou a estrutura da página ou qualquer outro tipo de finalidade que possa ser útil.

O código javascript permite aceder a toda a estrutura e conteúdo da página o que significa que toda a informação que está presente naquele momento no browser pode ser usada e manipulada programaticamente.

Qualquer alteração que seja feita desta forma não é persistente e desaparece assim que a página for recarregada. Como os bookmarklets não produzem alterações permanentes, será necessária repetir sua execução sempre que a página for (re)carregada.

Porque não criar um plugin?

Cada browser possui o seu próprio sistema de plugins, obedecendo a um conjunto de regras e procedimentos específicos. O que significa que um plugin criado para um browser provavelmente não irá funcionar noutro sem algum tipo de adaptação.

Se, por exemplo, pretendermos trocar a cor de um texto ou aumentar o seu tamanho para melhorar a legibilidade, podemos fazê-lo facilmente com recurso a um bookmarklet, evitando a complexidade da criação de um plugin.

Infelizmente a utilização de bookmarklets tem caido em desuso com o crescente investimento no suporte de plugins por parte dos browsers. As "lojas" integradas permitem facilitar a divulgação e exploração de novos plugins, tornando-os mais atractivo tanto para os utilizadores, como também para as empresas e profissionais que pretendem criar produtos digitais ou ferramentas integradoras com os seus serviços e plataformas.

No entanto este formato, apesar de menos atrativo para uma audiência mais abrangente, apresenta argumentos muito fortes pela sua simplicidade, facilidade de criação e de distribuição.

Um outro aspecto positivo dos bookmarklets é que não influenciam nem sobrecarregam o browser, pois apenas são carregados e executados no momento em que são utilizados.

Alguns exemplos de utilização

Um bookmarklet tanto pode ser criado com um propósito abrangente, com vista a funcionar num grande número de websites, como pode ser criado para resolver um problema particular num website específico.

Melhorar a legibilidade ou usabilidade

  • Melhorar a legibilidade através da alteração do layout, da remoção de elementos não essenciais ou dos estilos e fontes utilizados;
  • Visualizar imagens numa dimensão diferente da original;
  • Organizar a informação de uma forma personalizada;
  • Interagir com outros serviços online - motores de pesquisa, redes sociais, tradutores.

Apoio ao desenvolvimento

  • Realização de testes, simulando uma ou mais ações do utilizador;
  • Preenchimento automático de formulários com valores pré-definidos;
  • Validar a presença (ou ausência) de informação;
  • Forçar estados ou pré-configurações;
  • Simular testes de carga.

Extração de informação

  • Facilitar a pesquisa e obtenção de informação como endereços de e-mail, moradas ou contactos telefónicos;
  • Extracção de textos, pdfs, imagens, links ou outro tipo de conteúdos.

Como adicionar um bookmarlet?

A forma mais fácil é arrastar um bookmarklet presente numa página para a barra de favoritos.

Para usar, basta estar navegar para página onde se pretende executar o código e clicar sobre o bookmarklet.

Como criar um bookmarklet

Para criar um bookmarklet devem apenas ser cumpridos os seguintes requisitos:

  • iniciar com o termo javascript:;
  • estar formatado em linha;
  • conter código javascript válido.
javascript:(function(){alert("O website "+document.location.hostname+" é 👍!");})()

Bookmarklet

Este bookmarklet pode facilmente ser partilhado e adicionado aos favoritos de um qualquer browser. Apesar de não realizar qualquer tarefa útil, serve o propósito de demonstrar que pode funcionar em qualquer browser e tirar partido do contexto em que se encontra para a execução de uma tarefa.

Alguns exemplos

Modificar o texto de qualquer página

O seguinte bookmarklet permite modificar o texto de qualquer página. Para testar nesta página basta carregar no link e de seguida posicionar o cursor do rato em qualquer parte do texto para começar a modificar o seu conteúdo.

EditarPágina

Para adicionar, basta arrastar o link para a barra de Bookmarks e usar na página pretendida - consultar "Como adicionar um bookmarlet?"

Código fonte:

javascript: (function(){document.body.contentEditable = 'true';document.designMode = 'on';}

Para usar num qualquer outro website, basta copiar o seguinte link para os favoritos do browser e executar sobre o website pretendido.

A linha de código javascript usado no link anterior pode também ser copiada e inserida directamente na barra de endereços do browser, para alcançar o mesmo efeito.

Outros recursos úteis



A Braus é uma empresa de engenharia de software, especializada no desenvolvimento de aplicações para a web.

Tiramos partido das mais recentes tecnologias web para a criação de produtos digitais orientados ao negócio. Criamos websites e web apps à medida.

Acompanhe as nossas redes sociais ou envie-nos uma mensagem.