You are here

Home

Bookmarklet para pegar um texto selecionado

O bookmarklet é um pequeno programa em JavaScript que é armazenado como uma URL nos favoritos do navegador. Entre os usos de um bookmarklet (também chamado de favlet ou favelet) estão:

  • modificar a aparência de uma página;
  • extrair dados de uma página;
  • submeter um página para um serviço de validação ou tradução ou qualquer outro serviço;
  • submeter um texto selecionado em uma página para um serviço de busca ou para qualquer outro serviço.

Para você criar um bookmarklet você deve criar um favorito e colocar um trecho de código JavaScript no lugar do endereço (URL) do favorito. Ou, como é mais usado, arrastar um link que tenha o trecho do código para os favoritos do navegador. Estando o bookmarklet criado, é só você clicar no favorito que foi criado para executar o código, assim como você clica em qualquer outro favorito.

Exemplos

O Google disponibiliza vários bookmarks em seus serviços (para usá-los arraste o link para os seus favoritos):

Vou usar o exemplo do bookmarklet de tradução do Google para criar um bookmarklet que faça uma busca neste blog com o texto selecionado em uma página.

O código JavaScript do bookmarklet que faz a tradução usando o serviço do Google é o seguinte:

var t = ((window.getSelection && window.getSelection()) || (document.getSelection && document.getSelection()) || (document.selection && document.selection.createRange && document.selection.createRange().text));
var e = (document.charset || document.characterSet);
if (t != '') {
    location.href = 'http://translate.google.com.br/translate_t?text=' + t + '&hl=pt-BR&langpair=auto|pt&tbb=1&ie=' + e;
} else {
    location.href = 'http://translate.google.com.br/translate?u=' + escape(location.href) + '&hl=pt-BR&langpair=auto|pt&tbb=1&ie=' + e;
};

Na linha 1, o programa tenta pegar o texto que está selecionado para armazená-lo na variável t. Na linha 2 ele armazena o encoding de caracteres da página na variável e:

E por último ele faz uma verificação: se algum texto foi selecionado, o valor das variáveis t e e são passados com parâmetros na URL de tradução que será carregada. Se nenhum texto foi selecionado, a URL da página atual (location.href) será passada como parâmetro:

As URLs do serviço de tradução do Google são:

  • http://translate.google.com.br/translate_t: para traduzir textos
  • http://translate.google.com.br/translate: para traduzir páginas inteiras
E os parâmetros que devem ser passados são:
  • text: o texto a ser traduzido;
  • u: a URL a ser traduzida;
  • hl: o idioma da interface (host language);
  • langpair: o par de linguagens que será usado para a tradução. No exemplo é usado auto|pt, ou seja detecta o idioma de origem automaticamente e traduz para o português;
  • ie: encoding da página.

Vamos criar agora o bookmarklet que fará a busca em nosso blog por qualquer texto selecionado. Ele será idêntico ao exemplo mostrado acima, a única diferença é que a URL para o qual será passado o parâmetro (o texto selecionado) será:

http://cleber.net.br/search/node/[parametro]

E no caso de nenhum texto estar selecionado, será exibido uma caixa de diálogo pedindo algum texto:

var t = ((window.getSelection && window.getSelection()) || (document.getSelection && document.getSelection()) || (document.selection && document.selection.createRange && document.selection.createRange().text));
if (t != '') {
	location.href = 'http://cleber.net.br/search/node/' + t;
} else {
	t = prompt('Era para você selecionar um texto errr! Agora digite um abaixo:', '');
	if (t && t != '') {
		location.href = 'http://cleber.net.br/search/node/' + t;
	} else {
		alert('Desisto!');
	}
};

Para utilizar este bookmarklet, arraste o botão abaixo para a sua barra de favoritos. Depois em qualquer página que você estiver é só clicar nele.

Buscar em cleber.net.br

Abaixo alguns links com diretórios de bookmarklets:

Tags: 
código-fonte
dica
JavaScript
programação
bookmarklet