browser - titulo - favicon transparente

¿Cómo se establece favicon/icon cuando se arrastró bookmarklet a la barra de herramientas? (9)

Me he hecho un bookmarklet, y funciona muy bien, pero cuando se agrega a una barra de herramientas en Opera o Firefox, simplemente toma el ícono de marcador predeterminado para el navegador (un globo y una estrella, respectivamente). Mi sitio tiene un favicon, y la ventana, pestaña e incluso el [sitio] marcador usa el favicon que he especificado. Simplemente no es mi bookmarklet.

¿Cómo puedo codificar mi sitio o bookmarklet para que bookmarklet también tenga el favicon?

Conozco varias técnicas manuales de hackers que los usuarios pueden usar para configurar el favicon después del hecho, pero esas son soluciones indeseables.

Aquí es cómo puedes hacer esto:

Arrastre su bookmarklet a la barra de marcadores.
Junto a él, crea un marcador de un sitio que favicon quieres usar para tu bookmarklet.
Abra el Administrador de marcadores, haga clic en Organizar menú desplegable y seleccione Exportar, guarde sus marcadores como archivo html.
Abra ese archivo html en el editor de texto.
Encuentra el marcador que acabas de crear, digamos su marcador de Gmail, debes tener un código html para él, que se ve así:

<DT><A HREF="http://mail.google.com/mail/u/0/#inbox" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABV0lEQVQ4jdWQzUoCYRiFnxl/0plso0IKX7mqXWCLIlq0qEW4d19Qi6BLCELwEgpvQbyAVrroCrSNUJFGAyrkEEEMNs5PCxtRHGsZneX7nedwzgd/LQngObfnykIQOj9Disd/BFxdZ3hVwtE0Mje3kuw9OJqGWSji1BtzYafeGHk0jTdzCIA8aXANA/O6hFWuzMBWuYJ5XcI1DF6MAY8fxmxAYHdnZK7WMAtFXF3H1XXMQhGrWsN2XR5WM/QGn2MmOBkQOj5CFoJhuTKe5DUzbJvW1jbWZhbqd/4BAIGDfSQhGH7XBehLMlruEGlFzEyTZy6AvL5G+PICWQja6iJaPu8L+zbw9B4MYpyeEB4MkF7782z+AZ1OD0WNkk4vA7AUi/HUav8eYNsOnW6XZCJBJLIwvieTcVQ1SrN5j2XbUwFTf9DpdkmnUlOwJ0VRyGY3UBVl7px/qi+cdYQvZvKCUwAAAABJRU5ErkJggg==">Gmail</A>

Copie toda la etiqueta ICON
En el mismo archivo, busque el bookmarklet que ha creado e inserte la etiqueta ICON que ha copiado en su etiqueta bookmarklet :

<DT><A HREF="javascript:(function(){... bookmarklet JS code...})();" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABV0lEQVQ4jdWQzUoCYRiFnxl/0plso0IKX7mqXWCLIlq0qEW4d19Qi6BLCELwEgpvQbyAVrroCrSNUJFGAyrkEEEMNs5PCxtRHGsZneX7nedwzgd/LQngObfnykIQOj9Disd/BFxdZ3hVwtE0Mje3kuw9OJqGWSji1BtzYafeGHk0jTdzCIA8aXANA/O6hFWuzMBWuYJ5XcI1DF6MAY8fxmxAYHdnZK7WMAtFXF3H1XXMQhGrWsN2XR5WM/QGn2MmOBkQOj5CFoJhuTKe5DUzbJvW1jbWZhbqd/4BAIGDfSQhGH7XBehLMlruEGlFzEyTZy6AvL5G+PICWQja6iJaPu8L+zbw9B4MYpyeEB4MkF7782z+AZ1OD0WNkk4vA7AUi/HUav8eYNsOnW6XZCJBJLIwvieTcVQ1SrN5j2XbUwFTf9DpdkmnUlOwJ0VRyGY3UBVl7px/qi+cdYQvZvKCUwAAAABJRU5ErkJggg==">MyBookmarklet</A>

Guarde este archivo
Regrese al Administrador de Marcadores de Chrom, haga clic nuevamente en Organizar y seleccione Importar
Importe el archivo HTML que acaba de editar, su bookmarklet ahora tiene un favicon .

Básicamente, el procedimiento consiste en obtener el atributo ICON de una etiqueta de marcador e insertarlo en la etiqueta bookmarklet.

Creo que una posible forma es usar unicode char en el ancla de bookmarklet como su icono:

http://unicode-table.com/en/#cyrillic

revisando todos los símbolos posibles, puede encontrar el personaje que se asemeja más al icono que desea

Después de leer el tapper [ware] y el sitio de Restafarian, aquí está la solución más simple que podría encontrar:

<a href="javascript: var title = window.location.href; if (title.indexOf(''http://yourwebsite/bookmarklet/'') == 0) { ''<head><link rel=/'shortcut icon/' href=/'favicon.ico/'></head>Bookmarklet''; } else { (function(){document.body.appendChild(document.createElement(''script'')).src=''http://yourwebsite/bookmarklet.js'';})(); }">Click Me!</a>

Funciona muy bien en Chrome y FF, pero FF4 es el único navegador que guardará el icono en la barra de marcadores. Esto es lo que parece: http://cl.ly/5WNR

Es posible asignar y modificar favicon el favicon usando javascript y canvas (mira el increíble juego de favicon Defender of the Favicon ). El código fuente del juego te ayudará a hacerlo (básicamente se basa en el uso de la función toDataUrl () en el lienzo como se ve en la línea 554 de la fuente).

// set favicon if( !stupidBrowser && useIcon ) { var icon=$(''favicon''); (newIcon = icon.cloneNode(true)).setAttribute(''href'',ctx.canvas.toDataURL()); icon.parentNode.replaceChild(newIcon,icon); }

¿Qué sucede cuando se hace clic o se guarda una libreta que configura el favicon de esta manera? No lo sé, pero podría ser bueno intentarlo. El navegador puede guardarlo?

Eso no es del todo correcto: un bookmarklet no tiene dominio, pero tiene una ubicación (que es el bookmarklet en sí) y puede asignarle un ícono. Después de eso, se trata de cómo el navegador guarda los íconos (Firefox guarda el ícono de un marcador permanentemente, es posible que no tenga tanta suerte con otros navegadores).

PS Security ni siquiera juega, los iconos pueden venir de cualquier parte. No hay restricción

Ver http://www.tapper-ware.net/blog/?p=97

Esta es una buena técnica que casi hace lo que quieres.🙅

Funciona muy bien en mi Mac✅, pero no pude hacer que funcione en Windows 7⃣.❌

Use "Emoji" 🈳. Son personajes Unicode, que también parecen iconos coloridos. Solo puede elegir entre una lista predefinida de imágenes, pero en realidad no está mal, si todo lo que está tratando de hacer es darle al usuario algo que debe mirar para recordarle lo que hace el bookmarklet.

Por ejemplo, estoy haciendo una "marca de seguridad" bookmarklet📖. ¡Así que uso 🔑 en mi nombre bookmarklet! 😃😊

Básicamente, ves la imagen🎑 en la barra de marcadores 😝

Utiliza este sitio para ayudarte a encontrar un Emoji que funcione para tu bookmarklet: http://emojipedia.org/symbols/

Por lo tanto, esta no es una solución completa todavía, pero puede ser un paso hacia una dirección de trabajo.

data: codificación de un ícono en un data: html -uri codificado funciona, para mi sorpresa.

data:text/html;charset=utf-8, <title>Separator Tab</title><link rel="shortcut icon" href="data:image/png;base64,AAABAAEAEBAAAAEAIAAoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACWlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" /> Separator Tab

Como esto es <html> , podemos ejecutar <script type="javascript"> allí también.

Para algunos bookmarklets esto ya puede ser más que suficiente. Para otros que quieran modificar la página actual o al menos obtener algo de información antes de abrir una nueva pestaña, aún tienen suerte. Actualizaré esta respuesta si encuentro una manera de hacerlo.

Según la sugerencia de Wizek, puedes poner tu código en un uri de datos.

data:text/html;charset=utf-8, <html> <link rel="shortcut icon" href="https://.com/favicon.ico"> <script type="text/javascript"> alert(''It works!'') </script></html>

Y guarde todo eso como un marcador. ( Pruébalo, arrastra el código a la barra de pestañas)

Lamentablemente, solo funciona en ciertos casos (más abajo).

Cómo funciona:

(Al menos en Chrome) Es similar a un bookmarklet que usa el formato javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>" como han sugerido otras soluciones . En ese caso, el html de la página en la que se encuentra será reemplazado por el html del bookmarklet, pero la ubicación sigue siendo la misma y el bookmarklet en sí no tendrá una ubicación para que Chrome no pueda guardar un favicon para él.

Por el contrario, con un marcador de datos-uri vamos a la otra página , tiene su propia ubicación, y el navegador puede guardar un favicon para ello. Piense en ello como "Hospedaje de un sitio web en su navegador", al que podría acceder en otras computadoras si sincroniza sus marcadores. También puede usar una imagen base64 para el favicon en lugar de una url si desea mantener todo local.

Tiene limitaciones.

Cuando hace clic en él, sale de la página actual y carga la página en los datos . Por lo tanto, no podrá usarlo para bookmarlets que interactúan con la página actual, solo para código que puede ejecutar en una página diferente.
No use // para comentarios. Como se guardará todo en una línea, envuélvalos en / ** / y no olvide sus puntos y comas
En FF guardé el favicon, pero no pude configurarlo para que siempre abriera ventanas emergentes si quiero usar window.open () porque no me permite guardar un comportamiento predeterminado para las URL de datos.

Como ejemplo:

Usando esta técnica, creé un pequeño Bookmarklet con Icon Generator. Puede copiar esto en su barra de URL (o guardarlo como un marcador) para usarlo

data:text/html;charset=utf-8,<html><head> <title>Bookmarklet With Icon Generator</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > <link rel="shortcut icon" href="https://www.freefavicon.com/freefavicons/objects/plain-thumbs-up-152-237293.png"> </head><body style=''background: -webkit-linear-gradient(top, #f4f8f9 0%, #e0f8ff 95%);''> <div class="container"> <div class="page-header"> <h2>Write your javascript and specify a favicon, then drag the button to your bookmarks bar</div> </h2> <a id="bookmarkbutton" href='''' ondragend=''this.click()'' draggable="true" class="btn btn-primary btn-lg" role="button"> Drag me! </a><br /><br /> <div> <label for="fav_href">Favicon:</label> <input id="fav_href" value=''https://.com/favicon.ico'' style=''width:100%''></input> </div><br /> <div> <label for=''ta''>Write your JavaScript below</label> <textarea id="ta" style="width:100%;height:50%"> setTimeout(()=>{ &#13 alert(''hello world''); /*Use this format for comments*/ &#13 window.history.back(); &#13 },200); </textarea></div> </div> <script type = "text/javascript"> fav_href.onchange = ta.onchange = function(){ bookmarkbutton.href = ''data:text/html;charset=utf-8,<html><head>''+ ''<link rel="shortcut icon" href="''+ fav_href.value +''">''+ ''<script type="text/javascript"> ''+ ta.value +''<//script>''; }; ta.onchange(); </script> </body>

Otro ejemplo: Bookmarklet para abrir Facebook Messenger en su propia ventana pequeña (podría no funcionar si su navegador bloquea ventanas emergentes de forma predeterminada)

data:text/html;charset=utf-8, <html> <link rel="shortcut icon" href="https://facebook.com/images/messengerdotcom/favicon/favicon.ico"> <script type="text/javascript"> url = ''https://www.messenger.com/''; w = 740; h = 700; x = parseInt( screen.availWidth/2 - w/2 ); y = parseInt( screen.availHeight/2 - h/2 ); nw = window.open(url,'''', ''width=''+ w +'',height=''+ h +'',top=''+ y +'',left=''+ x); nw.focus(); setTimeout(()=>{ window.history.back(); window.close(); },200); </script>

Otras soluciones de Chrome para obtener iconos de bookmarklet:

Exportación de la barra de marcadores, edición e importación de nuevo, como se describe en esta respuesta https://superuser.com/questions/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in-google-chrome
Convertir el bookmarklet en una extensión. Ya no será un marcador, pero tendrá la misma función. Aquí hay un sitio web simple que lo hace por usted http://sandbox.self.li/bookmarklet-to-extension/ luego simplemente cambie el archivo de icono a lo que desee. El inconveniente de esto es que las extensiones usan RAM (alrededor de 10mb para las simples), si tienes mucho y poco RAM, puede que no sea la solución para ti. Además, no tendrá texto como en un marcador, solo el ícono.

Un bookmarklet usa el esquema javascript:// y, por lo tanto, no tiene un dominio desde el que se pueda cargar un favicon.

Por lo tanto, actualmente no hay forma de que proporciones un favicon para un bookmarklet. Piénselo de esta manera: recuerde todo el asunto de la zona de pruebas de Javascript: ¿dónde JavaScript puede no acceder a nada que esté fuera del dominio de la página web donde se está ejecutando? Bueno, un bookmarklet que debe estar vinculado a cualquier dominio de la página actual que está mirando, no puede estar vinculado a un favicon en su propio sitio web.

Actualización: Según la respuesta de Hans Schmucker, existe la posibilidad de crear un marcador que cuando el navegador lo cargue en el menú de marcadores generará un documento HTML que tiene un favicon. El razonamiento parece funcionar, pero aún no he visto algo así en acción y mis pruebas han resultado negativas.