Jak ustawić favicon / ikonę po przeciągnięciu bookmarkletu na pasek narzędzi?

Zrobiłem sobie bookmarklet i działa dobrze, ale po dodaniu do paska narzędzi w Operze lub Firefoksie po prostu przyjmuje domyślną ikonę zakładki dla przeglądarki (odpowiednio globus i gwiazdka). Moja witryna ma ikonę ulubionych, a okno, zakładka, a nawet zakładka [witryna] używa określonej przeze mnie ikony ulubionych. Po prostu nie mój bookmarklet.

Jak mogę zakodować moją witrynę lub bookmarklet, aby bookmarklet również otrzymał favicon?

Zdaję sobie sprawę z różnych technik ręcznego hakowania, których użytkownicy mogą użyć do ustawienia ikony ulubionych po fakcie, ale są to niepożądane rozwiązania.

Bookmarklet korzysta ze javascript://schematu i dlatego nie ma domeny, z której można by załadować favicon.

Tak więc obecnie nie ma możliwości udostępnienia favikony dla bookmarkletu. Pomyśl o tym w ten sposób: pamiętaj o całej rzeczy z piaskownicą Javascript - gdzie Javascript może nie uzyskać dostępu do niczego poza domeną strony internetowej, na której działa? Cóż, bookmarklet, który musi być powiązany z dowolną domeną dla aktualnie oglądanej strony, nie może być również powiązany z favikonem na Twojej własnej stronie internetowej.

Aktualizacja: Zgodnie z odpowiedzią Hansa Schmuckera, istnieje możliwość stworzenia bookmarkletu, który po załadowaniu przez przeglądarkę do menu zakładek wygeneruje dokument HTML z favikoną. Rozumowanie wydaje się działać, ale jeszcze nie widziałem czegoś takiego w akcji, a moje testy wypadły negatywnie.

Oto jak możesz to zrobić:

1. Przeciągnij bookmarklet do paska zakładek.
2. Obok niego stwórz zakładkę strony, której favikona chcesz użyć dla swojego bookmarkletu.
3. Otwórz Menedżera zakładek, kliknij menu rozwijane Organizuj i wybierz Eksportuj, zapisz zakładki jako plik HTML.
4. Otwórz ten plik html w edytorze tekstu.
5. Znajdź właśnie utworzoną zakładkę , powiedzmy, że jest to zakładka Gmaila, powinieneś mieć do niej kod HTML, który wygląda następująco:

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

6. Skopiuj cały tag ICON
7. W tym samym pliku znajdź utworzony bookmarklet i wstaw skopiowany tag ICON do tagu 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>

8. Zapisz ten plik
9. Wróć do Menedżera zakładek Chrom, kliknij ponownie Organizuj i wybierz Importuj
10. Importuj plik HTML, który właśnie edytowałeś. Twój bookmarklet ma teraz ikonę ulubionych .

Zasadniczo procedura polega na pobraniu atrybutu ICON tagu bookmark i wstawieniu go do tagu bookmarklet

To nie do końca w porządku: bookmarklet nie ma domeny, ale ma lokalizację (która jest samą bookmarkletem) i możesz przypisać do niej ikonę. Potem jest już kwestia tego, jak przeglądarka zapisuje ikony (Firefox zapisuje ikonę zakładki na stałe, możesz nie mieć tyle szczęścia z innymi przeglądarkami).

PS Security nawet w to nie gra, ikony mogą pochodzić z dowolnego miejsca. Nie ma żadnych ograniczeń.

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

Po przeczytaniu stron tapper [ware] i Restafarian, oto najprostsze rozwiązanie, jakie mogłem wymyślić:

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

Działa świetnie w Chrome i FF, ale FF4 to jedyna przeglądarka, która zapisze ikonę na pasku zakładek. Oto jak to wygląda: http://cl.ly/5WNR

Oto fajna technika, która robi prawie to, co chcesz

Działa świetnie na moim Macu✅, ale nie mogłem go zmusić do działania w systemie Windows 7⃣

Użyj „Emoji” 🈳. Są to znaki Unicode, które również wyglądają jak kolorowe ikony. Możesz wybierać tylko z predefiniowanej listy obrazów, ale w rzeczywistości nie jest to złe - jeśli wszystko, co próbujesz zrobić, to dać użytkownikowi coś do obejrzenia - aby przypomnieć mu o tym, co robi bookmarklet.

Na przykład tworzę bookmarklet „klucz bezpieczeństwa”. Więc używam 🔑 w mojej nazwie bookmarkletu! 😃😊

Zasadniczo widzisz obraz🎑 na pasku zakładek 😝

Skorzystaj z tej witryny, aby znaleźć emotikony pasujące do Twojego bookmarkletu: http://emojipedia.org/symbols/

Bazując na sugestii Wizka, możesz umieścić swój kod w 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>

I zapisz to wszystko jako zakładkę. ( Spróbuj! Przeciągnij kod na pasek kart)

Niestety działa tylko w niektórych przypadkach (więcej poniżej).

Jak to działa:

(Przynajmniej w Chrome) Jest podobny do bookmarkletu używającego formatu, javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"jak sugerowały inne rozwiązania. W takim przypadku kod HTML ze strony, na której się znajdujesz, zostanie zastąpiony kodem HTML z bookmarkletu, ale lokalizacja pozostanie taka sama, a sam bookmarklet nadal nie będzie miał lokalizacji, więc Chrome nie będzie mógł zapisać dla niej favicon.

W przeciwieństwie do zakładki data-uri przechodzimy na drugą stronę , ma ona swoją lokalizację, a przeglądarka może dla niej zapisać favicon. Pomyśl o tym jako o „Hostowaniu witryny internetowej w przeglądarce”, do której dostęp byłby możliwy na innych komputerach po zsynchronizowaniu zakładek. Możesz także użyć obrazu base64 dla ikony ulubionych zamiast adresu URL, jeśli chcesz zachować wszystko lokalnie.

Ma ograniczenia.

• Po kliknięciu opuszcza bieżącą stronę i ładuje stronę w danych . Dlatego nie będziesz mógł go używać do broszur, które wchodzą w interakcję z bieżącą stroną, tylko dla kodu, który możesz wykonać na innej stronie.

• Nie używaj // do komentarzy. Ponieważ wszystko zostanie zapisane w jednym wierszu, zawiń je w / ** / i nie zapomnij o średnikach

• W FF zapisał favicon, ale nie mogłem ustawić go tak, aby zawsze otwierał wyskakujące okienka, jeśli chcę użyć window.open (), ponieważ nie pozwala mi to zapisać domyślnego zachowania dla adresów URL danych

Jako przykład:

Korzystając z tej techniki stworzyłem małą zakładkę z generatorem ikon. Możesz przeciągnąć ten kod na pasek adresu URL (lub zapisać go jako zakładkę), aby go użyć. Jest to prosta strona z obszarem wprowadzania kodu i ikony, a następnie generuje bookmarklet z ikoną

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>

Kolejny przykład: Bookmarklet do otwierania komunikatora Facebook w jego własnym małym oknie (może nie działać, jeśli Twoja przeglądarka domyślnie blokuje wyskakujące okienka)

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>

Inne obejścia Chrome dotyczące uzyskiwania ikon bookmarkletów:

• Eksportowanie paska zakładek, edytowanie go i ponowne importowanie, zgodnie z opisem w tej odpowiedzi /superuser/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in- google-chrome

• Przekształcenie bookmarkletu w rozszerzenie. Nie będzie to już bookmarklet, ale będzie miał tę samą funkcję. Oto prosta witryna, która robi to za Ciebie http://sandbox.self.li/bookmarklet-to-extension/, a następnie po prostu zmień plik ikony na taki, jaki chcesz. Wadą tego jest to, że rozszerzenia zużywają pamięć RAM (około 10 MB dla prostych?), Jeśli masz dużo i mało pamięci RAM, może to nie być rozwiązaniem dla Ciebie. Ponadto nie będziesz mieć tekstu jak w zakładce, tylko ikonę.

Możliwe jest przypisywanie i modyfikowanie favicon favicon za pomocą javascript i canvas (zobacz niesamowitą grę Favicon Defender of the Favicon ). Pomoże Ci w tym kod źródłowy gry (w zasadzie polega on na użyciu funkcji toDataUrl () na płótnie, jak widać w linii 554 źródła).

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

Co się dzieje, gdy bookmarlet ustawiający w ten sposób favicon zostanie kliknięty lub zapisany? Nie wiem, ale fajnie byłoby spróbować. Przeglądarka może to zapisać?

Myślę, że możliwym sposobem jest użycie znaku Unicode w kotwicy bookmarkletu, takiej jak ikona:

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

przeglądając wszystkie możliwe symbole, możesz znaleźć postać, która bardziej przypomina ikonę, którą chcesz

Nie jest to więc jeszcze pełne rozwiązanie, ale może być krokiem w kierunku pracy.

data:kodowanie ikony w data:html zakodowanym a -uri działa, ku mojemu zaskoczeniu.

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

Ponieważ tak jest <html>, możemy <script type="javascript">tam też wbiec .

W przypadku niektórych bookmarkletów może to być więcej niż wystarczające. Dla innych, którzy chcieliby zmodyfikować bieżącą stronę lub przynajmniej uzyskać z niej informacje przed otwarciem nowej karty, pech. Zaktualizuję tę odpowiedź, jeśli znajdę sposób, aby to zrobić.