Как сделать расширение для Google Chrome?

Как сделать расширение для Google Chrome и добавить его в каталог Гугла

Сегодня мы с вами, уважаемые читатели, сделаем расширение для браузера Гугл Хром и разместим его в каталоге приложений Chrome.

Зачем? Хромом по разной статистике пользуется до 33% пользователей сети. Представляете какой это трафик? При этом доступ ко всей этой аудитории стоит всего 5$.

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

Создаем папку, куда будем размещать наше творение, создадим несколько файлов. Внимание: все текстовые файлы должны быть в кодировке UTF-8.

manifest.json

popup.html

Файл в html формате — любой контент. В нашем случае я добавил в айфрейме страницу https://adne.info/f/:

И файл — пиктограмма — картинка для расширения icon.png. Взял подходящую картинку и сделал её размерами 128×128, сохранил в формате png.

Все наше расширение готово. Пакуем в zip архив.

Протестируем? Откроем хром, в адресной строке впишем: chrome://settings/extensions , поставим галочку напротив Режим разработчика, появится кнопка Загрузить распакованное приложение.

Добавим наше приложение. Как видите появилась иконка, нажав на которую откроется окошко с указанной выше страницей. Вы можете попробовать созданное приложени напрямую с Гугла, просто перейдите по ссылке и установите: https://goo.gl/F3WTG6

Теперь давайте поместим наше расширение в каталог приложений для Хрома: это упростит апдейты и позволит выложить ваше творение для огромной аудитории пользователей Хрома.

Заархивируем три созданных ранее файла в zip архив. Полагаю аккаунт в Гугле у вас есть, идем сюда https://chrome.google.com/webstore/developer/dashboard

Если вы тут впервые, то может потребуется согласиться со всяческими условиями пользования и т.д. Уверен, это простая процедура и внимания не требует. Итак, мы в Панели инструментов разработчика. Жмём кнопку Добавить новый продукт. На первом шаге заливаем архив с расширением. Далее заполняем анкету.

Вам понадобится ещё минимум 2 графических файла — скриншот и рекламная картинка. Все пояснения даны около соответствующих полей. Надо сказать что Гугл постарался над формой добавления расширений, даже неопытный пользователь разберется очень быстро.

• При добавлении первого приложения гугл потребует от вас платы в 5$ за услуги. Оплатить можно с карты, у меня это заняло не более 3-х минут. Платить надо один раз, потом со своего ака добавляйте приложения без дополнительной платы.
• Если будете апдейтить приложение, то в файле manifest.json обязательно исправьте версию, иначе изменения не будут приняты.
• Если приложение публикуется для тестирование, то для полноценного запуска его придётся добавлять снова.

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

1. Вхождение кея в заголовок или описание (но это не решающий фактор),
2. Количество установок, отзывов и, видимо, средний бал и кол-во оценок.

Как вы понимаете, можно делать огромное количество различных расширений и получать с них трафик. Verbum sat sapienti.

adne.info

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

Одна из моих любимых вещей в браузере 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

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

getinstance.info

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

tproger.ru

Как создать и опубликовать расширение Chrome за 20 минут

В этой статье Джейк Принс объясняет, что расширение для Chrome – это совсем не страшно и самое простое можно сделать буквально за несколько минут.

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

Что такое расширение Chrome?

Расширения Chrome позволяют добавлять функциональные возможности в веб-браузер Chrome без глубокого погружения в нативный код. Это потрясающе, потому что вы можете создавать новые расширения для Chrome на основе технологий, с которыми хорошо знакомы веб-разработчики: HTML, CSS и JavaScript. Если вы когда-либо создавали веб-страницу, то сможете и создать расширение — быстрее, чем пообедаете. Единственное, что вам нужно узнать – это как добавить некоторые функции в Chrome с помощью JavaScript API, которые предоставляет Chrome.

Что вы хотите создать?

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

Некоторое время назад я использовал расширение Unsplash – оно показывало хорошие фоновые изображения на открываемой по умолчанию пустой вкладке. Позже я заменил его расширением Muzli, которое превращает вкладку по умолчанию в ленту материалов о дизайне и новостей со всего Интернета.

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

Шаг первый: настройка

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

Для расширения нам нужно иметь разрешение на управление activeTab, поэтому наш файл manifest.json выглядит примерно так:

Как вы можете видеть, мы указываем, что newtab.html будет HTML-файлом, который должен отображаться каждый раз, когда открывается новая вкладка. Для этого нам нужно иметь разрешение на управление activeTab, поэтому, когда пользователь пытается установить расширение, они будут предупреждены обо всех разрешениях, которые необходимы расширению.

Еще одна интересная вещь внутри manifest.json – это действия браузера. В этом примере мы используем его, чтобы установить заголовок, но вообще есть больше параметров. Например, чтобы показывать всплывающее окно, когда вы нажимаете значок приложения внутри адресной строки, все, что вам нужно сделать, это что-то вроде этого:

Теперь popup.html будет отображаться внутри всплывающего окна, которое создается в ответ на щелчок пользователя на действии браузера. Это стандартный HTML-файл, поэтому он дает вам свободу действий над тем, что отображает всплывающее окно. Просто поместите часть своей магии в файл с именем popup.html.

Шаг второй: проверьте, работает ли оно

Следующий шаг – создать файл newtab.html и поместить в «Hello world»:

Чтобы проверить, работает ли он, посетите chrome://extensions в вашем браузере и убедитесь, что флажок «Режим разработчика» установлен в верхнем правом углу.

Нажмите Load unpacked extension и выберите каталог, в котором живут ваши файлы расширений. Если расширение действует, оно будет активным сразу, чтобы вы могли открыть новую вкладку и увидеть свой «Hello world».

Шаг третий: сделайте приятный дизайн

Теперь, когда у нас появилась наша первая функция, пришло время сделать ее красивой. Мы можем просто создать новую вкладку, создав файл main.css в нашем каталоге расширений и загрузив его в наш файл newtab.html. То же самое происходит с включением файла JavaScript для любых активных функций, которые вы хотели бы использовать. Предполагаю, что вы создавали веб-страницы раньше, и теперь вы можете использовать свои навыки, чтобы показать своим пользователям все, что захотите.

Окончание плана

Все, что мне понадобилось для завершения расширения – это HTML, CSS и JavaScript, поэтому я не думаю, что важно глубоко погрузиться в код, поэтому я расскажу об этом быстро.

Вот что я сделал:

Для моей идеи мне нужны были хорошие фоновые изображения, поэтому в файле JavaScript я использовал TMDb API для получения списка популярных фильмов, взял их фоновые изображения и поместил их в массив. Всякий раз, когда страница загружает его, он случайным образом выбирает одно изображение из этого массива и задает его как фон страницы. Чтобы сделать эту страницу более интересной, я также добавил текущую дату в верхнем правом углу. И для получения дополнительной информации, он позволяет пользователям кликнуть на фон, который приводит к посещению страницы IMDb фильма.

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

Теперь с этим маленьким файлом manifest.json и некоторыми HTML, CSS и JavaScript, каждая новая вкладка, которую вы открываете, выглядит намного интереснее:

Шаг 4. Публикация расширения

Когда ваше первое расширение Chrome выглядит красиво и работает так, как должно, пришло время опубликовать его в магазине Chrome. Просто перейдите по этой ссылке, чтобы перейти на панель инструментов Chrome Web Store (вам будет предложено войти в свою учетную запись Google, если это не так). Затем нажмите кнопку «Add new item», примите условия, и вы перейдете на страницу, где вы можете загрузить расширение. Теперь сжимаем папку, содержащую ваш проект, и загружаем этот ZIP-файл.

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

Убедитесь, что вы предоставили несколько хороших изображений, чтобы показать свой проект. Магазин может использовать эти изображения для продвижения вашего новаторского проекта. Чем больше изображений вы предоставите, тем более заметным будет ваше расширение. Вы можете просмотреть, как ваше расширение показывается в веб-магазине, нажав кнопку «Предварительный просмотр». Когда вы довольны результатом, нажмите «Опубликовать изменения». Готово!

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

Осталось только получить пользователей!

Веб-разработчику очень легко создать расширение Chrome. Все, что вам нужно, это HTML, CSS, JavaScript и базовые знания о том, как добавить функциональность с помощью некоторых JavaScript API, которые предоставляет Chrome. Ваше первое расширение может быть опубликовано в Интернет-магазине Chrome всего за 20 минут. Создание нового, стоящего и красивого расширения займет, конечно, немного больше времени. Но все зависит от вас!

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

apptractor.ru

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

Расширения для браузеров давно стали помощниками почти каждого пользователя.

Узнавайте первыми!

Подпишитесь на нашу рассылку и получайте последние новости первыми

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

Стоит сказать пару слов о том, что же все-таки такое расширение для браузера. На самом деле, расширение — это обычное веб-приложение. Главное, что нужно для того, чтобы веб-приложение работало как расширение — это manifest.json файл. В нем мы описываем специфику работы расширения и некоторые его настройки. Для написания приложения мы будем использовать чистые HTML и JavaScript, однако ничто не мешает вам использовать для создания расширений веб-фреймоврки, такие как React или Angular.

Что ж, приступим. Первым делом опишем наше расширение в файле manifest.json:

Файл содержит несколько стандартных настроек, таких как версия манифеста, имя, версия расширения и описание. Подробнее стоит остановиться на свойствах content_scripts и browser_action.

Content Scripts — JS-файлы, которые запускаются в контексте открытой страницы. Эти скрипты могут могут получать данные страницы и модифицировать их. Мы используем всего один контентный скрипт. В поле matches объекта его описания мы указываем, в контексте каких страниц может работать наш скрипт. Существует свойство, обратное matches — exclude_matches, которое будет выполнять скрипт на всех страницах, кроме указанных. Далее мы вводим в нашу страницу скрипты и стили, которые мы добавим позже, — за это отвечают свойства JS и CSS. Свойство content_sctipts включает в себя еще некоторое количество настроек, с которыми вы можете ознакомиться в официальной документации — https://developer.chrome.com/extensions/content_scripts.

Следующее свойство, которое мы разберем — browser_action. Это свойство помогает нам выставить иконки, подсказки, значки. В нашем расширении мы не будем использовать никаких интерфейсов, однако если вы захотите добавить окошко для взаимодействия с пользователем, которое будет появляться при нажатии на иконку, вы должны будете сделать это в свойстве browser_actions. Для этого просто необходимо будет указать HTML-файл, который мы хотим использовать.

В нашем приложении мы будем заменять все вхождения ’S Media Link’ на официальных сайтах компании на тег #ILOVESML на розовом фоне. Для этого добавим дополнительный css-класс в файле index.css:

Мы добавляем !important к нашим стилям, чтобы сделать их приоритетными.

Теперь реализуем логику замены вхождений на странице:

Логика довольно-таки проста: мы получаем тело документа и проходимся по всем его элементам. Для каждого из них мы получаем внутренний HTML и разбиваем его по символам на токены. Далее мы проходим по токенам и проверяем, является ли токен текстом, после чего заменяем в нем S Media Link на тег span с добавленным нами классом и текстом #ILOVESML. В конце мы снова объединяем наши токены в строку.

Посмотрим, как это работает!

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

Теперь проверим расширение на блоге компании на Spark:

А здесь все вхождения S Media Link остались прежними, потому этот сайт не входит в список указанных нами адресов.

ru.smedialink.com