Как создать свой ярлык для сайта в Google Chrome

Подобно другим популярным веб-обозревателям браузер Google Chrome также использует быстрые закладки, отображающиеся в виде миниатюрных изображений страницы сайта. Поддерживает Chrome и другой тип закладок, а именно ярлыки веб-приложений, также отображающихся на стартовой странице.Некоторые из таких ярлыков, например такие как YouTube или Поиск Google представляют собой обычные закладки на веб-ресурсы, другие такие как Gmail Оффлайн или Pocket Website ведут на специальную страничку веб-приложения. В отличие от быстрых закладок, где используется миниатюра страницы сайта, каждый ярлык веб-приложения использует уникальный логотип, созданный разработчиками расширения.

Вы, наверное, уже стали недоумевать, к чему весь этот разговор и что собственно этим мы хотим сказать. Ладно, скажем прямо. А известно ли вам, что такие ярлыки вы можете создавать сами и использовать их в качестве закладок на свои любимые сайты? Вообще-то создать ярлык-закладку на любой сайт в панели веб-приложений не составляет никакого труда, достаточно лишь захватить мышкой какой-нибудь элемент со ссылкой и перетащить его на свободное место панели веб-приложений, только вот вряд ли кого обрадует внешний вид такого ярлыка. Вот как к примеру будут выглядеть ярлыки на Softrew и Википедию. Не очень весело, правда?

Есть в Chrome и другой метод создания ярлыков веб-приложений и особым удобством он не отличается. В этом случае на выбор пользователя предлагается создать ярлык с URL-адресом на Рабочем столе, меню Пуск или Панели задач.

Мы же рассмотрим более интересный способ создания ярлыков, тем более что делается это очень просто. Итак, приступим. Для осуществления задуманного нам понадобится адрес сайта и иконка в формате PNG (с поддержкой прозрачности) размером 128*128 пикселей. Отыскать картинку можно на бескрайних просторах Интернета или, если вы обладаете соответствующими навыками, создать самому.

В качестве примера мы будет использовать шуточное изображения черепа, разумеется, к нашему сайту оно никакого отношения не имеет, но сейчас это не важно. Создайте в любом удобном для вас месте (например, в загрузке) папку с произвольным названием, а лучше всего, чтобы не возникало путаницы, с названием сайта. В этой папке создайте текстовый файл manifest.json, затем откройте его в любом текстовом редакторе (для этих целей лучше всего использовать Notepad++) и скопируйте туда вот этот код:

Для тех, кто не знает, формат json представляет собой файл объектов javascript и содержит исполняемый код скрипта. Название (name) и описание (Краткое описание сайта) вставляем свое, то же самое касается URL-адреса. Редактируемые элементы кода мы выделили красным. Больше ничего трогать не надо. Подготовленное изображение скопируйте в папку с файлом скрипта. Об особенностях подготовки картинки будет сказано ниже.

А теперь переходим в раздел управления расширениями Google Chrome (Инструменты -> Расширения). В верхней части рабочего окна поставьте галочку в чекбоксе “Режим разработчика” и нажмите кнопку “Загрузить распакованное расширение”.

Если все сделано без ошибок, в панели расширений появится еще одно, с указанным названием, описанием и иконкой (логотип должен отображаться в окошке разрешений), в противном случае вы получите сообщение об ошибке с кратким описанием причины. В панели веб-приложений также должен появиться ярлык с именем.

Полезные примечания

Если вы внимательно рассмотрели код, то наверняка заметили, что в качестве имени изображения используется число 128. Это сделано чисто для удобства – имя совпадает с разрешением иконки. В принципе вы можете использовать любое имя, но тогда вам придется указать это в коде. Также обратите внимание, что в коде используются не наклонные, а прямые кавычки. Это важно, в противном случае вы получите ошибку синтаксиса. И еще, перед тем как вставлять код обязательно пересохраните файл в кодировке UTF-8.

Для пользовательских ярлыков доступны те же опции (в основном) что и для прочих веб-приложений. Если вы хотите поделиться таким приложением с друзьями, самое лучшее будет его запаковать в файл подключаемого модуля. Такие файлы имеют расширение CRX и используются для инсталляции расширений в Google Chrome.Для этого в разделе управления расширениями нажмите кнопку “Упаковка расширений”, укажите путь к каталогу с изображением и скриптом, при необходимости добавьте файл ключа, что необязательно и запакуйте ваше расширение в единый установочный файл.

Сохранен модуль будет в директорию на уровень выше той, в которой располагаются изображение и скрипт.

К сожалению, созданные CRX-расширения не всегда удается установить стандартным путем, Chrome может выдавать ошибку “ругаясь” при этом на некорректный пакет. В этом случае можно воспользоваться ручной установкой в режиме разработчика.