На підставі пропозиції Wizek ви можете ввести свій код в урі даних.
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>
І збережіть усе це як закладку. ( Спробуйте! Перетягніть код на панель вкладок)
На жаль, він працює лише для певних випадків (докладніше нижче).
Як це працює:
(Принаймні, в Chrome) Це схоже на закладку, використовуючи формат, javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"як пропонують інші рішення. У цьому випадку html зі сторінки, на якій ви перебуваєте, буде замінено html із закладок, але розташування залишається незмінним і сам закладка все ще не матиме розташування, тому Chrome не зможе зберегти для цього фавікон.
На відміну від цього, із закладкою data-uri ми переходимо на іншу сторінку , у неї є власне місцезнаходження, і браузер може зберегти для неї фавікон. Подумайте про це як "Розміщення веб-сайту у вашому браузері", до якого ви могли б отримати доступ на інших комп’ютерах, якщо синхронізувати закладки. Ви також можете використовувати базове зображення64 для фавікону замість URL-адреси, якщо ви хочете, щоб все було локальним.
Він має обмеження.
При натисканні на неї вона залишає поточну сторінку і завантажує сторінку в дані . Тому ви не зможете використовувати його для книжкових марок, які взаємодіють із поточною сторінкою, лише для коду, який ви можете виконати на іншій сторінці.
Не використовуйте // для коментарів. Оскільки це буде збережено в один рядок, загорніть їх у / ** / і не забудьте свої крапки з комою
У FF це зберегло фавікон, але я не зміг встановити його завжди відкривати спливаючі вікна, якщо я хочу використовувати window.open (), оскільки це не дозволяє мені зберегти поведінку за замовчуванням для URL-адрес даних.
Як приклад:
Використовуючи цю техніку, я створив невеликий Bookmarklet With Generator Icon. Ви можете перетягнути цей код у свій рядок URL-адрес (або зберегти його як закладку), щоб використовувати його. Це проста сторінка з областю введення для коду та піктограми, а потім генерує закладку з піктограмою
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>
Ще один приклад: Bookmarklet, щоб відкрити месенджер Facebook у власному маленькому вікні (може не працювати, якщо браузер блокує спливаючі вікна за замовчуванням)
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>
Інші способи вирішення проблеми Chrome для отримання піктограм закладок:
Експорт панелі закладок, її редагування та імпорт знову, як описано у цій відповіді /superuser/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in- Гугл хром
Перетворення закладок у розширення. Це вже не буде закладкою, але він матиме ту саму функцію. Ось простий веб-сайт, який робить це для вас http://sandbox.self.li/bookmarklet-to-extension/, а потім просто змініть файл значків на те, що вам потрібно. Недолік цього полягає в тому, що розширення використовують барабан (приблизно 10 Мб для простих?), Якщо у вас багато і мало оперативної пам'яті, це може бути не для вас рішенням. Також у вас не буде тексту, як у закладці, лише піктограма.
