Как создать расширение для Chrome

У вас в браузере наверняка есть хотя бы одно расширение. Если вам интересно узнать, как они делаются, читайте наш материал по написанию самого простого плагина для Google Chrome.

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

В этой статье мы рассмотрим создание самого простого расширения — запускатора избранных сайтов. Хотя приложение и будет примитивным, оно всё-таки раскроет процесс создания и загрузки расширения для google Chrome.

Желательно знать HTML, CSS и JS (если придётся расширить набор функций) на самом базовом уровне, чтобы понимать материал лучше, но в любом случае мы будем объяснять код.

В каждом расширении для Chrome должен быть файл manifest.json. Он служит только для описания функций приложения, общего описания, номера версии и разрешений. Более подробно вы сможете ознакомиться с этим файлом в блоге команды разработчиков 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": ["activeTab"]
}

После того как мы описали наше расширение в файле 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/.

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

После того, как вы выбрали папку с файлами, она загрузится в браузер и превратится в расширение, которое будет доступно за пределами правой части адресной строки.

Надеемся, что всё работает правильно и вы понимаете структуру расширений для Chrome.

109К открытий110К показов

Также рекомендуем

Типичные ошибки junior-разработчиков. Вы можете быть одним из них

Узнали у middle и senior программистов, какие ошибки чаще всего совершают джуны. Также попросили рассказать, как этих ошибок можно избежать.

Producing High-Tech Content for Brands: Hints for Beginners

Gathered five tips that will help in producing high tech content. We talked about why gamification is necessary and how AI and VR help.

Как стать топ-100 на Kaggle и топовым Data Scientist, за которым охотятся работодатели

Адель Валиуллин делится опытом участия в соревнованиях и рассказывает, как занять высокое место в рейтинге Kaggle.

Нейросети для рисования, если очень хочется красиво

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