Cómo crear un Bookmarklet de búsqueda de texto con JavaScript

Bookmarklets son Aplicaciones de JavaScript que se puede acceder como marcadores del navegador. Se utilizan para permitir a los usuarios realizar diferentes acciones en las páginas web. Por ejemplo, este bookmarklet de FontShop es para obtener una vista previa de las fuentes web de FontShop en cualquier página web.

En este artículo, vamos a ver qué tan rápido y fácil es inventar un bookmarklet creando uno que realiza un Wikiwand (Wikipedia mejor parecida) buscar para un texto seleccionado en cualquier página web.

Cómo funcionan los bookmarklets

El URI de un bookmarklet usa el javascript: protocolo eso indica que es compuesto de codigo JavaScript. Al hacer clic en un bookmarklet, puede ejecutar JavaScript en una página web, y realizar tareas, como cambiar la apariencia de una página, redirigir a otra página o mostrar nueva información.

Dado que los marcadores son esencialmente conjuntos de código JavaScript, son fáciles de crear con poco conocimiento de JavaScript, ya sea para uso personal o para ofrecérselo a sus usuarios, como lo hace WordPress con su Press Este bookmarklet.

Empieza con el código JavaScript

los Estructura de URL Wikiwand utiliza para un artículo en inglés es https://www.wikiwand.com/en/articleTitle. Necesitamos escribir un script que salte a la página de Wikiwand de la URL termina con la cadena que el usuario acaba de seleccionar - el texto seleccionado tendrá que ser puesto en lugar de título del artículo.

Primero nosotros conseguir el texto El usuario ha seleccionado en la página con el siguiente código:

 getSelection (). toString () 

Necesitamos que emitir el objeto devuelto por getSelection () como una cuerda usando el Encadenar() Método, para hacerlo. enviar el texto seleccionado.

A continuación, necesitamos realizar una visita a la página del artículo Wikiwand. Lo lograremos usando la siguiente lógica, donde nuevoURL será el URL de la página del artículo Wikiwand (que contendrá la cadena seleccionada al final):

 location.href = newURL 

Cuando ponemos estos dos fragmentos de código juntos, terminamos con el siguiente script:

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

Ahora solo tenemos que añadir el javascript: Protocolo al frente, y tenemos el código final Lo usaremos en nuestro bookmarklet:

 // agregue una línea sin saltos de línea javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString (). replace (/ \ n / g, '% 20' ) 

El opcional reemplazar (/ \ n / g, '% 20') al final reemplaza cualquier carácter de línea nueva (\norte) en el texto con un solo carácter de espacio (% 20).

El código de JavaScript está listo. Tenga en cuenta que el código debe ser colocado en una sola línea sin saltos de línea, desde luego será añadido a un campo de entrada de texto.

Crear el marcador

Abra la ventana de marcadores de su navegador, y agregar un nuevo marcador:

• Firefox: Presiona ctrl + shift + B / cmd + shift + B, haz clic derecho en "Barra de herramientas de marcadores" y selecciona "Nuevo marcador".
• Cromo: Presiona ctrl + shift + O / cmd + alt + B, haz clic derecho en "Barra de marcadores", y selecciona "Agregar página ... & quot.

En el campo URL copiar y pegar el código JavaScript desde antes. Una vez que se crea el marcador, está listo para usar; ir a cualquier página web, selecciona una palabra quieres buscar en Wikiwand, y haga clic en el bookmarklet - La página del artículo Wikiwand se abrirá a la vez..

Acceso rapido

En lugar de buscar el menú de marcadores cada vez que necesite el bookmarklet, puede elegir mostrarlo directamente en su navegador para un acceso rápido.

• Firefox: Haga clic en "Ver> Barras de herramientas" en la barra de menú superior y seleccione "Barra de herramientas de marcadores".
• Cromo: Presione ctrl + shift + B / cmd + shift + B.

Crear un enlace de bookmarklet

Puedes agregar tu bookmarklet a un sitio web como un hipervínculo también, que visitantes puede marcar simplemente arrastrando y soltando el enlace a la barra de herramientas de marcadores, o haciendo clic con el botón derecho en el enlace y seleccionando la opción para marcarlo.

Para convertir su bookmarklet en un hipervínculo, cree un Etiqueta HTML con el script bookmarklet como el valor de su href atributo:

   Wikiwand Search Bookmarklet  

Cómo almacenar bookmarklets por separado

Tú también puedes usar un archivo JavaScript separado para almacenar el código del bookmarklet, que probablemente no sea necesario si tiene un script corto, como el que acabamos de ver en este tutorial, pero puede ser útil cuando el código JavaScript es demasiado largo para copiarlo y pegarlo en la barra de marcadores de tu navegador.

El archivo myscript.js será alberga el código principal de JavaScript para el bookmarklet, y necesita agregar el siguiente código como la URL del marcador (ya sea a la barra de marcadores del navegador, o como el valor del href atributo en el archivo HTML):

 // agregar en una línea sin saltos de línea javascript: (() => with (document) let s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

El fragmento de código de arriba es Envuelto en una función de flecha que invoca a uno mismo, y utiliza características de ECMAScript 6, como el dejar palabra clave, con el fin de reducir la longitud del código. Agrega un > etiqueta que apunta a la myscript.js archivo a la sección del documento cuando el usuario hace clic en el bookmarklet (tenga en cuenta que es posible que deba usar una ruta absoluta para el myscript.js expediente).