Урок №3 — Создаем простейшее расширение с Browser Actions. Расширение хром создать

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

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

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

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

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

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

План

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

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

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

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

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

{ “manifest_version”: 2, “name”: “RaterFox”, “description”: “The most popular movies and TV shows in your default tab. Includes ratings, summaries and the ability to watch trailers.”, “version”: “1”, “author”: “Jake Prins”, "browser_action": { "default_icon": "tab-icon.png", “default_title”: “Have a good day” }, “chrome_url_overrides” : { “newtab”: “newtab.html” }, “permissions”: [“activeTab”] }

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

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

“browser_action”: { “default_popup”: “popup.html”, },

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

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

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

<!doctype html> <html> <head> <title>Test</title> </head> <body> <h2>Hello World!</h2> </body> </html>

Чтобы проверить, работает ли он, посетите 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 — вероятно, она сможет вам помочь.

Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected].

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. В конце мы снова объединяем наши токены в строку.

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

https://ru.smedialink.com:

https://smedialink.com:

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

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

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

В этой статье мы создали расширение с минимальным функционалом, однако расширения способны на гораздо более сложные вещи. Если вас заинтересовала эта тема, советую ознакомиться с документацией – https://developer.chrome.com/extensions.

ru.smedialink.com

Пишем расширение для Chrome на примере "Hello World!"

Хотели создать расширение для Chrome, но не нашли никакой документации?В данной статье мы рассмотрим создание расширения для Chrome на примере "Hello world".

Для начала мы должны определится с тем, что наше расширение будет выполнять

От расширения "Hello world" требуется следующее

Рядом со строкой Поиска\Адреса появится иконка при нажатии на которую будет выводится всплывающее меню
Страница с настройками в фоне

Мы уже определились с функционалом расширения и теперь можно преступить

Для начала нужно будет создать папку, где будут находится файлы нашего расширения

Назовем ее например "HelloWorld"

И в ней файл "manifest.json"

"manifest.json" это файл в котором будет "описано" наше расширение а так же будут заданы некоторые параметры

И так содержимое этого файла с комментариями:

{ "name" : "Hello world!", // Название Расширения "version" : "0.1", // Версия Расширения "description" : "Первое расширение", // Описание расширения "browser_action" : { "default_title" : "Hello world", "default_icon" : "img/icon.png", // Путь до иконки которая будет отображаться рядом со строкой Адреса "default_popup" : "popup.html" // Путь для контента, который будет отображаться при "Клике" по Иконке }, "background_page": "background.html", // Страница, контент которой будет выполнятся фоновно "options_page": "options.html" // Страница настроек }

Как вы ведите адрес до файлов отсчитывается от корневого каталога

Сначала найдем иконку для приложения

Мне по душе пришлась вот такая:

Скачать: http://yadisk.cc/d/dbX0M4krPmB

Перемещаем иконку в папку img и даем ей имя icon

Теперь в папке с расширением создаем файлы "popup.html" , "background.html", "options.html" (как вы уже наверно догадались расширение пишется на HTML, JS (тесть все что может входить в обычную html страницу))

Содержимое "popup.html" :

Содержимое "background.html" :

Содержимое "options.html" :

Ну вот уже и готово наше расширение

Установить его можно в "Настройки" =>"Расширения"=>"Загрузить Распакованное расширение..." и указать путь к нашей папке "Helloworld"

При запуске расширения у нас выполнится код из "background.html" а у нас там вывод 1-го сообщения

(то есть при запуске браузера запускаются расширения и мы будем при каждом запуске наблюдать вывод сообщения)

Если мы кликнем по иконке нашего расширения то мы увидим всплывающее меню в котором будет код из "popup.html"

А если по иконке расширения ПКМ ( правой кнопкой мыши ) и нажмем на пункт "Настройки", то мы попадем на страницу, в которой будет код из "options.html"

Так-же можно "скомпилировать" расширение в один файл

Перейдем в Chrome "Настройки" => "Расширения" => "Упаковка расширений..."

Укажите путь до папки с расширением и на выходе вы получите 2 файла:

*.crx - само расширение
*.pem - файл закрытого ключа (если предположим вы создали расширение и хотите его потом развивать, но чтобы Chrome видел вашу новую версию расширения как "обновленную" при последующей упаковке расширения нужно будет указывать этот-же файл закрытого ключа)

Ну, вот и все :)!

Желаю удачных вам разработок!

Скачать Hello world!: http://yadisk.cc/d/GI3w85nwPs1

(в комментариях к статье, можно задать свои вопросы)

lookdevices.ru

Урок №3 - Создаем простейшее расширение с Browser Actions

Продолжаем цикл наших статей "Школа", посвященных созданию расширений и приложений для браузера Google Chrome. И сегодня мы попробуем создать простейшее расширение "Hello, World!" с применением всего одного единственного Chrome API - Browser Actions. Кстати, очень приятно, что к нашему циклу статей присоединился разработчик Вадим, который набросал для этого урока пример расширения и полностью подготовил Урок №4.

Прежде всего, рекомендуем использовать при создании расширения не обычный блокнот, а более функциональный текстовый редактор. Рекомендуем Notepad++. И все ваши файлы вести в одной и той же текстовой кодировке. Настоятельно рекомендуем выбирать UTF-8 (без BOM). Для этого либо в уже созданном документе через меню "Кодировки" выбираем преобразование в нужный формат. Либо перед созданием документа выбираем "Опции" - "Настройки" - "Новый документ" и указываем правильную кодировку.

А теперь приступаем к созданию расширения. Создаем папку специально под новый проект. Назовем ее как угодно. Все наши файлы будут создаваться и находиться в ней.

С чего начинаем создавать расширение, и что является фундаментом любого дополнения для Google Chrome? Это manifest.json. Просто создайте текстовый файл и переименуйте его в manifest.json (кстати, мы ведь все приличные люди и не используем скрытие расширений для зарегистрированных типов файлов, иначе может возникнуть файл manifest.json.txt, что смотрится глупо и не будет работать в дальнейшем). Открываем созданный манифест и пишем в него...

{ "name": "Расширение Привет, Мир!", "description": "Моё первое расширение.", "version": "1.0", "icons": { "128": "128.png", "48": "48.png", "16": "16.png" } }

Это та базовая часть, что рекомендуется в каждом manifest.json. Что мы написали? Прежде всего указали имя (name) нашего расширения. Оно будет использоваться теперь везде: в каталоге, в списке расширений браузера и т.п. Описание расширения (description) не обязательно, но крайне желательно! Используется и в каталоге и в браузере и в целом помогает пользователям сформировать первое представление о том, что делает ваша разработка. Номер текущей версии вашего расширения (version). Без него никуда. Выпускаете обновление - меняете номер версии на больший. Как менять номера решать только вам: 2.0 или 1.1 или 1.0.0.1. Как угодно. Также указываем комплект иконок, которые будут использоваться. Рекомендовано использовать размеры 128, 48 и 16. Так как это показано у нас.

Мы указали в манифесте иконки? Значит теперь нам надо их поместить в папку нашего расширения. И назвать так, как мы и описали. Кстати, опять же по документации рекомендуется использовать тип PNG хотя поддерживаются и другие. Сами картинки в нашем уроке выбирайте какие хотите. Они и будут представлять вашу разработку.

Мы описали основу... Но мы хотим, чтобы наше расширение создавало кнопку на панели инструментов , по клику на которое открывалось окошко. Т.е. нам надо описать в нашем манифесте блок Browser Actions. Дописываем и получаем вот что...

{ "name": "Расширение Привет, Мир!", "description": "Моё первое расширение.", "version": "1.0", "icons": { "128": "128.png", "48": "48.png", "16": "16.png" }, "browser_action": { "default_title": "Моё первое расширение:\nПривет, Мир!", "default_icon": "48.png", "popup": "popup.html" } }

Тут мы указали, что хотим создать. А именно кнопку с заголовком default_title, с иконкой default_icon, по клику на которое будет открываться окошко popup.html. Мы использовали иконку размера 48, хотя на самом деле на панели инструментов может уместиться лишь размером до 19 пикселей. Но ничего страшного. Она будет масштабироваться сама.

Мы полностью описали наш manifest.json. А теперь нам нужно создать собственно popup.html, на который мы и ссылаемся. Создаем его также как и manifest.json. Сам popup.html это самый обычный HTML-документ. Надеюсь, вы уже имеете базовое представление о HTML ? Поэтому в созданный документ дописываем следующее...

<html> <head> <title>Hello, World!</title><meta content="text/html; charset=utf-8" http-equiv="Content-Type"> </head> <body> <div align="center"> <img src="128.png" hight="128" /><br> <b>Привет, Мир!</b> </div> </body> </html>

Проще говоря, наша страничка будет включать в себя одну картинку и фразу "Привет, Мир!".

Расширение готово! А теперь давайте его протестируем. На странице chrome://extensions/ переходим в режим разработчика и жмем кнопку "Загрузить распакованное расширение...". Указываем там нашу папку и все! Расширение установлено и работает. Находим иконку на панели инструментов и жмем ее. Видим страничку? Отлично =)

Образец того, что должно было получиться можно скачать.

Подробная документация доступна здесь.

Спасибо за внимание. Вопросы?

today 20.10.2011

my-chrome.ru