Основываясь на предложении Визека, вы можете поместить свой код в 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>
И сохраните все это как закладку. ( Попробуйте! Перетащите код на панель вкладок)
К сожалению, это работает только в определенных случаях (подробнее ниже).
Как это устроено:
(По крайней мере, в Chrome) Это похоже на букмарклет, использующий формат, предложенный javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"другими решениями. В этом случае html со страницы, на которой вы находитесь, будет заменен html из букмарклета, но расположение останется прежним. и у самого букмарклета по-прежнему не будет местоположения, поэтому Chrome не может сохранить для него значок.
Напротив, с закладкой data-uri мы переходим на другую страницу , у нее есть собственное местоположение, и браузер может сохранить для нее значок. Думайте об этом как о «размещении веб-сайта в вашем браузере», к которому вы сможете получить доступ с других компьютеров, если синхронизируете свои закладки. Вы также можете использовать изображение base64 для значка вместо URL-адреса, если хотите, чтобы все было локально.
У него есть ограничения.
Когда вы щелкаете по нему, он покидает текущую страницу и загружает страницу в данные . Поэтому вы не сможете использовать его для букмарлетов, взаимодействующих с текущей страницей, только для кода, который вы можете выполнить на другой странице.
Не используйте // для комментариев. Поскольку все это будет сохранено в одной строке, заключите их в / ** / и не забудьте поставить точку с запятой.
В FF он сохранил значок, но я не смог настроить его так, чтобы он всегда открывал всплывающие окна, если я хочу использовать window.open (), потому что он не позволяет мне сохранять поведение по умолчанию для 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>
Другой пример: букмарклет для открытия мессенджера 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 МБ для простых?), Если у вас много и мало оперативной памяти, это может быть не решение для вас. Кроме того, у вас не будет текста, как в закладке, только значок.
