На основании предложения Визека вы можете поместить свой код в 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, если хотите сохранить все локальным.
У него есть ограничения.
Когда вы щелкаете по ней, она покидает текущую страницу и загружает страницу в data . Поэтому вы не сможете использовать его для закладок, которые взаимодействуют с текущей страницей, только для кода, который вы можете выполнить на другой странице.
Не используйте // для комментариев. Поскольку все они будут сохранены в одну строку, оберните их в / ** / и не забудьте свои точки с запятой
В FF он сохранил значок, но я не смог настроить его всегда открывать всплывающие окна, если я хочу использовать window.open (), потому что он не позволяет мне сохранять поведение данных по умолчанию URLs
Как пример:
Используя эту технику, я создал небольшой Bookmarklet с Icon Generator. Вы можете скопировать это в адресную строку (или сохранить как закладку), чтобы использовать его
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 style='background: -webkit-linear-gradient(top, #f4f8f9 0%, #e0f8ff 95%);'>
<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! </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(()=>{ 
alert('hello world'); /*Use this format for comments*/ 
window.history.back(); 
},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 для получения иконок букмарклетов:
Экспорт панели закладок, редактирование и повторный импорт, как описано в этом ответе https://superuser.com/questions/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in-google-chrome
Превращение букмарклета в расширение. Это больше не будет букмарклет, но у него будет та же функция. Вот простой веб-сайт, который сделает это за вас http://sandbox.self.li/bookmarklet-to-extension/, затем просто измените файл значков на то, что вам нужно. Недостатком этого является то, что расширения используют оперативную память (около 10 МБ для простых?), Если у вас много и мало оперативной памяти, это может не быть решением для вас. Кроме того, у вас не будет текста, как в закладке, только значок.