Crear Bookmarklets - El camino correcto

Los Bookmarkets se pueden definir como mini aplicaciones enmascaradas como pequeños fragmentos de la genialidad de JavaScript que residen en su navegador y proporcionan funcionalidades adicionales a una página web.

Hoy, analizaremos la creación de marcadores de libros desde cero y en el camino, algunas de las mejores prácticas a seguir..

No son para los nerds, de hecho, son bastante centrados en el usuario.

Siempre estamos buscando formas de mejorar nuestra experiencia de navegación, ya sea generalizada o poco conocida. Bookmarklets, solía pensar, pertenecía a este último, el bastión de los super nerds. Para mi disgusto, descubrí que estaba completamente equivocado sobre el tema. No son para los nerds, de hecho, están bastante centrados en el usuario, implementan muchas funcionalidades bastante ingeniosas y, tal como lo predijo la gente, se han convertido en una parte fundamental de la forma en que interactúo con el navegador, y Internet.

Hoy, me gustaría guiarlo a través del desarrollo de marcadores de libros implementando algunos marcadores ingeniosos. Sí, marcadores. Estaremos construyendo más de uno, aunque sean muy pequeños. Intrigado? Empecemos!

Entonces, ¿qué son exactamente Bookmarklets?

Para citar mi artículo intro:

Los Bookmarkets se pueden definir como mini aplicaciones que se enmascaran como pequeños fragmentos de la genialidad de JavaScript que residen en su navegador y proporcionan funcionalidades adicionales, con solo un clic.

La palabra en sí es una mezcla, maleta Para el pedante, de las palabras bookmark y applet. También llamados favelets, estos pequeños fragmentos de JavaScript le permiten evocar una funcionalidad adicional para cualquier página que visite.

Debido a que solo están compuestas de JavaScript, son bastante portátiles: están soportadas por todos los navegadores en todas las plataformas, incluso en móviles y tabletas. Instalarlos es tan simple como arrastrarlos a su barra de herramientas.!

Sí, pero ¿cuál es el punto?

El punto es que los marcadores le permiten hacer muchas cosas que de otra manera están demasiado centradas en el desarrollador para lograrlas. Cada funcionalidad que obtiene con un bookmarklet se puede duplicar usando la consola de un navegador y un poco de tiempo. Bookmarklets simplemente simplifica el proceso, empaquetando el código que implementa alguna funcionalidad dentro de un pequeño botón..

Bookmarklets se puede clasificar en varias categorías:

Los que pasan datos. Bookmarklets que envían una página a un servicio entran en esta categoría. Bookmarklets que tratan con redes sociales, búsquedas de diccionarios, búsquedas, caen en esta categoría. Estaremos construyendo uno que se someta a Reddit..
Los que obtienen información y / o modifican la página actual. Construiremos un bookmarklet que establece el color de fondo de una página..
Unos que trabajan tras bambalinas. Un bookmarklet que borra cualquier cookie del sitio actual es un buen ejemplo y lo estaremos creando..

# 1 - Comenzando

El primer punto que deberá recordar es prefijar todo el código JavaScript con el javascript URI. Los navegadores han implementado este prefijo específico para que el contenido seguido por él pueda tratarse y analizarse como el código JavaScript adecuado..

Por ejemplo, al hacer clic en este enlace - ver su código a continuación - alertará un texto.

 Linky

# 2 - Usa una función anónima como un contenedor

Recuerde que su código se ejecutará contra la página actualmente cargada, una página que probablemente tendrá JavaScript propio y todas las colisiones resultantes que implica. Lo último que necesita es que su bookmarklet rompa la página actual.

Envolver su código cuidadosamente dentro de una función anónima se asegurará de que no haya colisiones de nombres. Además, los noobs de JavaScript serán desconcertados y pensarán que eres un dios, si te gusta ese tipo de cosas.

javascript: (function () // su código aquí) ();

Esto es pertinente cuando también usas JavaScript en otros lugares. Siempre, siempre aislar su código.

# 3 - Externalizar, si es necesario

Un bookmarklet no tiene que ser necesariamente pequeño, eres libre de ir tan grande como quieras. En esos casos, en aras de la distribución y de mantener actualizado su código sin la intervención manual del usuario, es mejor crear un contenedor que ingrese el código según sea necesario..

 javascript: (function () var jsCode = document.createElement ('script'); jsCode.setAttribute ('src', 'http: //path/to/external/file.js'); document.body.appendChild ( jsCode); ());

Eso es más o menos lo que hace el código anterior: crea un elemento de secuencia de comandos, establece el origen en un archivo alojado en otro lugar y, finalmente, lo agrega al documento. De esta manera, siempre que una parte de su código cambie, puede implementar sus cambios en una sola fuente y hacer que se propague instantáneamente a cada usuario..

Nota: No estás limitado a hacer esto solo por JavaScript. Si su bookmarklet utiliza un extremo frontal, también puede utilizar HTML y CSS de forma externa, lo que hace que su bookmarklet se actualice automáticamente..

# 4 - Ejercicio de precaución al agregar una biblioteca

Una vez más, si está creando un gigante de un marcador, es posible que necesite una de esas bibliotecas de JavaScript. Pero usarlos en su página no es tan simple como simplemente incluirlo, tendrá que asegurarse de que las bibliotecas no estén disponibles. Las bibliotecas como jQuery y MooTools dominan el mercado y harías bien en asegurarte de que no esté cargado..

Otro problema es que la página puede haber cargado otra biblioteca, lo que puede dar lugar a conflictos sobre el control del símbolo $. Las colisiones de versiones también pueden entrar en juego en algún momento, así que tenlo en cuenta también..

Aquí hay una cáscara rápida para el código que generalmente uso. Recuerde, en su código de producción, deberá tener en cuenta los problemas que he mencionado anteriormente..

 if (! ($ = window.jQuery)) // typeof jQuery == 'undefined' también funciona script = document.createElement ('script'); script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; script.onload = libereethKraken; document.body.appendChild (script);  else libera el Kraken ();  la función libera el Kraken () // ¡El Kraken ha sido liberado, maestro! // Sí, estoy siendo infantil. Coloque su código aquí

El código debe ser bastante autoexplicativo. Vamos a correr rápidamente de todos modos.

En primer lugar, determinamos si jQuery se carga comprobando si el objeto jQuery existe en el espacio de nombres.
Si no, lo preparamos rápidamente para su inclusión. Seguimos las mejores prácticas y lo cargamos desde un CDN. Finalmente, asegúrese de apuntar a la función principal que contiene el código a ejecutar..
Si ya está incluido, simplemente ejecute la función de envoltorio principal.

Si desea evitar todo este problema, le recomiendo el excelente generador de marcadores de Ben Alman. Se ocupa de los conflictos de espacio de nombres y versiones de una manera muy limpia. Buen material!

# 5 - No arruines la página principal, a menos que tengas que hacerlo.

Los Bookmarklets son inútiles si, involuntariamente, rompen una página..

No puedo enfatizar este punto lo suficiente. Los Bookmarklets son inútiles si, involuntariamente, rompen una página. Y preocuparse por JavaScript no es lo único con lo que tiene que lidiar.

Si tiene una interfaz, el HTML y el CSS también entran en juego. No asigne a sus contenedores y clases nombres genéricos: si lo llama 'contenedor', siempre tendrá mi odio eterno..

Una forma fácil es prefijar [o sufijo, no me importa] todo con una cadena específica de bookmarklet. Y al escribir su CSS, sea muy, muy específico. Hacer uso de la cascada es bueno, pero úselo con ultra precisión. Los estilos que se filtran a la página principal son irregulares y no evocan confianza.

# 6 - Prueba, Prueba, Prueba

Si está creando un bookmarklet más pequeño, uno donde incluir una biblioteca de terceros parece no tener sentido, se encontrará con un demonio siempre presente: la compatibilidad entre navegadores.

Puede parecer bastante obvio, pero esto es algo que mucha gente olvida, muchas veces. Asegúrese de probar en tantos navegadores en tantas plataformas como sea posible.

Otra trampa fácil de caer es un bookmarklet que está destinado a funcionar en todos los sitios que solo funcionan de forma selectiva. Las páginas pueden tener diferentes jerarquías y hacer uso de diferentes metodologías. Algunos sitios pueden adoptar HTML5 y usar los contenedores relacionados, mientras que otros pueden jugar de forma segura y usar divs genéricos. Mientras busca información, asegúrese de dar cuenta de todas las escuelas de desarrollo..

Y nos vamos

Ahora que hemos analizado algunos puntos a tener en cuenta durante el desarrollo, vamos a crear los tres marcadores que mencioné anteriormente, uno de cada categoría..

Un bookmarket que se somete a Reddit.
Un bookmarket que borra las cookies del sitio web actual.
Un bookmarklet que cambia el color de fondo de una página.

Si ya está familiarizado con JavaScript básico, el siguiente código debería ser un juego de niños: ¡son solo unas pocas líneas de código! Los marcadores a continuación han estado conmigo desde hace bastante tiempo y parece que no puedo encontrar dónde los vi originalmente. Si lo hace, déjeme una nota rápida en los comentarios y agregaré los créditos correspondientes..

Bookmarklet # 1 - Enviar a Reddit

Comenzaremos con uno muy fácil: enviarlo a un servicio externo, Reddit en nuestro caso.

 javascript: location.href = 'http: //www.reddit.com/submit? url =' + encodeURIComponent (location.href) + '& title =' + encodeURIComponent (document.title)

Estas son algunas cosas bastante simples, tomadas directamente del sitio. No hay envoltorio anónimo ni espacio de nombres ya que la funcionalidad es bastante limitada.

Cuando se invoca el bookmarklet, ocurre lo siguiente, en orden lógico:

El título y la URL de la página se capturan usando ubicación.href y titulo del documento
Para asegurarnos de que no aparezcan caracteres ilegales, lo codificamos usando el encodeURIComponent método
Finalmente, concatenamos todo para obtener nuestra URL y cambiamos la ubicación de la página.

Este patrón funciona bastante para la mayoría de los propósitos de búsqueda y envío. La única variable aquí sería la URL a la que se envía: cada aplicación adopta un enfoque diferente. Debajo de un minuto de búsqueda debería ver a través de.

Por ejemplo, un bookmarklet de validación se vería así:

 javascript: location.href = 'http: //validator.w3.org/check? uri =' + encodeURIComponent (location.href)

Tenga en cuenta que simplemente descartamos el título de la página y cambiamos la estructura de la URL para que apunte al servicio de validación W3.

Bookmarklet # 2 - Cambiar el fondo de una página

 javascript: void (document.bgColor = prompt ('Color? Hex o nombre servirá. ¿Puedo sugerir pink?', 'pink'))

Esto es tan simple como parece. Para mantener las cosas super simples, opté por no introducir variables y validación. Solo veremos el código del núcleo..

Por primera vez, creamos un aviso que solicita al usuario un color para establecer el fondo. Ya que no estamos revisando la entrada, confío en que no seas travieso.
Finalmente, Establecemos el fondo al color elegido a través de. document.bgColor. Eso es!

Si lo se bgColor está en desuso y sí, sé que debería sentirme sucio, pero esto funcionará bastante bien ya que una prueba rápida en navegadores modernos resultó positiva.

Puedes jugar un poco con estos bastante. Esto es similar a cómo generalmente aplicaría el estilo CSS a los elementos a través de JavaScript. Solo lo estamos aplicando a páginas arbitrarias. Tenga en cuenta que las diferentes páginas tienen diferentes estructuras, por lo que si la página tiene un contenedor de ajuste completo, el efecto puede no tener sentido. En estos casos, es posible que tenga que buscar el contenedor principal y luego aplicarle el estilo..

Bookmarklet # 3 - Eliminación de cookies

 javascript: function () var c = document.cookie.split (";"); para (var i = 0; i-1? C [i] .substr (0, e): c [i]; document.cookie = n + "=; expira = Thu, 01 de enero de 1970 00:00:00 GMT";  ()

No es realmente tan complicado como parece, las cookies simplemente tienen una sintaxis muy estricta, por lo que tendremos que analizarlo paso a paso. Vayamos a través del código:

Split document.cookie basado en semicolores. do Ahora se convierte en una matriz que contiene todas las cookies establecidas para el dominio actual..
Recorrer la matriz.
Compruebe si la cookie contiene el símbolo igual a, es decir, si se ha establecido y devuelto un valor de cookie
Si es así, vamos a capturar toda la información solo hasta la misma. Si no, deja que la cookie esté como está.
Finalmente, agregue un valor de cadena que vacía el valor de la cookie junto con la definición de una fecha de caducidad del pasado, borrándola de manera efectiva

Recuerde, los bookmarklets siguen funcionando bajo la página, por lo que no puede acceder a las cookies de otros dominios. Estás limitado a la página en la que invocas el bookmarklet.

Eso es un envoltorio

Y hemos terminado. Recuerda, simplemente hemos arañado la superficie de los marcadores. Muchos de ellos son aplicaciones completas dentro de ellos mismos, con un extremo frontal adecuado para arrancar. Dedican mucho tiempo y planificación a construir, como cualquier aplicación no trivial. Esto fue simplemente para poner tu pie en la puerta del desarrollo de bookmarklet. Esperemos que este tutorial te haya resultado interesante y te haya sido útil..

Preguntas? Cosas bonitas que decir? Criticas? Pulsa la sección de comentarios y déjame un comentario. Muchas Gracias Por Leer!

Código