IT1409: Программирование расширений web-браузеров и web-программирование

123456

Материал предоставлен https://it.rfei.ru

Первое приложение

Попробуем создать простейшее расширение “Hello, World!” с применением всего одного единственного Chrome API - Browser Actions.

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

Настоятельно рекомендуем выбирать UTF-8.

Для этого либо в уже созданном документе через меню “Кодировки” выбираем преобразование в нужный формат. Либо перед созданием документа выбираем “Опции” - “Настройки” - “Новый документ” и указываем правильную кодировку.

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

С чего начинаем создавать расширение, и что является фундаментом любого дополнения для Google Chrome?

Это manifest.json. Просто создайте текстовый файл и переименуйте его в manifest.json

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

Открываем созданный манифест и пишем в него...

{
  "name": "Расширение Привет, Мир!",
  "description": "Моё первое расширение.",
  "version": "1.0",
  "manifest_version": 2,
  "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",
  "manifest_version": 2,
  "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 и изучили курс IT1402: Управление контентом Поэтому в созданный документ дописываем следующее:

<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" width="128" hight="128" /><br>
			<b>Привет, Мир!</b>
		</div>
	</body>
</html>

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

Расширение готово!

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

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

Обзор возможностей системы расширенийПараметры расширения