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

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

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

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

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

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

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

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

1. Перетащите букмарклет на панель закладок.
2. Рядом с ним создайте закладку сайта, значок которого вы хотите использовать для своего букмарклета.
3. Откройте Диспетчер закладок, щелкните раскрывающееся меню «Организовать» и выберите «Экспорт», сохраните закладки в виде файла HTML.
4. Откройте этот html-файл в текстовом редакторе.
5. Найдите закладку, которую вы только что создали, скажем, ее закладку 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>

6. Скопируйте весь тег ICON
7. В том же файле найдите созданный вами букмарклет и вставьте тег 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>

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

В основном процедура состоит в том, чтобы получить атрибут ICON тега закладки и вставить его в тег букмарклета.

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

PS Безопасность даже не играет, значки могут быть откуда угодно. Нет никаких ограничений.

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

После прочтения сайта 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

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

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

Используйте «Emoji» 🈳. Это символы Unicode, которые также выглядят как красочные значки. Вы можете выбирать только из предопределенного списка изображений, но на самом деле это неплохо если все, что вы пытаетесь сделать, - это дать пользователю что-нибудь посмотреть👓, чтобы напомнить им о том, что делает букмарклет.

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

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

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

Основываясь на предложении Визека, вы можете поместить свой код в 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 МБ для простых?), Если у вас много и мало оперативной памяти, это может быть не решение для вас. Кроме того, у вас не будет текста, как в закладке, только значок.

Можно назначить и изменить значок favicon с помощью javascript и холста (см. Удивительную игру Defender of the 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);
}

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

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

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

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

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

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

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"> туда .

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