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

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

Как создать свой ярлык для сайта в Google Chrome
СОДЕРЖАНИЕ
2
Как создать свой ярлык для сайта в Google Chrome

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

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

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

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

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

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

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

{“manifest_version”: 2,”name”: “Softrew.ru“,”description”: “Краткое описание“,”version”: “1.0”,”icons”: {“128”: “128.png”},”app”: {“urls”: [“https://www.softrew.ru/

],”launch”: {“web_url”: “https://www.softrew.ru/“}},”permissions”: [“unlimitedStorage”,”notifications”]}

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

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

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

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

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

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

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

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

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

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

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

Комментировать
2
3 278
Комментарии
  1. John ()
    Ответить

    Что-то не получилось. Помогите, пожалуйста, в чем моя ошибка.{
    "manifest_version": 2,
    "name": "www.betfair.com",
    "description": "Краткое описание",
    "version": "1.0",
    "icons": {
    "128": "128.png"
    },
    "app": {
    "urls": [
    "http://www.betfair.com/exchange/"

    ],
    "launch": {
    "web_url": "http://www.betfair.com/exchange/"
    }
    },
    "permissions": [
    "unlimitedStorage",
    "notifications"
    ]
    }

  2. NewEra ()
    Ответить

    А у меня все получилось

;) :| :x :twisted: :sad: :roll: :oops: :o :mrgreen: :idea: :evil: :cry: :cool: :arrow: :P :D :???: :?: :-) :!: 8O

Это интересно