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