Как написать расширение для chrome

Создаём расширения для Google Chrome

Можно не только устанавливать готовые расширения для браузера Chrome, но и создавать собственные.

Список установленных расширений можно увидеть по адресу chrome://extensions/. Если вы забудете адрес, то можно открыть эту страницу через меню More tools | Extensions (в англ. версии).

Домашняя страница для подписанных расширений — https://chrome.google.com/webstore/category/extensions

При создании расширения используются технологии HTML, CSS, JavaScript, а также иногда JSON.

Создание первого расширения

На основе книги Introduction to Google Chrome Extensions.

Создадим первое собственное расширение ShowTime, которое добавит кнопку (Browser-Action button) на панель браузера. При щелчке откроется всплывающее окно, в котором будет отображаться текущее время и дата.

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

Для первого примера понадобятся файлы popup.html, popup_script.js, icon.png (несколько версий), manifest.json.

Внутри файла manifest.json размещаются обязательные и необязательные параметры.

К числу обязательных относятся параметры manifest_version, name, version.

Параметр manifest_version указывает на версию манифеста и должно содержать целочисленное значение больше 0. На данный момент актуальной считается версия 2. Параметр name указывает на имя расширения в виде строки. К параметру name можно добавить дополнительный атрибут description для описания расширения. Параметр version указывает на версию расширения в виде строки, которая должна содержать число.

Если мы хотим добавить кнопку на панель браузера, то в манифесте следует прописать данное поведение. Кнопка имеет название Browser-Action и в манифесте прописывается как browser_action с необходимыми атрибутами.

Пропишем данные в манифесте.

 < "manifest_version" : 2, "name" : "ShowTime", "description" : "Extension to show the current time and date", "version" : "1.2", "browser_action" : < "default_title" : "ShowTime", // в т.ч. подсказка при наведении мыши "default_icon" : "icon.png", // значок на панели "default_popup" : "popup.html" >, "icons" : < "16" : "icon16.png", //Used as the favicon for an extension's pages "48" : "icon48.png", //Used on the extension management page "128" : "icon128.png" //Used during installation & in the Chrome Web Store >>

С манифестом разобрались. Теперь можно написать код для расширения. Для этого используется стандартный JavaScript. Откроем файл popup_script.js и добавим код.

 //region var timeId = "time"; var dateId = "date"; var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct","Nov", "Dec"]; var consoleGreeting = "Hello World! - from popup_script.js"; function setTimeAndDate(timeElement,dateElement) < var date = new Date(); var minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes(); var time = date.getHours() + ":" + minutes; //In "date.getMonth", 0 indicates the first month of the year //In "date.getDay", 0 represents Sunday var date = days[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate() + " " + date.getFullYear(); timeElement.innerHTML = time; dateElement.innerHTML = date; >//end-region //region console.log(consoleGreeting); document.addEventListener("DOMContentLoaded",function(dcle) < var timeElement = document.getElementById(timeId); var dateElement = document.getElementById(dateId); setTimeAndDate(timeElement,dateElement); >); //end-region

Теперь создадим страницу popup.html.

     ShowTime (Custom) // Inline scripts are not allowed alert('Hello World'); -->  body < padding:0px; margin:0px; width:300px; height:200px; >div < height:100%; width:100%; display:table; font-family:"Tahoma","Verdana"; font-size:15px; font-weight:bold; text-shadow:0px 0px 1px #000000; background-color:#555; color:#fff; >h1,h2 < display:table-row; vertical-align:middle; text-align:center; >h2 < background-color:#777; >.unselectable Путь к скрипту всегда должен быть относительным. Можно создать несколько js-файлов, если скрипты сложные и требуется разделение по логике поведения. CSS-свойства также можно вынести в отдельный файл.

Приготовления закончены. Можно загрузить расширение в браузер и протестировать его. Откройте страницу chrome://extensions и включите режим разработчика Developer mode. В этом режиме будут доступны кнопки LOAD UNPACKED, PACK EXTENSION, UPDATE.

Щёлкните по кнопке LOAD UNPACKED и загрузите своё первое расширение. Оно появится в списке расширений, а также появится значок на панели. Щёлкните по значку, чтобы увидеть работу расширения в действии.

Вы можете использовать DevTools для отладки и тестирования как для обычных страниц и скриптов. Один из примеров для вывода в лог специфичных функций расширений (режим Инкогнито).

 chrome.extension.isAllowedIncognitoAccess(function(isAllowed) < console.log(isAllowed); >);

Распространение расширения

Можно разместить своё расширение в специальном магазине расширений. Для этого заходим на страницу https://chrome.google.com/webstore/developer/dashboard. При первом заходе вам будет предложено войти в свою учётную запись и оплатить регистрацию (5$). После оплаты вам будет доступен весь функционал. Вам нужно будет упаковать свою папку в zip-файл и загрузить его на сервер. В успешном случае вы подтверждаете публикацию и ваше расширение будет доступно в магазине.

Компоненты расширений

В первом примере мы познакомились с компонентом Browser-Action. Доступны и другие компоненты.

Browser-Action
Page-Action
Shortcut-Key
Context-Menu-Item
Omnibox-Input
Content-UI
Popup (доступен из Browser-Action и Page-Action)

Также доступны скриптовые компоненты со своими областями видимости.

Event scripts (Background scripts)
Popup scripts
Content scripts

Как создать расширение для 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": , "browser_action": < "default_icon": "icon.png", "default_popup": "popup.html" >, "permissions": ["activeTab"] >

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

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

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

    Tproger Media Quick Launcher

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

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

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

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

 Быстрый доступ к контентным площадкам Типичного Программиста

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

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

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

Стили

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

 /* Модальная структура документа */ /*общие настройки для всего документа*/ 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

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

.flex-container < display: flex; /*отображает контейнер в виде блочного элемента*/ justify-content: space-between; /*равномерное выравнивание элементов*/ padding: 10px 22px; >/*задаём настройки для контейнеров с иконками*/ .flex < opacity: 1; /*параметр непрозрачности иконок*/ width: 120px; >.flex:hover < opacity: 0.4; /*уровень непрозрачности при наведении курсора на элемент*/ >.flex .fa

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

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

  Tproger Media Quick Launcher

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

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

     Запускатор Tproger      /* Модальная структура документа */ /*общие настройки для всего документа*/ 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 -->   
  Быстрый доступ к контентным площадкам Типичного Программиста