Como crear Bookmarklets con Javascript para usar en el navegador web 1t434e

¿Que son los Bookmarklets? 361q6i

Los Bookmarklets son una especie de marcadores, son vínculos que se guardan en el navegador para ejecutar diversas funciones, no son plugins ni aplicaciones, son solo porciones de códigos con instrucciones que se ejecutan a petición del y no afectan en lo absoluto el rendimiento ni la capacidad del navegador.
Funcionan debido a la capacidad de los navegadores web modernos de interpretar y ejecutar el código Javascript introducido en la barra de direcciones.

¿Que es Javascript? 6c1g3o

Javascript es un lenguaje de programación, muy utilizado precisamente para añadirle interactividad a las páginas web, la mayor parte de los efectos y funciones como formularios, funcionan gracias a estas instrucciones.
Para comprender que es una función de Javascript haz la siguiente prueba:

¿Cómo funcionan estas funciones? 1s6l73

Para ver una lista con todas las variables que puedes usar para crear tus Bookmarklets, accede a la siguiente página de este sitio: ◄ Lista de variables y funciones de Javascript

Ejemplos de algunas variables de Javascript 5b71o

¿Cómo probar las funciones de Javascript? 5o1p6x

El resultado que devuelve cada variable puedes probarlo antes de utilizarlas en el código, para eso utiliza el siguiente formulario.

Intérprete de Javascript 2e5jx

Firefox y Google Chrome

Internet Explorer
Para usar el formulario solo escribe o pega la variable o código y oprime el botón "Probar".
Si usas el navegador Internet Explorer utiliza el botón Probar inferior, si empleas Firefox o Google Chrome puedes usar cualquiera, la diferencia es que el superior ejecuta el código y muestra el resultado en una nueva ventana, el inferior lo muestra en un cuadro de alerta.

Como crear un Bookmarklet con las funciones anteriores o61e

Un Bookmarklet es simplemente un link que en vez de dirigir el navegador a una dirección web, ejecuta una función como las anteriores, o más compleja, inclusive varias funciones de forma secuencial.
Para eso se introducen el código necesario en la dirección href de un link, el resultado será el mismo que en las pruebas hechas, con la diferencia de que no es necesario copiar y pega, solo dar un clic en el vínculo y se ejecutará la función.
Se hace de la siguiente manera:

<a href="javascript:alert('Hola')">Enlace</a>

Pruébalo.
Esta es la forma más usada y practica de crear un Bookmarklet, permite guardarlo arrastrándolo a la barra del navegador para ejecutarlo regularmente, (suponiendo que ejecute alguna función útil, no 'Hola') y compartirlo en la red insertando el vínculo en una página web o blog.
La única desventaja de este método es que es necesario tener al código fuente o HTML de la página o blog, si tienes una página personal o un blog en Wordpress o Blogger es posible, pero en sitios como Facebook es imposible. En estos casos la única forma de compartir un Bookmarklet es ofreciendo el código, que el o persona tendrá que pegar manualmente en la barra de direcciones de su navegador web.

Estructura de los Bookmarklets 4ws3o

Como se vio en el ejemplo anterior, la estructura de un Bookmarklet para crearlo en un link de una página web es el siguiente:

<a href="javascript:FUNCION">Enlace</a>

Donde FUNCION puede ser una función de Javascript o varias, encadenadas secuencialmente.
Se puede incluir en el código del link (es opcional) la siguiente función que ofrecerá información al al dar un clic con el ratón:

onclick="alert(Arrastra este link a la barra de marcadores del navegador');return false;"

Método recomendado de crear un Bookmarklet 3y3k5g

Aunque un Bookmarklet funciona con la anterior estructura, en la web moderna se aconseja crearlo usando uno de las dos siguientes opciones, para asegurar la compatibilidad con todos los navegadores.

<a href="javascript:void(FUNCIÓN);">Enlace</a>

O mejor aún:

<a href="javascript:(function(){FUNCIÓN})()">Enlace</a>

Como agregar comentarios a un Bookmarklet 4q672o

<a href="javascript:(function(){FUNCIÓN})()/*COMENTARIO*/">Enlace</a>

Como usar los Bookmarklets en los navegadores web 464k5n

Cualquier Bookmarklet creado insertando la función en un link, se puede guardar en los navegadores para emplearlo en otra ocasión de dos formas:
• En Firefox y Google simplemente arrastrándolo a la barra de Marcadores o de Bookmarks.
• En Internet Explorer es ocasiones puede hacerse de la forma anterior, sino será necesario dar un clic derecho encima del vínculo y en el menú escoger: Agregar a Favoritos, saldrá una alerta de confirmación en Crear en escoger "Barra de Favoritos".

Reglas a seguir para crear los Bookmarklets 5h5813

El código empleado en el Bookmarklet formará parte de la dirección URL del navegador, por lo que no puede contener espacio (en navegadores modernos no afecta), ni caracteres especiales (caracteres que no sean los de la codificación ASCII) para que funcionen de forma adecuada. También se pueden escapar los caracteres especiales en cualquier Bookmarklet convirtiéndolos al código hexadecimal que el navegador interpretará de forma adecuada.
Usa la siguiente herramienta: Escapar y codificar caracteres de direcciones URL a hexadecimal

Ejemplos prácticos de códigos para crear Bookmarklets 2h18e

Se supone que los que lean esta página no son expertos en Javascript, por lo que se mostrarán algunas formas de crear Bookmarklets con los ejemplos bien detallados, para que sea posible su comprensión.

Crear Bookmarklets para mostrar información 13116

Algunos ejemplos de como obtener información usando variables globales y mostrando el resultado en un cuadro de una alerta.
Utiliza el siguiente código: Entre las dos comillas simples va el mensaje de texto.
El signo + permite agregar una o varias variables, por ejemplo:
alert ('texto') Muestra solo un mensaje de texto.
alert ('texto'+VARIABLE) Muestra un texto y a continuación una variable.
alert ('texto'+VARIABLE+'texto') Muestra texto, una variable y texto de nuevo.
Por ejemplo:
Pruébalo: NombreNavegador

Crear Bookmarklets para seleccionar texto y realizar una acción 1j3e6l

Seleccionar texto en una página y luego realizar una acción determinada, es posible utilizando la funcion getSelection() (solo en Firefox y Chrome).
Primero es necesario declarar una variable, se hace de la siguiente forma:
NombreVariable = funcion
Varios ejemplos de como hacerlo:

1- Permite seleccionar texto y muestra el resultado en una alerta, (la variable declarada "aa" representa el texto seleccionado). Prúebalo: Seleccionar

2- El siguiente escribe la selección en una nueva página, (usa document.write por lo que sobrescribirá el contenido de la página): Prúebalo: Seleccionar

3- En el siguiente, con el texto seleccionado se realiza una búsqueda en Google, "escape(aa)" envía la variable al final de la direccion URL. Prúebalo: Seleccionar

4- Igual que el anterior pero en este caso se abre una nueva pestaña del navegador con el resultado, la variable "bb" representa una nueva pestaña del navegador que se debe abrir. Prúebalo: Seleccionar

5- Es este se realiza la misma acción, pero se utiliza un código diferente para seleccionar el texto y abre en la misma ventana por lo que funciona en todos los navegadores incluyendo Internet Explorer. Prúebalo: Seleccionar

Crear Bookmarklets para consultar o enviar la dirección URL de una pagina 4m215y

1- Permite consultar la información de la página donde nos encontremos navegando en el sitio de Whois, para eso se direcciona a dicho sitio mediante location.href, adicionando la URL actual mediante la misma variable. Prúebalo: Whois

2- De la misma forma anterior podemos validar el código HTML de nuestra página. Prúebalo: Validar HTML

3- Permite traducir la página actual usando el traductor de Google: Prúebalo: Traducir página

4- Permite ver la página en la cache de Google en caso de que el sitio no esté disponible. Prúebalo: Cache de Google

5- Permite enviar un correo electrónico para sugerir una página, con su título y dirección web incluidos. Prúebalo: Sugerir página

Crear Bookmarklets para modificar el estilo de una pagina web 2q3b29

Con los Bookmarklets creados usando Javascript, se puede modificar totalmente el estilo de cualquier página web o blog de internet, puedes encontrar más información en la página de este sitio:
◄ Como cambiar y modificar el estilo CSS de las páginas web con Javascript
Varios ejemplos prácticos, algunos muy útiles y solicitados los encontrarás en la página dedicada a modificar el estilo de Facebook:
A continuación solo algunos ejemplos.
Prúebalo: Cambiar fuente

Prúebalo: Aumentar fuente

Prúebalo: Color texto

Como insertar los Bookmarklets hechos en un blog de Wordpress o Blogger 1f315

Si no tienes una página web personal sino un blog en Wordpress o Blogger, también puedes insertar tus Bookmarklets en ellos, hazlo de la siguiente forma:
Solo son sencillos ejemplos aislados que te permitirán introducirte al fascinante mundo de las aplicaciones web y al lenguaje de Javascript, imposible en una sola página agregar más.
En este sitio encontrarás Bookmarklets diseminados en varias páginas, los reconocerás por su icono, también está disponible toda la información necesaria para hacerlos más complejos y útiles.

Crear un Bookmarklet introduciendo el código JavaScript 606965

En la siguiente página que recomiendo, el creador comparte una herramienta para facilita la creación de cualquier Bookmarklet.
Solo es necesario introducir el código, darle un nombre y presionar un botón para obtener el código del Bookmarklet, con todos los caracteres y espacios escapados, listo para usarlo o compartirlo en internet.
Bookmarklet Creator with Script Includer

Recursos DE JavaScript 573o6b

Plantilla en formato de imagen con las funciones de JavaScript para manipular los elementos HTML del DOM de las páginas: JavaScript DOM Cheatsheet

Páginas relacionadas 6khl