Como criar um Bookmarklet de pesquisa de texto com JavaScript

Bookmarklets está Aplicações JavaScript que pode ser acessado como marcadores do navegador. Eles são usados ​​para permitir que os usuários realizar ações diferentes em páginas da web. Por exemplo, este bookmarklet da FontShop é para visualizar as fontes da FontShop na web em qualquer página da web.

Neste artigo, vamos ver como é rápido e fácil inventar um bookmarklet criando um que executa um Wikiwand (Wikipédia de melhor aparência) procurar para um texto selecionado em qualquer página da web.

Como funcionam os bookmarklets

O URI de um bookmarklet usa o javascript: protocolo que indica que é composto de código JavaScript. Quando você clica em um bookmarklet, você pode executar JavaScript em uma página da Web e executar tarefas, como alterar a aparência de uma página, redirecionar para outra página ou exibir novas informações nela.

Como os marcadores são essencialmente conjuntos de código JavaScript, eles são fáceis de criar com pouco conhecimento de JavaScript, seja para uso pessoal ou para oferecer aos seus usuários, como o WordPress faz com o seu Press This bookmarklet.

Comece com o código JavaScript

o Estrutura de URL Wikiwand usa para um artigo em inglês é https://www.wikiwand.com/en/articleTitle. Precisamos escrever um script que salte para a página Wikiwand de qual URL termina com a string que o usuário acabou de selecionar - o texto selecionado precisará ser colocado no lugar de título do artigo.

Nós primeiro pegue o texto o usuário selecionou na página com o seguinte código:

 getSelection (). toString () 

Nós precisamos fundida o objeto retornado por getSelection () como uma string usando o para sequenciar() método, a fim de torná-lo produzir o texto selecionado.

Em seguida, precisamos faça uma visita para a página do artigo Wikiwand. Nós vamos conseguir isso usando a seguinte lógica, onde newURL será o URL da página do artigo da Wikiwand (que irá conter a string selecionada no final):

 location.href = newURL 

Quando colocamos esses dois trechos de código juntos, acabamos com o seguinte script:

 location.href = 'https://www.wikiwand.com/en/'+getSelection () .toString () 

Agora só temos que adicionar o javascript: protocolo para a frente, e nós temos o código final vamos usar no nosso bookmarklet:

 // adicione em uma linha sem quebras de linha javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString (). replace (/ \ n / g, '% 20' ) 

O opcional substituir (/ \ n / g, '% 20') no fim substitui qualquer caractere de nova linha (\ n) No texto com um único caractere de espaço (% 20).

O código JavaScript está pronto. Note que o código precisa ser colocado em uma única linha sem quebras de linha, já que depois será adicionado a um campo de entrada de texto.

Crie o marcador

Abra a janela de favoritos do seu navegador e adicionar um novo marcador:

• Raposa de fogo: Pressione ctrl + shift + B / cmd + shift + B, clique com o botão direito do mouse em "Barra de favoritos" e selecione "Novo marcador".
• Cromada: Pressione ctrl + shift + O / cmd + alt + B, clique com o botão direito do mouse em "Barra de favoritos" e selecione "Adicionar página…".

No campo URL copiar e colar o código JavaScript de antes. Depois que o marcador é criado, ele está pronto para ser usado; vá para qualquer página da web, selecione uma palavra você quer procurar em Wikiwand, e clique no bookmarklet - a página de artigos da Wikiwand será aberta imediatamente.

Acesso rápido

Em vez de procurar o menu de marcadores sempre que precisar do bookmarklet, você pode optar por exibi-lo diretamente no seu navegador para acesso rápido.

• Raposa de fogo: Clique em "Visualizar> Barras de ferramentas" na barra de menu superior e selecione "Barra de ferramentas de favoritos".
• Cromada: Pressione Ctrl + Shift + B / cmd + Shift + B.

Crie um link de bookmarklet

Você pode adicionar seu bookmarklet a um website como um hiperlink também, quais visitantes pode marcar simplesmente arrastando e soltando o link para a barra de favoritos, ou clicando com o botão direito do mouse no link e selecionando a opção para marcá-lo.

Para transformar seu bookmarklet em um hiperlink, crie um Tag HTML com o script bookmarklet como o valor de sua href atributo:

   Wikiwand Pesquisa Bookmarklet  

Como armazenar bookmarklets separadamente

Você também pode use um arquivo JavaScript separado para armazenar o código do bookmarklet, o que provavelmente não é necessário se você tiver um script curto - como o que acabamos de ver neste tutorial - mas pode ser útil quando o código JavaScript for muito longo para copiá-lo e colá-lo na barra de favoritos do seu navegador.

O arquivo myscript.js vai casa o código JavaScript principal para o bookmarklet, e você precisa adicionar o seguinte código como o URL do marcador (para a barra de favoritos do navegador ou como o valor do href atributo no arquivo HTML):

 // adicionar em uma linha sem quebras de linha javascript: (() => com (document) let s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

O snippet de código acima é envolto em uma função de seta invocando auto, e usa recursos do ECMAScript 6, como o deixei palavra-chave, a fim de reduzir o comprimento do código. Adiciona um > tag apontando para o myscript.js arquivo para o seção do documento quando o usuário clica no bookmarklet (note que você pode precisar usar um caminho absoluto para o myscript.js Arquivo).