Создание расширения для chrome

Только ленивый не написал подобный урок. Тысячи их. Но вот ВНЕЗАПНО на форуме опять встал вопрос: «как?». Рассказываю.

Во первых идем в Яндекс по адресу https://translate.yandex.ru/developers/keys. Щелкаем «Создать новый ключ», а полученный ключ копируем в надежное место.

Этот ключик нам понадобится, чтобы обращаться к API Яндекса, как вы понимаете. Далее создаем файл с названием manifest.json

{ «manifest_version»: 2, «name»: «Шайтанама переводилошная», «version»: «0.1», «icons»: { «16»: «16×16.png», «32»: «32×32.png», «48»: «48×48.png», «128»: «128×128.png» }, «browser_action»: { «default_title»: «Открыть переводчик», «default_icon»: «48×48.png», «default_popup»: «popup.html» }, «permissions»: }

manifest_version — на момент написания этой статьи актуальна вторая версия.
name — имя вашего расширения.
version — версия расширения. можно использовать латинские цифры и точки в любых сочетаниях.
icons — иконка вашего расширения под разные разрешения.
browser_action:
default_title — всплывающая подсказка при наведения курсора на кнопку расширения.
default_icon — иконка расширения.
default_popup — страничка всплывающего окна нашего переводчика.
permissions — разрешения для нашего расширения. Будем работать с Яндексом, значит Яндекс.

Создаем файлик popup.html

<!DOCTYPE html> <html> <head> <meta charset=»UTF-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1.0″> <meta http-equiv=»X-UA-Compatible» content=»ie=edge»> <script src=»jquery.min.js»></script> <script src=»include.js»></script> <title>Шайтанама перевод</title> <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css»> </head> <body> <div class=»container»> <div class=»copy»> <a href=’http://translate.yandex.ru/’ style=»font-size: 8px; margin-bottom: 5px;»>Переведено с помощью Яндекс Переводчика</a> </div> <textarea id=»input» class=»form-control»></textarea><br> <input id=»btn_submit» type=»submit» class=»form-control»><br> <div id=»result» style=»padding: 5px;»></div> </div> </body> </html>

Тут я думаю все понятно. Одно поле для ввода, одна кнопка и один div, в который мы будем выводить результат.

Важно! Никто никогда конечно не читает лицензионное соглашение, но там написано, что если вы не поставите ссылку на http://translate.yandex.ru/, то ключик у вас могу аннулировать. Не надо так.

Далее самое интересное. Пишем скрипт нашего перевода. Файл include.js:

var yatr = { key: ‘trnsl.1.1.20150402T131655Z.e753695703b45806.bda2fd6beb5bd56a62f0034352aaebbdba3f0952’,//Наш API ключик, который мы скопировали заранее api: ‘https://translate.yandex.net/api/v1.5/tr.json/translate?’,//Адрес API переводчика translate: function(text, callback){ var reg = //i;//Простая регулярка для определения кириллицы var language = (reg.test(text)) ? ‘ru-en’:’en-ru’;//Если кириллица, то переводим с русского на английский. Если нет — то наоборот var url = this.api;//Начинаем формировать строку для нашего запроса url += ‘key=’+this.key;//Дописываем ключик url += ‘&text=’+text;//Текст, который нам надо перевести url += ‘&lang=’+language;//Направление перевода var ajax = new XMLHttpRequest();//Создаем Аякс запрос ajax.open(‘GET’, url, true); ajax.onreadystatechange = function(){ if(ajax.readyState == 4){//Запрос завершился, ответ получен if(ajax.status == 200){//Все Ок text = ajax.responseText; text = JSON.parse(text); text = text.text;//Формируем выходную строку. В принципе это все можно было написать в одну строчку, но так. $(‘#result’).text(text);//Выводим переведенную строку в див с id result callback(text); } } } ajax.send(null); }, } log = function(text){ console.log(text);//На всякий случай)) } $(document).ready(function(){ $(‘#btn_submit’).click(function(){//Нажали на кнопку var text = $(‘#input’).val();//Получили текст из инпута yatr.translate(text, log);//Перевели }); }); //Вы великолепны!

Рабочий пример можно скачать

Чтобы установить расширение в браузер, щелкаем Дополнительные инструменты -> Расширения -> Режим разработчика -> Загрузить распакованное расширение.

Некоторые моменты по работе с Яндекс API честно подсмотрел на канале SkanerSoft

Мне всегда хотелось рассказывать людям об интересных возможностях (технологиях), которые сейчас могут быть доступны каждому, но почему-то не доступны каждому. Да, получилось тавтология, но она в полной мере отображает моё внутреннее негодование на эту животрепещущую для меня тему. Как бы там ни было, речь сейчас будет не о том, как говорится. А поговорим мы сегодня о создании расширений для браузера Google Chrome (далее Хром).

Расширение, которое мы будем разрабатывать на протяжении всей статьи можно найти в магазине Google Chrome Web Store, с той лишь разницей, что там присутствует расширенный функционал. Помимо этого, присутствует исходный код на GitHub, опять таки с оговоркой на то, что там всё написано на CoffeeScript, а здесь будет вестись повествование с JavaScript. Кстати, я не поклонник и не сторонник CoffeeScript, но штука довольно интересная и полезная — советую попробовать.

Если вы когда-нибудь рассматривали идею создания расширения для Chrome, Firefox, Maxthon и прочих браузеров, то, наверное, уже успели заметить, что минимум усилий нужно приложить как раз таки для Хрома. Убедиться в этом можно, взглянув на документацию у соответствующих браузеров.

Постановка задачи

Написание расширения начинается с его описания и постановки задач, которое оно будет решать. Так как я сам себе хозяин и дедлайны срывать мне можно столько раз, сколько хочется, то ТЗ мне писать не нужно — достаточно уяснить, что:

  • Расширение должно скрывать все комментарии в социальной сети «VK»;
  • Расширение должно иметь возможность отображать комментарии;
  • Расширение должно иметь возможность отображать комментарии на конкретных страницах;

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

Предвижу вопросы, содержание которых может быть примерно таким: «Нафига скрывать комментарии, если в этом вся суть социальной сети?!». Что же, справедливый вопрос, заслуживающий развёрнутого ответа:

Так сложились обстоятельства, что последнее время, когда я вижу комментарии в VK, мне хочется дарить горы фейспалмов комментаторам. Я подписан на большое количество различных пабликов, тематических (веб-разработка) и не очень. И как бы это не казалось странным, самым щедрым я становлюсь именно в группах с интересным для меня содержанием, а не котиками (в моём случае с пандами). Такого количества непрофессионального и безобразного потока информации в комментариях я не видел ещё нигде, да ещё и спорить думают. Помимо этого, комментарии в новостной ленте смотрятся не эстетично. В общем, сказано — сделано.

Каркас расширения

Наиприятнейшим для меня сюрпризом стало то, что в самом начале пути нас встречает описательный характер действий. Проще говоря, нам нужно описать наше приложение, его права и возможности — для этого служит файл manifest.json.

Первым делом нужно заполнить три обязательных поля:

{ «manifest_version»: 2, // Начиная с Chrome 18 ставим 2, иначе 1 (не поддерживается такое старьё) «name»: «My Extension», // Название расширения «version»: «versionString» // Версия расширения }

Если с названием всё понятно, а с версией манифеста всё ещё проще, то поподробнее нужно остановиться с версией расширения.

Итак, все мы привыкли, что версия чего-либо состоит из трёх чисел, разделённых точками — Мажорное.Минорное.Патч (Имеется в виду число). С npm, bower и прочими прелестями разговор короткий: либо так, либо никак. А вот Google предлагает следующие варианты:

«version»: «1» «version»: «1.0» «version»: «2.10.2» «version»: «3.1.2.4567»

Тем не менее, я сторонник семантического версионирования и советую вам так же придерживаться этой идеи, но не настаиваю.

Далее рекомендуемыми полями идут:

«default_locale»: «en», // Язык по умолчанию «description»: «A plain text description», // Описание приложения «icons»: {…}, // Иконки 16 & 48 & 128, дополнительно можно 32 & 64 & 96 & 256 и т.д. «short_name»: «Short Name», // Короткое название расширения (~12 символов) для тех мест, где мало места для вывода полного названия

Просто так от Хрома ничего не получить — нужны разрешения. Что же, прочим их:

«permissions»: ,

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

Помимо прочего, нужно указать, что наше приложение хочет иметь иконку справа вверху:

«browser_action»: { «default_title»: «Default Title», // Заголовок, который отображается при наведении «default_icon»: «icon48.png», // Иконка для отображения «default_popup»: «popup.html» // страница (окно), которая будет отображаться при клике на иконку },

Если приложение имеет страницу настроек, то её тоже следует указать:

«options_page»: «options.html»,

Также можно перманентно вешать на различные страницы какие-то ресурсы (css или js), в зависимости от адреса:

«content_scripts»: , «css»: } ],

И, напоследок, скажу, что можно указать фоновую страницу:

«background»: { «page»: «background.html», «scripts»: , «persistent»: false },

Фоновая страница — это невидимая страница, которая нужна для того, чтобы объединять все вкладки. Ссылки на ресурсы можно указывать как в файле манифеста, так и на самой странице background.html.

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

Фоновая страница – это невидимая страница, которая как раз и содержит такой скрипт. Их бывает два типа: persistent (постоянные) и event (управляемые событиями). Persistent, как можно догадаться, загружена постоянно, а event-страница загружается только при необходимости, когда возникает связанное с ней событие.

— Alexandr Kozlov

Обязательно прочитайте статьи Александра в его блоге.

Подробнее обо всех полях файла манифеста можно узнать из документации.

В нашем случае, файл манифеста будет выглядеть следующим образом:

{ «manifest_version»: 2, «name»: «__MSG_app_name__», «short_name»: «VKCommentBlocker», «description»: «__MSG_app_description__», «version»: «0.1.0», «default_locale»: «ru», «permissions»: , «browser_action»: { «default_icon»: «icon_16.png», «default_title»: «__MSG_browser_action__» }, «icons»: { «16»: «icon_16.png», «48»: «icon_48.png», «128»: «icon_128.png» }, «background»: { «persistent»: false, «page»: «background.html» }, «content_scripts»: , «css»: } ], «web_accessible_resources»: }

Из того, что ранее не рассматривалось

  • __MSG_key__ — это вариация Chrome на тему интернационализации приложений (i18n). Можно применять как в файле манифеста, так и в других файлах (даже CSS).
  • web_accessible_resources — массив путей ресурсов, которые будут впоследствии использоваться в контексте веб-страниц. Без указания в нём пути — ничего не получится использовать на страницах сайтов, если такое поведение предполагается.

Ресурсы расширения

Огромный плюс в карму Chrome — мы уже сейчас можем подключить расширение, конечно, если созданы все ресурсы, указанные в manifest.json.

Не думаю, что стоит заострять внимание на том, что содержится в файле commentblocker.css и commentblocker_on.css. Приведу лишь первый, в котором указаны все селекторы, в которых заключены комментарии:

@charset «utf-8»; .wall_module .reply_link_wrap .reply_link { visibility: hidden !important; } .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_your_comment, #pv_comments, #pv_comments_header, #pv_your_comment { display: none !important; visibility: hidden !important; } body:after { position: fixed; content: «__MSG_mode_enable__»; top: 5px; right: 5px; padding: 6px 12px; background-color: #ffc; border: 1px solid #ddd; z-index: 9999; }

В файле commentblocker_on.css, как не трудно догадаться, всё наоборот. Обратите внимание, что прямо в CSS я использую строку с языковом ключом content: «__MSG_mode_enable__». Самое время создать такой файл, где эти ключи будут храниться.

В корне нашего расширения создаём директорию _locales и вложенные в неё директории en и ru. Далее в файле messages.json описываем наши ключи.

{ «app_name»: { «message»: «VK Comment Blocker» }, «app_description»: { «message»: «Удобный способ скрыть комментарии в новостной ленте и группах.» }, «browser_action»: { «message»: «Переключить вид комментариев» }, «mode_enable»: { «message»: «Без комментариев!» }, «mode_disable»: { «message»: «С комментариями!» } }

Помимо поля message есть и другие поля, о которых можно узнать из документации.

Теперь создаём файлы background.html, для начала так:

<!doctype html> <html> <head> <title>Background</title> </head> <body> </body> </html>

Тут всё так, как в обычном HTML — ничего необычного. Кстати, файл background.html можно не создавать, так как он генерируется автоматически, на основе полей в manifest.json.

Запускаем расширение

Запустить расширение можно, не написав ни одной строчки JavaScript. Чтобы сделать это, нужно пройтись по меню:

  • Настройка и управление Google Chrome (Гамбургер)
  • Дополнительные инструменты
  • Расширения
  • Поставить галочку напротив «режим разработчика»
  • Загрузить распакованное расширение
  • Выбрать папку с расширением

Расширение загрузилось и показалось в меню. Да, да, это вот это вот «В».

Казалось бы, у только что созданного нами расширения ничего нет в голове (нет никакой логики), а все комментарии на страницах социальной сети на букву «В» теперь скрыты. Ответ кроется в manifest.json, где в поле «content_scripts»: {} мы указали на каких страницах (http://vk.com/* и https://vk.com/*) будет автоматически подключаться файл commentblocker.css, который и скрывает все комментарии. Советую подробнее почитать про mathes patterns. Он лишь с виду так прост, а под капотом чуть ли не сивый мерин, да с прибамбасами.

Вот так, не написав ни одной строчки кода, у нас уже получилось расширение, выполняющее основную возложенную на него задачу.

Оживляем расширение

Осталось выполнить второй пункт задачи, а именно реализовать возможность отображения комментариев. Вкратце, нам нужно запихнуть файл commentblocker_on.css, который отменит правила файла commentblocker.css. И тут к нам на помощь спешит наш всемогущий JavaScript.

Помните, что я говорил про background.html? Да, да, про то, что его можно не создавать. Давайте слегка изменим manifest.json:

… «background»: { «persistent»: false, «scripts»: }, …

Просто подключили JavaScript файл. Ничего особенного. Переходим к этому файлу.

Просто так запихнуть JS на страницу нельзя. И такая же проблема имеется не только со скриптами. Поэтому нам нужно воспользоваться специальной инъекцией executeScript.

Сначала нужно добавить обработчик события клика на иконку расширения:

chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(tab.id, { code: «(» + toggleComments.toString() + «)();» }); });

Где toggleComments — это функция, которая и будет производить инъекцию нашего CSS файла на страницу:

var toggleComments = function() { var extensionLink; (document.getElementById(«extension») == null) ? ( extensionLink = document.createElement(«link»), extensionLink.href = chrome.extension.getURL(«/styles/commentblocker_on.css»), extensionLink.id = «extension», extensionLink.type = «text/css», extensionLink.rel = «stylesheet», document.getElementsByTagName(«head»).appendChild(extensionLink) ) : (document.getElementsByTagName(«head»).removeChild(document.getElementById(«extension»))) };

Думаю, что слов о том, что этот кусок кода проверяет наличие подключения нашего CSS на странице и делает выводы о необходимости его подключения или отключения, будет достаточно.

Между прочим, доступно не так много событий, которые покрывают различный спектр потребностей. Например, есть такие события:

  • onCreated — создание вкладки.
  • onUpdated — обновление вкладки.
  • onRemoved — закрытие вкладки.

Стоит заметить, что событие onUpdated вызывается дважды:

  • Обновление страницы;
  • Полная загрузка страницы;

На StackOverflow советуют проверять статус страницы:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { if (changeInfo && changeInfo.status === ‘complete’) { … } });

Теперь при нажатии на иконку будет происходить подключение файла стилей, которые будут отображать комментарии, а повторный клик на иконку — вновь их скрывать.

Ссылки

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

  • Целый блог, посвящённый разработке расширений для Chrome.
  • Создание расширения для Chrome за пару часов.
  • Chrome Extensions Box. Стартовый набор для создания расширений Google Chrome.
  • Создание простого Chrome приложения.
  • Создание своих собственных расширений для браузера.
  • Делаем расширение для Google Chrome.
  • Пишем расширение под Google Chrome.

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

Ответ очень прост:

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

На самом деле, я не люблю углубляться в своих статьях из-за того, что их попросту будет не интересно читать. Моё дело показать, что можно сделать используя ту, или иную технологию, как это просто сделать и какие вообще есть причины рассматривать или изучать то, о чём шла речь в статье. Конечно, есть темы, которые мне очень интересны и я рассказываю о них намного больше, чем просто «обзорно».

Давайте же внесём свой вклад в развитие web

Здесь всё очень просто:

{ «manifest_version»: 2, «name»: «Tproger Launcher», «description»: «Запускатор представительств Tproger», «version»: «1.0.0», «icons»: {«128»: «icon_128.png»}, «browser_action»: { «default_icon»: «icon.png», «default_popup»: «popup.html» }, «permissions»: }

После того как мы описали наше расширение в файле manifest.json, можно благополучно переходить к следующему этапу, а именно к разметке.

Для начала давайте напишем базовый HTML-код:

<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>

Выше мы написали каркас для плагина, сейчас он полностью пуст и нужно указать название, ссылки на иконки и шрифт. Это можно сделать с помощью тега link, обратите внимание, он не закрывается:

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Tproger Media Quick Launcher</title> <!—ссылаемся на шрифты, используемые в документе—> <link href=»https://fonts.googleapis.com/css?family=Open+Sans» rel=»stylesheet» type=»text/css»> <!—здесь мы ссылаемся на стили, которые будем использовать в документе, а именно стиль иконок—> <link href=»https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css» rel=»stylesheet» integrity=»sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN» crossorigin=»anonymous»> </head> <body> </body> </html>

Не забывайте указывать кодировку, иначе не отобразятся кириллические буквы.

Перейдём ко второму блоку кода, а именно к тегу body и его содержимому.

Так как наше расширение — модальное окно, давайте соответствующим образом назовём контейнеры. Сначала добавим контейнер шапки расширения, в которой укажем ссылку к иконке, напишем название и добавим номер версии.

<!—объяснение тега—> <body> <!—контейнер, содержащий название, логотип и номер версии—> <div class=»modal-header»> <h1 class=»logo»> <img class=»logo-icon» src=»images/tproger-logo.png»> Запускатор Tproger <span class=»version»>(1.0.0)</span> </h1> </div> <!—Конец контейнера—>

Переходим к следующему контейнеру. Он содержит описание функций расширений.

<!—контейнер, содержащий описание функций расширения—> <div class=»modal-content»> <p>Быстрый доступ к контентным площадкам Типичного Программиста</p> </div> <!—Конец контейнера—>

Далее следует контейнер modal-icons, внутри которого ещё 5 контейнеров.

<!—контейнер, содержащий контейнеры с иконками—> <div class=»modal-icons»> <div class=»flex-container»> <div class=»flex»> <!—target=»_blank» — это служит для открытия новой вкладки при клике по иконке—> <a href=»#» target=»_blank»> <i class=»fa fa-globe»></i> </a> </div> <div class=»flex»> <a href=»#» target=»_blank»> <i class=»fa fa-telegram»></i> </a> </div> <div class=»flex»> <a href=»#» target=»_blank»> <i class=»fa fa-facebook»></i> </a> </div> <div class=»flex»> <a href=»#» target=»_blank»> <i class=»fa fa-vk»></i> </a> </div> </div> </div>

Для каждой иконки мы выделили отдельный контейнер с классом flex, чтобы знать, к каким элементам будем применять Flexbox.

Кроме того, мы указали названия иконок для каждого ресурса. Более детально со всеми доступными элементами можно ознакомиться на сайте Bootstrap.

Стили

Чтобы расширение выглядело красивее и было удобнее, чем сейчас, нужно добавить стили на CSS.

<style> /* Модальная структура документа */ /*общие настройки для всего документа*/ html, body { font-family: ‘Open Sans’, sans-serif; font-size: 14px; margin: 0; min-height: 180px; padding: 0; width: 380px; } /*задаём настройки для заголовков первого уровня*/ h1 { font-family: ‘Menlo’, monospace; font-size: 22px; font-weight: 400; margin: 0; color: #2f5876; } a:link, a:visited { color: #000000; outline: 0; text-decoration: none; } /*задаём ширину картинки*/ img { width: 30px; /*ширина изображений*/ } .modal-header { align-items: center; /*выравнивание элементов по центру*/ border-bottom: 0.5px solid #dadada; /*свойства нижней разделительной линии*/ height: 50px; } .modal-content { padding: 0 22px; /*отступы сверху и снизу, сверху и слева*/ } .modal-icons { border-top: 0.5px solid #dadada; /*свойства верхней разделительной линии*/ height: 50px; width: 100%; } .logo { padding: 16px; /*отступы со всех сторон*/ } .logo-icon { vertical-align: text-bottom; /*выравнивание по нижней части текста*/ margin-right: 12px; /*задётся отступ элементов от изображения*/ } .version { color: #444; font-size: 18px; }

Основные настройки документа заданы, давайте перейдём к следующему фрагменту кода, в котором как раз и будет применён Flexbox, о котором шла речь в начале статьи.

.flex-container { display: flex; /*отображает контейнер в виде блочного элемента*/ justify-content: space-between; /*равномерное выравнивание элементов*/ padding: 10px 22px; } /*задаём настройки для контейнеров с иконками*/ .flex { opacity: 1; /*параметр непрозрачности иконок*/ width: 120px; } .flex:hover { opacity: 0.4; /*уровень непрозрачности при наведении курсора на элемент*/ } .flex .fa { font-size: 40px; color: #2f5876; } </style> <!—конец объяснения блока со стилями—>

Мы постарались как можно подробнее объяснить в комментариях относительно сложные моменты. А сейчас нам нужно лишь загрузить наше расширение в браузер Chrome и оно будет работать, а если пройдёт модерацию, то появится в магазине расширений (плагинов).

Теперь давайте добавим файл с расширением .js, если вдруг потребуется расширить функции дополнения для браузера.

<head> <meta charset=»utf-8″> <title>Tproger Media Quick Launcher</title> <link href=»https://fonts.googleapis.com/css?family=Open+Sans» rel=»stylesheet» type=»text/css»> <link href=»https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css» rel=»stylesheet» integrity=»sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN» crossorigin=»anonymous»> <style type=»text/css»> /*здесь мы прописали стили*/ </style> <!—конец объяснения блока со стилями—> <!—здесь ссылаемся на файл .js в нашей папке с кодом и изображениями—> <script src=»popup.js»></script> </head>

Проверка кода и публикация

Прежде чем опубликовать, проверьте ещё раз весь код. Если вы делали всё так, как мы, то у должно было получиться следующее:

<!DOCTYPE html> <html> <!—Начало первого блока объяснения кода—> <head> <meta charset=»utf-8″> <title>Запускатор Tproger</title> <!—ссылаемся на шрифты, используемые в документе—> <link href=»https://fonts.googleapis.com/css?family=Open+Sans» rel=»stylesheet» type=»text/css»> <!—здесь мы ссылаемся на стили, которые будем использовать в документе, а именно стиль иконок—> <link href=»https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css» rel=»stylesheet» integrity=»sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN» crossorigin=»anonymous»> <!—начало блока со стилями для страницы—> <style> /* Модальная структура документа */ /*общие настройки для всего документа*/ html, body { font-family: ‘Open Sans’, sans-serif; font-size: 14px; margin: 0; min-height: 180px; padding: 0; width: 380px; } /*задаём настройки для заголовков первого уровня*/ h1 { font-family: ‘Menlo’, monospace; font-size: 22px; font-weight: 400; margin: 0; color: #2f5876; } a:link, a:visited { color: #000000; outline: 0; text-decoration: none; } /*задаём ширину картинки*/ img { width: 30px; /*ширина изображений*/ } .modal-header { align-items: center; /*выравнивание элементов по центру*/ border-bottom: 0.5px solid #dadada; /*свойства нижней разделительной линии*/ height: 50px; } .modal-content { padding: 0 22px; /*отступы сверху и снизу, сверху и слева*/ } .modal-icons { border-top: 0.5px solid #dadada; /*свойства верхней разделительной линии*/ height: 50px; width: 100%; } .logo { padding: 16px; /*отступы со всех сторон*/ } .logo-icon { vertical-align: text-bottom; /*выравнивание по нижней части текста*/ margin-right: 12px; /*задётся отступ элементов от изображения*/ } .version { color: #444; font-size: 18px; } .flex-container { display: flex; /*отображает контейнер в виде блочного элемента*/ justify-content: space-between; /*равномерное выравнивание элементов*/ padding: 10px 22px; } /*задаём настройки для контейнеров с иконками*/ .flex { opacity: 1; /*параметр непрозрачности иконок*/ width: 120px; } .flex:hover { opacity: 0.4; /*уровень непрозрачности при наведении курсора на элемент*/ } .flex .fa { font-size: 40px; color: #2f5876; } </style> <!—конец объяснения блока со стилями—> <script src=»popup.js»></script> </head> <!—объяснение тега <body>—> <body> <!—контейнер, содержащий название, логотип и номер версии—> <div class=»modal-header»> <h1 class=»logo»> <img class=»logo-icon» src=»images/tproger-logo.ico»>Запускатор Tproger <span class=»version»>(1.0.0)</span> </h1> </div> <!—Конец контейнера—> <!—контейнер, содержащий описание функций расширения—> <div class=»modal-content»> <p>Быстрый доступ к контентным площадкам Типичного Программиста</p> </div> <!—Конец контейнера—> <!—контейнер, содержащий контейнеры с иконками—> <div class=»modal-icons»> <div class=»flex-container»> <div class=»flex»> <!—target=»_blank» — это служит для открытия новой влкадки при клике по иконке—> <a href=»#» target=»_blank»> <i class=»fa fa-globe»></i> </a> </div> <div class=»flex»> <a href=»#» target=»_blank»> <i class=»fa fa-telegram»></i> </a> </div> <div class=»flex»> <a href=»#» target=»_blank»> <i class=»fa fa-vk»></i> </a> </div> <div class=»flex»> <a href=»#» target=»_blank»> <i class=»fa fa-facebook»></i> </a> </div> </div> </div> </body> </html>

После проверки можно приступать к публикации расширения. Для этого у вас должны быть следующие файлы и папки:

И далее следуем инструкциям на скриншотах ниже.

Для загрузки расширения в магазин нам нужно зайти в меню, навести мышку на «дополнительные настройки», а затем выбрать «расширения» или ввести в адресной строке chrome://extensions/.

Далее нажимаем на «загрузить распакованное расширение» и выбираем папку с файлами.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *