Bookmarklets o que são e como sobrevivem.

Quem de nós nunca pensou ou teve uma ideia melhor para um site ou aplicação web, eu já tive e você provavelmente também, este é o assunto do post de hoje.

Então Rafael o que é um bookmarklet?

Bookmarklets vem de bookmarks, bookmarks são favoritos, daqueles que temos em nossos navegadores, bookmarklets por sua vez são scripts (Javascript) em forma de favoritos.

Em português foi desenvolvido o termo Favlets que vem de Favoritos.

Este scripts permitem você manipular o DOM da página, alterar comportamento de elementos, automatizar ações e em alguns casos até redefinir funções já existentes no próprio site.

Em portugues eles permitem que você faça da página o que você quiser.

Imagine as possibilidades

Por poder executar scripts e javascript você pode fazer quase tudo usando bookmarklets, por exemplo, chamadas ajax, preencher e submeter formulários repetitivos, mudar aparência de páginas, remover funções de validação do lado do cliente e até automação.

Um exemplo de automação que já usei, consistiu em:

Processar um loop em uma array que submetia via AJAX um formulário, obtia a resposta e adicionava no DOM para evitar ter que cadastrar centenas de entradas em um sistema web.

Você pode usar para:

Se divertir, mudando o comportamento normal da página.
Automatizar tarefas como preenchimento de formulários.
Mudar a interface de aplicações.
Carregar mais conteúdo na página.
Carregar outros scripts.
Fazer SPAM (se perguntarem não fui eu que disse que você podia usar).
Trolar os amigos.

Como isso funciona?

Para eles funcionárem usamos uma URL com a seguinte sintaxe:

javascript: codigo javascript aqui

Neste exemplo o javascript: informa ao navegador que você deseja executar um script javascript na página, depois do : vem o script a ser executado.

O script executado por um bookmarklet tem acesso a tudo que se encontra na página, literalmente tudo, ele tem o mesmo poder de acesso que um script da página.

Como fazer um?

Para fazer um tudo o que você precisa é de um editor de código (notepad, sublimetext, notepad++, textwrangler, você pegou a ideia), conhecimentos de Javascript e noção do DOM que você pretende manipular.

Uma vez que você tem os três elementos, usando seu editor deve fazer o script que será rodado, você irá escreve-lo normalmente como se fosse o script que é usado nas tags <script></script>, uma dica para tornar a leitura de seu código mais fácil e evitar conflito com variaveis globais é encapsular seu código em uma função anónima como no exemplo abaixo.


(function () {
// Script Aqui…
})();

Isso faz com que todas as variaveis declaradas usando o var tenham escopo local dentro da função () que é invodada após a declaração.

Isto é possivel porque entre o function e o () não declaramos nenhum nome, tornando assim o () a forma de invocação da função.

Tendo o seu script pronto salve uma cópia de Backup e siga os seguintes passos:

Remova todos (todos mesmos) os comentários de seu script
Eles são muito bons para outros entenderem o que o script faz, mas consomem espaço e durante a transformação de scripts para bookmarklets podem inutilizar seu script (comentando o que não deve).
Passe o seu código pelo JSHint ou JSLint, para ter certeza que ele está sem erros, e que tem todos os “;”
Quando o script for um bookmarklet ele estará em apenas uma linha, logo o interpretador não irá colocar “;” por você.
Remova todas, todas as quebras de linha
Você pode usar o procurar e substituir em editores que suportam expressões regulares substituindo o “\n” e o “\r” por nada.
Para leitura remova todas as tabulações
Mais uma vez você pode remover usando o procurar e substituir usando o “\t” quando expressões regulares forem suportadas.
Adicione no inicio do seu script “javascript:” sem aspas
Isso é o que irá fazer seu navegador entender como usar o script.

Pronto você tem um bookmarklet.

Mas Rafael como eu uso isso?

Vou apresentar 2 formas de usar isso.

A mais fácil é provavelmente copiando o código e colando na barra de endereço e pressionando “Enter”, isso irá executar o código imediatamente.

O problema deste modo é que ele não irá salvar o seu bookmarlet no navegador.

A segunda forma é adicionar o bookmarklet como favorito, para fazer isso você pode adicionar qualquer página como favorito e editar o nome e endereço, colocando no nome o titulo de seu script e no endereço o código com o javascript:, ou fazendo um HTML com um link com o href com o script e adicionando este link aos favoritos.

Neste método para ativar o bookmarklet basta acessar ele dos seus favoritos, neste caso para acesso rápido você ainda pode colocar ele na barra de favoritos.

Mas nem tudo são flores.

Quando trabalhar com bookmarklets você deve se atentar as seguintes situações:

O DOM nem sempre é o mesmo em todos os navegadores, alguns vão suportar propriedades e elementos que outros não.
O internet explorer tem um limite de caracteres para URLs de 2083 caracteres, logo se você quiser usar no IE pense em manter seu script abaixo deste numero, use um Minificador de JS se precisar, ele vai reduzir este número para você.
Saiba o que você está mudando, você pode acabar quebrando algo na página.

Bookmarlets de exemplo:

Jquerify – Carrega Jquery na página atual (criado por Karl Swedberg).
Underscorefy – Carrega a biblioteca Underscore, criado por mim, inspirado pelo Jquerify.
Readability – Bookmarklets para você adicionar páginas web ao Readability para ler depois em seus smartphones e tablets.
Printliminator – Criado por Cris Coyer do CSS Tricks para remover elementos das páginas para poder imprimir apenas o que você quer.
Delicious – Delicious criou um bookmarklet para que você possa adicionar páginas ao delicious sem ter que abrir a página deles para isso.

Cortando o caminho.

Uma ferramenta que me ajuda muito quando faço os meus é o http://userjs.up.seesaa.net/js/bookmarklet.html ela converte seus scripts em bookmarklets e já adiciona para você a função anónima.

Seus bookmarklets

Agora que vocês sabem o que é quero ver o uso deles, postem nos comentários seus bookmarklets, eles podem entrar no artigo.

Abraço a todos.