{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"nbuc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Расширения и плагины — полезные дополнения к уже существующим функциям на сайте и в браузере. С их помощью можно записывать аудио и видео с экрана, включать поиск ошибок, а также многое другое.","type":"unstyled","key":"d7jgo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой статье мы рассмотрим создание самого простого расширения — запускатора избранных сайтов. Хотя приложение и будет примитивным, оно всё-таки раскроет процесс создания и загрузки расширения для google Chrome.","type":"unstyled","key":"4d0ad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Желательно знать HTML, CSS и JS (если придётся расширить набор функций) на самом базовом уровне, чтобы понимать материал лучше, но в любом случае мы будем объяснять код.","type":"unstyled","key":"3kldb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В каждом расширении для Chrome должен быть файл manifest.json. Он служит только для описания функций приложения, общего описания, номера версии и разрешений. Более подробно вы сможете ознакомиться с этим файлом в блоге команды разработчиков Chrome.","type":"unstyled","key":"9inip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"Давайте же внесём свой вклад в развитие web","type":"header-three","key":"ftpcg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь всё очень просто:","type":"unstyled","key":"1cmiu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{\n \"manifest_version\": 2,\n \"name\": \"Tproger Launcher\",\n \"description\": \"Запускатор представительств Tproger\",\n \"version\": \"1.0.0\",\n \"icons\": {\"128\": \"icon_128.png\"},\n \"browser_action\": {\n \"default_icon\": \"icon.png\",\n \"default_popup\": \"popup.html\"\n },\n \"permissions\": [\"activeTab\"]\n}\n","type":"unstyled","key":"b6976"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После того как мы описали наше расширение в файле ","type":"unstyled","key":"2d2hv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"manifest.json, можно благополучно переходить к следующему этапу, а именно к разметке.","type":"unstyled","key":"atbi6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала давайте напишем базовый HTML-код:","type":"unstyled","key":"2p1n7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n \n\n\n\n\n\n","type":"unstyled","key":"6h5hr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выше мы написали каркас для плагина, сейчас он полностью пуст и нужно указать название, ссылки на иконки и шрифт. Это можно сделать с помощью тега link, обратите внимание, он не закрывается:","type":"unstyled","key":"8g5qr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n \n Tproger Media Quick Launcher\n \n \n \n \n\n\n\n\n\n","type":"unstyled","key":"c16oe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не забывайте указывать кодировку, иначе не отобразятся кириллические буквы.","type":"unstyled","key":"7ok0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перейдём ко второму блоку кода, а именно к тегу body и его содержимому.","type":"unstyled","key":"8g9ua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так как наше расширение — модальное окно, давайте соответствующим образом назовём контейнеры. Сначала добавим контейнер шапки расширения, в которой укажем ссылку к иконке, напишем название и добавим номер версии.","type":"unstyled","key":"bqvqi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n \n \n \n","type":"unstyled","key":"1rhoe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переходим к следующему контейнеру. Он содержит описание функций расширений.","type":"unstyled","key":"571l5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n \n","type":"unstyled","key":"eit6t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее следует контейнер modal-icons, внутри которого ещё 5 контейнеров.","type":"unstyled","key":"dd6fs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n","type":"unstyled","key":"2ai7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для каждой иконки мы выделили отдельный контейнер с классом flex, чтобы знать, к каким элементам будем применять Flexbox.","type":"unstyled","key":"2q6c8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кроме того, мы указали названия иконок для каждого ресурса. Более детально со всеми доступными элементами можно ознакомиться на сайте Bootstrap.","type":"unstyled","key":"b6ahf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"Стили","type":"header-three","key":"b7n9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы расширение выглядело красивее и было удобнее, чем сейчас, нужно добавить стили на CSS.","type":"unstyled","key":"c11h3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n","type":"unstyled","key":"aqqt5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы постарались как можно подробнее объяснить в комментариях относительно сложные моменты. А сейчас нам нужно лишь загрузить наше расширение в браузер Chrome и оно будет работать, а если пройдёт модерацию, то появится в магазине расширений (плагинов).","type":"unstyled","key":"cs9jt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь давайте добавим файл с расширением .js, если вдруг потребуется расширить функции дополнения для браузера.","type":"unstyled","key":"6kiei"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n Tproger Media Quick Launcher\n \n \n \n \n \n \n\n","type":"unstyled","key":"4rgoj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Проверка кода и публикация","type":"header-three","key":"1vbl0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Прежде чем опубликовать, проверьте ещё раз весь код. Если вы делали всё так, как мы, то у должно было получиться следующее:","type":"unstyled","key":"49idm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\n \n Запускатор Tproger\n \n \n \n \n \n \n \n \n\n\n\n \n \n \n \n \n \n \n \n\n\n\n","type":"unstyled","key":"5vfjc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После проверки можно приступать к публикации расширения. Для этого у вас должны быть следующие файлы и папки:","type":"unstyled","key":"a9ts3"},{"data":{"image":{"id":"5d22dcd138233000aeeb9142"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5ie2v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И далее следуем инструкциям на скриншотах ниже.","type":"unstyled","key":"8e6g2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для загрузки расширения в магазин нам нужно зайти в меню, навести мышку на «дополнительные настройки», а затем выбрать «расширения» или ввести в адресной строке chrome://extensions/.","type":"unstyled","key":"46qbv"},{"data":{"image":{"id":"5d22dcd1945b4d00adc156c1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cn2v4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее нажимаем на «загрузить распакованное расширение» и выбираем папку с файлами.","type":"unstyled","key":"8co0c"},{"data":{"image":{"id":"5d22dcd17744cc00adba7464"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7e8gi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После того, как вы выбрали папку с файлами, она загрузится в браузер и превратится в расширение, которое будет доступно за пределами правой части адресной строки.","type":"unstyled","key":"drq0u"},{"data":{"image":{"id":"5d22dcd207f8ec00ae8a5994"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3ae91"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надеемся, что всё работает правильно и вы понимаете структуру расширений для Chrome.","type":"unstyled","key":"7f7ff"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"R5zLMYmPDrKbMr2bwJpB"}],"entityMap":{}},"mentions":[]}

\n Запускатор Tproger\n (1.0.0)\n

\n Запускатор Tproger\n (1.0.0)\n