Как установить значки/значки при перемещении букмарклета на панель инструментов?

Я сделал себе букмарклет, и он функционирует просто отлично, но когда он добавлен в панель инструментов в Opera или Firefox, он просто берет значок закладки по умолчанию для браузера (глобус и звезда соответственно). У моего сайта есть значок, а на вкладке "окно", вкладка и даже [сайт] используется указанная мной значок. Просто не мой букмарклет.

Как я могу закодировать свой сайт или букмарклет, чтобы букмарклет также получил значок?

Мне известно о различных способах ручного хакерства, которые пользователи могут использовать для установки знака после факта, но это нежелательные решения.

Ответ 1

В закладке используется схема javascript:// и, следовательно, нет домена, из которого может быть загружен значок.

Итак, в настоящее время вы не можете предоставить значок для букмарклета. Подумайте об этом так: помните всю песочницу Javascript - где Javascript не может получить доступ к чему-либо за пределами веб-страницы, на которой он работает? Ну, букмарклет, который нужно привязать к любому домену для текущей страницы, которую вы смотрите, не может быть привязан к значку на вашем собственном веб-сайте.

Обновление: по словам Ганса Шмукера ответ, есть возможность создать букмарклет, который при загрузке браузером в меню закладок создаст HTML-документ с фэйвикон. Похоже, что это может сработать, но мне еще нужно увидеть что-то подобное в действии, и мои тесты вернулись отрицательно.

Ответ 2

Это не совсем правильно: в закладок нет домена, но у него есть местоположение (которое является сам букмарклет), и вы можете назначить ему значок. После этого это вопрос о том, как браузер сохраняет значки (Firefox сохраняет значок закладки постоянно, вам может не повезти с другими браузерами).

P.S. Безопасность даже не играет в нее, иконы могут появляться откуда угодно. Нет никаких ограничений.

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

Ответ 3

После прочтения tapper [ware] и сайта Restafarian, вот самое простое решение, которое я мог бы придумать:

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

Отлично работает в Chrome и FF, но FF4 - единственный браузер, который сохранит значок на панели закладок. Вот как это выглядит: http://cl.ly/5WNR

Ответ 4

Вот как вы можете это сделать:

Перетащите свой букмарклет в панель закладок.
Рядом с ним создайте закладку сайта, который вы хотите использовать для своего букмарклета.
Откройте "Менеджер закладок", нажмите "Выделить" и выберите "Экспорт", сохраните закладки в виде файла html.
Откройте этот html файл в текстовом редакторе.
Найдите закладку, которую вы только что создали, скажем, ее закладку Gmail, у вас должен быть html-код, который выглядит следующим образом:

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

Скопируйте весь тег ICON
В том же файле найдите созданный букмарклет и вставьте тег ICON, который вы скопировали в свой тег букмарклет:

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

Сохранить этот файл
Вернитесь в диспетчер закладок Chrom, нажмите еще раз Организовать и выберите Импорт
Импортировать HTML файл, который вы только что отредактировали, ваш букмарклет теперь имеет favicon.

В основном процедура заключается в получении атрибута ICON ярлыка закладки и вставки его в тег bookmarklet

Ответ 5

Вот хорошая техника, которая почти делает то, что вы хотите.

Отлично работает на моем Mac, но я не мог заставить его работать в Windows 7⃣.

Используйте "Emoji" 🈳. Они являются символами Юникода, которые также выглядят как красочные значки. Вы можете выбирать только из предопределенного списка изображений, но на самом деле это не так, если все, что вы пытаетесь сделать, это дать пользователю что-то посмотреть, чтобы напомнить им о том, что делает букмарклет.

Например, я создаю "секретный ключ безопасности". Поэтому я использую 🔑 в своем имени букмарклета! 😃😊

Итак, в основном вы видите изображение🎑 на панели закладок 😝

Используйте этот сайт, чтобы помочь вам найти Emoji, который работает для вашего букмарклета: http://emojipedia.org/symbols/

Ответ 6

Можно назначить и изменить favicon favicon, используя javascript и canvas (см. удивительную игру favicon Защитник Favicon). Исходный код игры поможет вам в этом (он в основном полагается на использование функции toDataUrl() на холсте, как показано на линии 554 источника).

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

Что происходит, когда щелчок или сохранение букмаркета, определяющего этот значок? Я не знаю, но было бы неплохо попробовать. Браузер может его сохранить?

Ответ 7

На основе предложения Wizek вы можете поместить свой код в 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(), потому что он не позволяет мне сохранять поведение по умолчанию для данных URLs

В качестве примера:

Используя эту технику, я создал небольшую закладку с генератором значков. Вы можете скопировать это в свою строку 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 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(()=>{            &#13
    alert('hello world');   /*Use this format for comments*/ &#13
    window.history.back();  &#13
},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/, а затем просто измените файл значка на то, что вы хотите. Недостатком этого является то, что расширения используют up ram (около 10mb для простых?), Если у вас много и маленький баран, это может быть не решение для вас. Кроме того, у вас не будет текста, подобного в закладке, только значок.

Ответ 8

Я думаю, что возможный способ - использовать unicode char в якорь-ярлыке, например, ваш значок:

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

Просеивая все возможные символы, вы можете найти символ, который больше напоминает значок, который вы хотите

Ответ 9

Итак, это еще не полное решение, но может быть шагом в направлении работы.

data: кодирование значка в data: -uri закодированных html-работах, к моему удивлению.

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

Так как это <html>, мы можем также запустить <script type="javascript">.

Для некоторых букмарклетов это может быть уже более чем достаточно. Для других, которые хотели бы изменить текущую страницу или, по крайней мере, получить некоторую информацию от нее, прежде чем открывать новую вкладку, пока еще сложно. Я обновлю этот ответ, если найду способ сделать это.