¿Cómo configurar el ícono / favicon cuando se arrastra el marcador a la barra de herramientas?


108

Me hice 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 marcador de [sitio] usa el favicon que he especificado. Simplemente no es mi marcador.

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

Soy consciente de varias técnicas de piratería manual que los usuarios pueden usar para configurar el favicon después del hecho, pero esas son soluciones indeseables.


Ejemplo: arrastrar el marcador en Opera hace que el marcador adopte un icono de Diigo: diigo.com/tools/diigolet
Pistos

el que enlazas no hace eso por mí en Firefox.
benlumley

Sí, tampoco en IE. Pero lo hace en Opera. :)
Pistos

Lo siento, acabo de probar Opear 9.6 y tampoco me funciona en Opera.
Guss

1
Hay una propuesta de solución aquí: wiki.whatwg.org/wiki/Link_Icons
lapo

Respuestas:


23

Un bookmarklet usa el javascript://esquema 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 así: recuerde todo el asunto del sandbox de Javascript, donde Javascript no puede acceder a nada 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á viendo, no puede estar vinculado también a un favicon en su propio sitio web.

Actualización: de acuerdo con la respuesta de Hans Schmucker, existe la posibilidad de crear un marcador que, cuando el navegador lo carga en el menú de marcadores, generará un documento HTML que tiene un favicon. El razonamiento parece que puede funcionar, pero todavía tengo que ver algo como esto en acción y mis pruebas han resultado negativas.


17

Así es como puede hacer esto:

  1. Arrastre su marcador a la barra de marcadores.
  2. Junto a él, cree un marcador de un sitio cuyo favicon desea usar para su marcador.
  3. Abra el Administrador de marcadores, haga clic en el menú desplegable Organizar, seleccione Exportar y guarde sus marcadores como archivo html.
  4. Abra ese archivo html en el editor de texto.
  5. Busque el marcador que acaba de crear, digamos su marcador de Gmail, debe 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>

  1. Copiar toda la etiqueta ICON
  2. En el mismo archivo, busque el marcador que creó e inserte la etiqueta ICON que copió en su etiqueta del marcador :

<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>

  1. Guardar este archivo
  2. Vuelve al Administrador de marcadores de Chrom, haz clic de nuevo en Organizar y selecciona Importar.
  3. Importe el archivo HTML que acaba de editar, su marcador ahora tiene un favicon .

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

ingrese la descripción de la imagen aquí


1
(Esta es una pregunta muy antigua, pero ...) Estaba buscando una solución que no necesitara ninguna acción por parte del usuario final (aparte de agregar el marcador a la barra de herramientas). es decir, qué puede hacer el propietario de un sitio para especificar el icono.
Pistos

1
Para mí, esta es la mejor respuesta. Funciona y se explica de forma exhaustiva. Muchas gracias.
tsuma534

13

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

PS Security ni siquiera juega con eso, los íconos pueden venir de cualquier parte. No hay ninguna restricción.

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


3
Si bien el razonamiento parece que podría funcionar, los ejemplos proporcionados en el blog al que vinculó simplemente generan un documento con un ícono que Firefox puede o no mostrar para el marcador, o en realidad son marcadores que ejecutan Javascript en páginas arbitrarias, pero no ambos (probado en Firefox 7). Todavía no estoy convencido de que funcione.
Guss

13

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

<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. Así es como se ve: http://cl.ly/5WNR


Estoy tratando de aprender más sobre bookmarklets, ¿podrías explicar un poco el código a los novatos? Gracias
Andrew Mackenzie

Por supuesto. Al hacer clic en él, comprueba la URL de la página actual. Si estás en la página donde tu bookmarklet está 'alojado' (línea 4), escribe un elemento de enlace a la página que apunta al favicon deseado. Su navegador verá esto y descargará el favicon. El navegador lo almacena en caché y lo utiliza en el icono de la barra de marcadores. Si estás en cualquier otra página, hará lo que se supone que debe hacer tu bookmarklet.
Brian McAllister

5
No entiendo esto. Cuando arrastra un marcador a su barra de favoritos (como se hace con el marcador Delicious aquí ), ¿qué ejecuta este código? No veo por qué se haría clic en el marcador (y se ejecutaría el código) hasta que se haya guardado en la barra de favoritos, es decir, después de que el navegador se haya establecido en su icono.
dumbledad

6

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

Funciona muy bien en mi Mac✅, pero no pude hacerlo funcionar en Windows 7⃣.❌

Usa "Emoji" 🈳. Son caracteres Unicode, que también parecen iconos de colores. Solo puede elegir de 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 mirar👓 para recordarle lo que hace el bookmarklet.

Por ejemplo, estoy creando un bookmarklet📖 de "clave de seguridad". ¡Así que uso 🔑 en el nombre de mi marcador! 😃😊

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

Utilice este sitio para encontrar un Emoji que funcione para su bookmarklet: http://emojipedia.org/symbols/


1
Solo obtengo un montón de marcas de "la fuente no tiene glifo para este punto de código". Dado que estoy usando Firefox en Linux, eso significa que el comportamiento de respaldo ni siquiera pudo encontrarlos en ninguna fuente en el sistema. ¿Estoy en lo cierto al suponer que esos son los glifos de emoji específicos de Mac que los bloggers han estado diciendo a los diseñadores web que eviten?
ssokolow

Sí. Sin embargo, si sabe que su cliente se está ejecutando en una computadora capaz de mostrar emoji, ¿es tan malo mostrarlos? Para mi uso personal, permitiré que los usuarios decidan si quieren generar emoji o no. Si no es así, no genero ninguno, solo obtienen texto sin formato.
Theo

Aparte de ser una solución que podría tropezar con innumerables fallas en el diseñador web que la usa, no me arriesgaría a dar la mala impresión que podría causar cuando (no si) alguien inevitablemente carga algo que construyo en un sistema que no es Mac.
ssokolow

Votando esto en parte con fines prácticos y en parte con fines de entretenimiento. ¡Los emojis son la respuesta a todos los problemas de la vida!
Sridhar Sarnobat

Consejo: use este sitio para copiar y pegar los emojis que necesita: emojipedia.org/upwards-black-arrow .
Sridhar Sarnobat

4

Según la sugerencia de Wizek, puede poner su código en un data-uri.

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

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

Desafortunadamente, 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>"que 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 seguirá siendo la misma y el bookmarklet en sí no tendrá una ubicación, por lo que Chrome no podrá guardar un favicon para él.

Por el contrario, con un marcador de uri de datos vamos a la otra página , tiene su propia ubicación y el navegador puede guardar un favicon para él. Piense en ello como "Alojar 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 los marcadores que interactúan con la página actual, solo para el código que puede ejecutar en una página diferente.

  • No uses // para comentarios. Dado que todo se guardará 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 arrastrar este código a su barra de URL (o guardarlo como marcador) para usarlo. Es una página simple con un área de entrada para el código y para un ícono, y luego genera un marcador con el ícono

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>
    <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 to your bookmarks bar! </a><br /><br />
        <div> 
            <label for="fav_href">Favicon:</label>
            <input id="fav_href" value='https://stackoverflow.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(()=>{            &%2313
    alert('hello world');   /*Use this format for comments, use %2523 instead of hash (number sign)*/ &%2313
    window.history.back();  &%2313
},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 (puede que no funcione si su navegador bloquea las 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 íconos de marcadores:

  • Exportar la barra de marcadores, editarla e importarla nuevamente, como se describe en esta respuesta /superuser/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in- Google Chrome

  • Convirtiendo el bookmarklet en una extensión. Ya no será un bookmarklet, 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 consumen memoria RAM (¿alrededor de 10 MB para las simples?), Si tiene mucho y poco RAM, puede que no sea la solución para usted. Además, no tendrá texto como en un marcador, solo el ícono.


1
Esto solo funciona para Chrome y Safari. No Mozilla, desafortunadamente. La intención de un bookmarklet es ser un navegador cruzado, en mi opinión.
sijpkes

Esto es como lo único que funcionó. Santa vaca, muchas gracias.
Alex Beals

3

Es posible asignar y modificar favicon el favicon usando javascript y canvas (ver el increíble juego de favicon Defender of the Favicon ). El código fuente del juego te ayudará a hacer eso (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 un bookmarlet que configura el favicon de esta manera? No lo sé, pero sería bueno intentarlo. ¿El navegador puede guardarlo?


1
(Probado en Chrome) Sin solución. Cuando cambia un favicon usando un marcador, todavía está en la misma ubicación. El navegador puede cambiar el icono de un marcador de la página actual, pero no asignará uno al marcador.
aljgom

1

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

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

Examinando todos los símbolos posibles, es posible que encuentre el personaje que se parece más al icono que desea


1

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

data:la codificación de un icono en un data:html codificado -uri 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

Dado que esto es así <html>, también podemos correr <script type="javascript">allí.

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.