Как сделать плагин для браузера

Как сделать плагин для браузера

  • Статьи, 29 марта 2018 в 10:43
  • Евгений Туренко

Основано на видео с канала «Traversy Media»

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

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

В каждом расширении для Chrome должен быть файл manifest.json . Он служит только для описания функций приложения, общего описания, номера версии и разрешений. Более подробно вы сможете ознакомиться с этим файлом в блоге команды разработчиков Chrome.

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

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

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

21 марта в 10:00, Воронеж, беcплатно

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

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

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

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

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

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

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

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

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

Стили

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

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

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

Читайте также:  Зте блейд 5 плюс

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

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

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

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

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

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

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

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

Написание простого расширения для браузера Chrome

Из архивов сайта developerWorks

Дата архивации: 25.02.2019 | Впервые опубликовано: 13.03.2013

У каждого браузера свои сторонники и противники ― и свои преимущества и недостатки. Связывает их то, что люди проводят в браузерах все больше и больше времени. В этом цикле статей показано, как самостоятельно написать расширение для браузеров Chrome, Firefox, Internet Explorer и Safari. Читателю предлагается построить одно и то же простое расширение для каждого браузера, чтобы он смог почувствовать, во что это выливается, насколько трудно или легко решить те или иные типичные задачи и что нужно для распространения своего расширения. Эта статья посвящена расширению для браузера Chrome.

Этот контент больше не обновляется и не поддерживается. Полный текст статьи предоставляется "как есть" в формате PDF. Учитывая стремительное развитие технологий, некоторые шаги и иллюстрации могут быть изменены.

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

Но хотели бы вы создать свое собственное расширение Chrome? Задумывались ли вы, насколько трудоемкий этот процесс и что для этого нужно? Что ж, оказывается, это супер просто, возможно даже проще, чем вы представляли.

В этом уроке я собираюсь показать, как создать базовое расширение для Chrome, затратив на это около 5 минут — без шуток!

Что мы собираемся разрабатывать

Я одержим заботой о скорости моего сайта, http://simpleprogrammer.com , так что я часто использую такие сайты как GTmetrix , чтобы проверить скорость сайта.

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

Было бы неплохо иметь расширение для Chrome, которое позволяло бы, используя GTmetrix, проверить скорость сайта, который вы в данный момент просматриваете, просто нажав кнопку?

Читайте также:  Жесткие диски нового поколения

Я проверил Chrome Web Store и не нашел подобного расширения, так что именно это мы и реализуем.

Что такое расширение для Google Chrome

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

На самом базовом уровне расширение Chrome — это набор HTML, CSS и JavaScript-файлов, позволяющий добавить некоторую функциональность в Chrome через JavaScript API, который предоставляет браузер. По сути, расширение — это веб-страница в Chrome, имеющая доступ к некоторым дополнительным API.

В этом уроке я собираюсь показать вам, как создать базовое расширение Chrome, которое называют Browser Action. Этот вид расширения добавляет в панель инструментов Chrome кнопку, нажатие на которую показывает HTML-страницу. Также такие расширения позволяют выполнять какой-либо JavaScript-код.

Расширения Chrome также могут работать только на определенных страницах, выполняться в фоне или модифицировать содержание страницы. Но в этом уроке мы рассмотрим самый простой вариант.

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

Шаг 1: Создание проекта

Первое, что мы должны сделать, это создать проект и все файлы, которые нужны для нашего расширения. Давайте начнем с создания нового каталога, который мы назовем «GTmetrix Extension». В этот каталог мы поместим все файлы, которые нужны для расширения. Chrome позволяет загрузить плагин, указав директорию, содержащую файлы с расширением.

Все расширения Chrome требуют наличия файла манифеста. Файл манифеста сообщает браузеру все, что нужно для загрузки расширения. Создадим файл manifest.json в директории проекта. Оставим пока его пустым.

Далее нам потребуется иконка для нашего расширения. Это должен быть PNG-файл 19×19px. Можно взять пример иконки .

Далее создадим HTML-страницу, которая будет отображаться при нажатии на иконку. ДЛя этого добавим файлы popup.html и popup.js в директорию проекта «GTmetrix Extension».

Из-за ограничений безопасности, мы не можем использовать в расширении JavaScript-код, встроенный в HTML, поэтому мы будем ссылаться на внешний файл.

Шаг 2: Создание файла манифеста

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

Откройте файл manifest.json и добавьте в него следующий код:

Большинство полей в этом JSON-файле не требуют дополнительного объяснения, поэтому я не буду тратить на это время, обратите внимание на раздел browser_action, где мы определяем, какая иконка будет использоваться и какая HTML-страница должна отображаться при нажатии на кнопку.

Вы также, наверное, заметили, что я добавил раздел permissions, который определяет, что расширение имеет доступ к текущей вкладке. Это необходимо для того, чтобы мы могли получить URL в текущей вкладки и перейти к GTmetrix.

Читайте также:  Как в интернет банкинге беларусбанка оплатить интернет

Шаг 3: Создание интерфейса

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

Наш интерфейс будет очень простым, содержащим заголовок «GTmetrix Analyzer» и кнопку, по которой пользователь сможет проанализировать текущую страницу.

Откройте popup.html и добавьте следующий код:

В HTML-файле мы подключаем скрипт popup.js. В этом скрипте будет реализована логика нашего расширения, которая будет выполняться при нажатии на кнопку с id checkPage.

Шаг 4: Реализация логики

Последняя вещь, которую нам необходимо будет сделать, это реализация логики, которая должна выполняться при нажатии на кнопку «Check this page now!».

Нам нужно добавить обработчик события click для кнопки checkPage. При нажатии на эту кнопку будет создаваться новая форма, содержащая URL текущей страницы, и отправляться в GTmetrix.

Откройте popup.js и добавьте следующий код:

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

Как вы можете видеть в коде выше, сначала мы регистрируем обработчик события click для кнопки checkPage. Далее, когда кнопка нажата, мы получаем URL текущей вкладки, создаем форму со скрытым полем и отправляем ее GTmetrix. URL текущей страницы используется для того, чтобы указать, какую именно страницу мы хотим анализировать.

Тестирование

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

На этой странице включите галочку «Developer mode», чтобы разрешить загрузку расширений из исходников. И далее нажмите кнопку «Load unpacked extension» или просто перетащите директорию с расширением на эту страницу. Вы должны увидеть, что новая иконка добавилась в панель инструментов браузера.

Чтобы проверить расширение, откройте страницу, которую вы хотите проанализировать в GTmetrix. Нажмите на иконку расширения в панели инструментов, далее нажмите на кнопку «Chech this page now!». Вы должны увидеть результат анализа на текущей вкладке.

И это все! Если у вас есть какие-либо проблемы или вопросы, не стесняйтесь задавать. Я надеюсь, что такого введения в создание расширений для Chrome достаточно, чтобы вы начали разрабатывать собственные расширения.

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2018

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

Ссылка на основную публикацию
Как связаться с инстаграм по телефону
В этой статье расскажем о том, как работает горячая линия линия Инстаграмм, можно ли обратиться по телефону или доступен только...
Как разблокировать телефон samsung galaxy j1 mini
Характеристики Samsung Galaxy J1 mini Отзывы о Samsung Galaxy J1 mini Инструкция Samsung Galaxy J1 mini Прошивка Samsung Galaxy J1...
Как разблокировать флешку от защиты записи
Извиняюсь за заголовок, но именно так задают вопрос, когда при действиях с USB флешкой или SD картой памяти Windows сообщает...
Как связаться с инстаграмом
В этой статье расскажем о том, как работает горячая линия линия Инстаграмм, можно ли обратиться по телефону или доступен только...
Adblock detector