Gerador de bookmarklets: transforme JavaScript em bookmarklet

Como usar este gerador de bookmarklets

1. Dê um nome ao favorito e cole o seu JavaScript na caixa de código, ou clique em Carregar o exemplo do título da página para ver um exemplo pronto. O javascript: inicial é opcional: o gerador o remove e adiciona o dele.
2. Clique em Criar bookmarklet. A URL gerada aparece logo abaixo, com o tamanho em caracteres.
3. Arraste o botão escuro até a barra de favoritos. Se a barra estiver oculta, ative-a antes pelo menu Exibir ou pelas configurações do navegador.
4. Abra qualquer página e clique no favorito. O script roda uma vez, sobre essa página.

Clicar no botão nesta página não faz nada, de propósito: um bookmarklet foi feito para rodar na página que você está lendo, não no gerador.

O que é, de fato, um bookmarklet

Um bookmarklet é um favorito comum do navegador cujo endereço começa com javascript:em vez de https:. Abra uma página, clique no favorito e o navegador roda o seu script sobre essa página, sem ir a lugar nenhum. Bookmarklets servem para ações específicas de uma página: copiar uma citação formatada, alternar um modo de leitura, extrair o texto selecionado ou abrir a URL atual em outro serviço. Eles dispensam a instalação de uma extensão, não pedem permissões e ficam na barra de favoritos como qualquer outro link.

Como converter JavaScript em bookmarklet

Converter um script à mão leva três passos, e o gerador faz todos por você. Veja um script de duas linhas e o bookmarklet em que ele se transforma:

const n = document.links.length;
alert(n + ' links nesta página');

javascript:(()%3D%3E%7B%0Aconst%20n%20%3D%20document.links.length%3B%0Aalert(n%20%2B%20'%20links%20nesta%20p%C3%A1gina')%3B%0A%7D)()

1. Envolva o código numa função

A ferramenta coloca o seu código dentro de uma função de seta executada na hora,(() => { … })(). Isso evita que as suas variáveis colidam com o que a página já define e importa por um segundo motivo: quando o código de uma URL javascript:termina com um valor de texto, o navegador substitui a página por um documento novo que mostra esse texto. Uma função com corpo em bloco não devolve nada, então a página continua onde está. Escrevendo à mão, a alternativa clássica é começar o código com void.

2. Codifique com porcentagem

Os navegadores removem tabulações e quebras de linha brutas de qualquer URL antes de usá-la, então um script de várias linhas colado direto num favorito é espremido numa linha só. Um único comentário // passa a engolir tudo o que vem depois, e instruções que dependiam de quebras de linha se grudam. A codificação transforma cada quebra de linha em %0A, que sobrevive; o navegador decodifica o código de novo logo antes de rodá-lo. A codificação também protege espaços, aspas duplas, % e #.

3. Adicione o prefixo javascript:

O esquema javascript: é o que avisa ao navegador que o restante do endereço deve ser executado como script. A string pronta é o que você arrasta até a barra ou cola num favorito.

Como instalar um bookmarklet

No computador

Arraste o botão escuro até a barra de favoritos no Chrome, no Edge, no Firefox, no Safari ou em qualquer outro navegador de computador. Se arrastar não for prático, clique emCopiar a URL do favorito, crie um favorito novo e cole a URL no campo de endereço.

No iPhone, no iPad e no Android

Os navegadores de celular não têm barra de favoritos para arrastar, então use o método da edição:

1. Clique em Copiar a URL do favorito.
2. Salve qualquer página como favorito; esta mesma serve.
3. Abra os favoritos, edite o favorito novo e troque o endereço pela URL javascript: copiada. Aproveite e renomeie.
4. Vá até a página em que quer rodá-lo. No Safari do iPhone ou do iPad, abra o favorito pela lista de favoritos. No Chrome para Android, digite o nome do bookmarklet na barra de endereço e toque na sugestão do favorito; abri-lo pela tela de favoritos tira você da página, e ele fica sem nada em que rodar.

Não cole na barra de endereço

Parece um atalho, mas o Chrome remove de propósito o javascript: inicial do texto colado na barra de endereço, uma defesa contra golpes que enganam as pessoas para colarem código malicioso. O que sobra é tratado como uma busca. Salvar o código como favorito é o caminho confiável.

Exemplos de bookmarklets para colar

Todos usam apenas APIs padrão do navegador. Cole um deles na caixa de código acima, clique emCriar bookmarklet e instale.

Copiar a página como link em Markdown

Abre uma caixa com o link selecionado, pronto para copiar.

prompt('Link em Markdown:', '[' + document.title + '](' + location.href + ')');

Contar as palavras que você selecionou

Selecione o texto primeiro e depois clique no bookmarklet.

const words = String(getSelection()).trim().split(/\s+/).filter(Boolean).length;
alert(words + ' palavras selecionadas');

Tornar a página editável

Clique de novo para desligar a edição. Ao recarregar, a página original volta.

document.designMode = document.designMode === 'on' ? 'off' : 'on';

Abrir a página na Wayback Machine

Lista as cópias arquivadas da página em que você está.

location.href = 'https://web.archive.org/web/*/' + location.href;

Usos comuns de bookmarklets

Por que um bookmarklet não funciona

A política de segurança do site bloqueia

Se um bookmarklet funciona na maioria dos sites mas não faz nada em um deles, veja a Content-Security-Policy desse site. A especificação de CSP diz que a política de uma página não deve interferir nos bookmarklets, mas os navegadores ainda podem bloquear URLs javascript:em páginas cujas regras script-src são rígidas. Um bookmarklet que injeta um script de outro domínio é afetado duas vezes: mesmo que rode, a política da página decide se esse script externo pode carregar. Nada dentro do bookmarklet consegue contornar isso. Se você precisa do script num site assim, uma extensão do navegador ou um userscript é o caminho.

A página virou uma página em branco com texto

O seu código terminou com um valor de texto, e o navegador o exibiu como uma página nova. Remova qualquer return que devolva texto. Se você escreveu o bookmarklet à mão, gerá-lo de novo aqui o envolve numa função, e uma expressão de texto no final deixa de substituir a página.

Nada acontece e não há erro

Abra o console de desenvolvedor do navegador e clique no bookmarklet outra vez. Erros de sintaxe, elementos ausentes e scripts bloqueados são informados ali. Uma causa frequente em bookmarklets feitos à mão é um comentário // que ficou na mesma linha do restante do código; gerar de novo a partir do código original resolve.

Como editar um bookmarklet existente

Copie o endereço do favorito, remova o javascript: inicial e decodifique o restante com o codificador e decodificador de URL (em inglês) para recuperar o código legível. Faça a alteração, cole o código neste gerador de bookmarklets e troque o endereço do favorito antigo pela nova URL. Guardar o código original num arquivo de texto poupa essa volta.

Segurança importa

Um bookmarklet roda com o mesmo acesso que os scripts da própria página têm: ele pode ler e alterar tudo o que a página expõe. Revise o código antes de instalar, evite trechos que carregam scripts remotos (uma URL controlada por outra pessoa pode mudar depois que você instalou) e nunca rode um bookmarklet desconhecido numa página com informações sensíveis. Se um site, uma mensagem ou um vídeo pedir que você cole código num favorito ou na barra de endereço, trate como golpe.

Bookmarklet, userscript ou extensão

Os três se parecem, mas atendem a necessidades diferentes. Um bookmarklet é um script que roda uma vez, numa página, quando você clica: zero instalação, e ele viaja junto com os seus favoritos. Um userscript (gerenciado por um gerenciador de userscripts) se liga aos sites que combinam e pode rodar sozinho a cada visita, guardando as próprias configurações entre páginas. Uma extensão do navegador faz as duas coisas e mais (trabalho em segundo plano, interceptação de rede, ícones na barra de ferramentas), ao custo de uma etapa de instalação e de permissões amplas que o navegador mostra de antemão. As extensões também são tratadas de forma diferente pelas políticas de segurança das páginas: a especificação de CSP observa que o Chrome trabalha para manter as injeções feitas por extensões funcionando, independentemente da política da página. Comece pelo bookmarklet e passe para outro formato só quando bater nos limites dele.

Limites: quando não usar um bookmarklet

Um bookmarklet só roda quando você clica, em uma página de cada vez. Ele não guarda estado entre visitas, não age em segundo plano e não modifica todas as páginas automaticamente. O tamanho raramente é o problema (o Chrome documenta um tamanho máximo de URL de 2 MB), mas um script longo vira uma URL de favorito ilegível e, nesse porte, um gerenciador de userscripts ou uma extensão é mais fácil de manter. As alterações que um bookmarklet faz também somem ao recarregar: se você quer destaques que ainda estejam lá na próxima vez, veja como destacar texto em qualquer site e mantê-lo. E se a tarefa é “salvar esta página com um clique” e não “rodar um trecho de código”, uma extensão do navegador feita para isso resolve sem que você precise manter código.

Privacidade: para onde vai o seu código

Para lugar nenhum. O nome, o trecho e a URL gerada nunca saem da página: criar um bookmarklet não envolve nenhuma requisição de rede. Uma ressalva honesta: o bookmarklet pronto fica guardado como um favorito normal, então, se você sincroniza os favoritos entre dispositivos, o script viaja com os seus outros favoritos e fica visível para qualquer coisa que consiga ler esse perfil sincronizado.

Ferramentas e guias relacionados

O bookmarklet de link em Markdown acima copia um link por vez; para transformar o HTML de uma página inteira em Markdown, use o conversor de HTML para Markdown (em inglês). Se os links que você copia vêm cheios de parâmetros de rastreamento, olimpador de URLs os remove. Para salvar e trabalhar com páginas sem escrever script nenhum, conheça omarca-texto para sites do Marqly, ogerenciador de favoritos para Chrome e o fluxo desegundo cérebro, ou leia o guia sobrecomo organizar os favoritos do navegador.