Um guia completo para bookmarklets

javascript: (() => {
  var style = document.createElement("style");
  style.innerHTML = "body{background:#000;color:rebeccapurple}";
  document.head.appendChild(style);
})();

A abordagem muito mais elegante é usar o CSSStyleSheet interface. Essa abordagem permite atualizações incrementais e permite acessar diretamente o CSS Object Model (CSSOM) para ler seletores, modificar propriedades existentes, remover ou reordenar regras e inspecionar a estrutura computada. O navegador também valida os valores inseridos dessa forma, o que ajuda a evitar que você insira CSS quebrado. É mais complexo, mas também oferece maior controle.

javascript: (() => {
  const sheet = new CSSStyleSheet();
  document.adoptedStyleSheets = (...document.adoptedStyleSheets, sheet);
  sheet.insertRule("body { border: 5px solid rebeccapurple !important; }", 0);
  sheet.insertRule("img { filter: contrast(10); }", 1);
})();

Como estamos escrevendo CSS para uso geral em qualquer página em que desejamos usar nosso bookmarklet, é importante estar ciente de que podemos encontrar problemas de especificidade ou conflitos com as folhas de estilo existentes da página. Usando !important geralmente é considerado um mau cheiro de código, mas no contexto de substituição de estilos existentes desconhecidos, é uma maneira razoável de atender às nossas necessidades.

Limitações

Infelizmente, existem alguns obstáculos que podem impedir o uso de bookmarklets. As mais difundidas são as Políticas de Segurança de Conteúdo (CSP). Um CSP é um recurso de segurança que tenta impedir ações maliciosas, como ataques de script entre sites, permitindo que os sites regulem o que pode ser carregado. Você não gostaria de permitir que scripts fossem executados no site do seu banco, por exemplo. Um bookmarklet que depende de solicitações de origem cruzada (solicitações de fora do site atual) é bloqueado com muita frequência. Por esse motivo, idealmente, um bookmarklet deve ser independente, em vez de depender de algo externo. Se você suspeitar que um bookmarklet está sendo bloqueado pelas políticas de segurança de um site, você pode verificar se há um erro no console das ferramentas de desenvolvedor do seu navegador.

Como os bookmarklets são apenas URLs, não há nenhum limite estrito para o comprimento especificado. No uso, os navegadores impõem limites, embora sejam maiores do que você encontrará na maioria dos casos. Em meus próprios testes (que podem variar de acordo com a versão e plataforma), aqui estão os limites máximos que encontrei: O maior bookmarklet que consegui criar no Firefox e no Safari tinha 65.536 bytes. O Firefox não me permitiu criar um bookmarklet de tamanho maior e o Safari me permitiu criar um bookmarklet, mas não fez nada quando acionado. O maior bookmarklet que consegui criar no Chrome tinha 9999999 caracteres e comecei a ter problemas ao interagir com a caixa de texto depois desse ponto. Se precisar de algo mais longo, você pode considerar carregar um script de um local externo, tendo em mente as limitações do CSP mencionadas acima:

javascript:(() => {
  var script=document.createElement('script');
  script.src="https://example.com/bookmarklet-script.js";
  document.body.appendChild(script);
})();

Caso contrário, você pode considerar uma ferramenta de userscript como TamperMonkeyou, para algo mais avançado, criando sua própria extensão de navegador. Outra opção é criando um snippet nas ferramentas de desenvolvedor do seu navegador. Bookmarklets são melhores para pequenos trechos.

Bookmarklets legais

Agora que você tem uma ideia do que são bookmarklets e, até certo ponto, do que eles são capazes, podemos dar uma olhada em alguns deles úteis. No entanto, antes de fazermos isso, gostaria de enfatizar que você deve ter cuidado ao executar bookmarklets encontrados online. Os bookmarklets que você encontra online são códigos escritos por outra pessoa. Como sempre, você deve ser cauteloso, cauteloso e criterioso. As pessoas podem e escreveram bookmarklets maliciosos que roubam credenciais de contas ou algo pior.

Por esse motivo, se você colar o código começando com javascript: na barra de endereço, os navegadores removem automaticamente o javascript: prefixo para evitar que pessoas acionem bookmarklets involuntariamente. Você precisará reintroduzir o prefixo. Para contornar o javascript: remoção, os bookmarklets são frequentemente distribuídos como links em uma página, que você deve arrastar e soltar em seus favoritos.

Bookmarklets específicos já foram mencionados em CSS-Tricks antes. Dada a evolução dos navegadores e da plataforma web, muito se tornou obsoleto agora, mas alguns artigos mais contemporâneos incluem:

Não deixe de conferir os comentários dessas postagens, pois elas estão repletas de inúmeros bookmarklets excelentes da comunidade. Falando em bookmarklets da comunidade:

Se você tiver algum bookmarklet dourado que considere valioso, compartilhe-o nos comentários.