Недавно було потрібно написати свій плагін для Хрома, прийшлося “вникнути” в алгоритм написання таких плагінів )

Про то , як написати свій плагін для Хрома – читаємо далі..

Спочатку нам потрібно зайти в спеціальне меню, в меню для плагінів (розширень):
chrome://extensions/

Там є “Режим розробника” – це для нас! =) Жмемо..
Появляється три кнопочки:

• перша для загрузки аддону з папка (у вигляді файлів)
• друга для зборки аддону з папки в один файл
• і третя для масового оновлення всі доданих аддонів

І так , приступимо =)

Для того щоб написати аддон, потрібно створити папку з любим іменем.
Нехай це буде папка “ext1″.
В папці обовязково має бути 3 файли:

• popup.html – випливаюче віконце коли жмемо на значок аддону
• manifest.json – загальна інформація про аддон в json-кодуванні
• icon.png – ну і головна картинка аддону

Наведу приклад самого елементарного manifest.json файлу:

{
	"name": "uasc - test extension 1",
	"version": "0.1",
	"description": "uasc - тестовый плагин 1",
	"browser_action": {
		"default_icon": "icon.png",
		"popup": "popup.html"
	}
}

Впринципі кожне поле тобі має бути зрозуміло, але ,на всякий, розпишу:

• name – імя аддону
• version – версія
• description – опис
• browser_action.default_icon – дефолтна картинка
• browser_action.popup – який файл показувати коли юзер жме на кнопку аддону

Вміст popup.html, manifest.json і icon.png можете подивитися в архіві, який я прикріпив знизу,
в результаті, після загрузки, аддон буде мати такий вигляд:

Після “зборки” файлів аддону в один файл, ми можемо його передати знайомому\другу, який просто, перетягнувши файл в хром, заінсталює його.



Перейдемо до аддону №2.


В маніфест файл добавимо наступні дані:

• background_page – сторінка аддону, яка запускається при загрузці хрому і працює у фоновому режиме
• icons – картинки аддону різного розміру (32, 48, 64, 128, 256, ..)
• browser_action.default_title – підсказка, яка буде випливати при наведенні курсору на значок аддону
• options_page – html-сторінка для контролю опцій аддону
• update_url – сторінка з апдейтами аддону

Тепер manifest.json виглядає ось так:

{
	"name": "uasc - test extension 2",
	"version": "0.2",
	"description": "uasc - тестовый плагин №2",
	"background_page": "background.html",
	"icons": {
		"128": "icon_128.png",
		"32": "icon_32.png",
		"48": "icon_48.png"
	},
	"browser_action": {
		"default_icon": "icon.png",
		"default_title": "тестовый плагин №2",
		"popup": "popup.html"
	},
	"options_page": "options.html",
	"update_url": "http://uasc.org.ua/chrome/updates/crx"
}

В options.html поки покладемо любий текст.
icon_32.png \ icon_48.png \ icon_128.png – намалюємо щось, шоб побачити різницю, де яка картинка грузиться.

В background.html можна написать шось типу постійного alert’y який викликається через setInterval \ setTimeout.

Виглядає в результаті все так:

Ну і не забуваємо зібрати все в один файл, який займає 6кб =)

Перейдемо до аддону №3.


В маніфесті небудемо нічого нового поки добавляти, тому він майже незмінний залишається:

{
	"name": "uasc - test extension 3",
	"version": "0.3",
	"description": "uasc - тестовый плагин №3",
	"background_page": "background.html",
	"icons": {
		"128": "icon_128.png",
		"32": "icon_32.png",
		"48": "icon_48.png"
	},
	"browser_action": {
		"default_icon": "icon.png",
		"default_title": "тестовый плагин №3",
		"popup": "popup.html"
	},
	"options_page": "options.html",
	"update_url": "http://uasc.org.ua/chrome/updates/crx"
}

Але тепер розбремося з background.html і options.html.
options.html – як я вже казав, це сторінка для зміни опцій аддону.
В Хромі є глобальна змінна - localStorage – це масив з данними. Масив для збереження даних нашого аддону.
Наприклад, буде плагін, який повинен запамятовувати імя користувача.
Найелементарніша реалізація для збереження даних в Хромі:

localStorage["myaddon"+'username'] = 'uasc';

Як зчитати , думаю ви догадалися
Вся логіка options.html построєна на записі \ зчитування масиву localStorage, тому там нічого важкого нема.

background.html – як я вже казав, це сторінка, яка завантажується при запуску браузера, і працює увесь час в фоні.
Для прикладу, напишемо шось просте і мале:

	var interval_1;
	var app_pref = 'myapp3';
	localStorage[app_pref+'stop-some_else_function'] = 'no';

	function start_main_function() {
		alert('background.html loaded!');
		interval_1 = setInterval(some_else_function, 1000);
	}

	function some_else_function() {
		if ( localStorage[app_pref+'stop-some_else_function'] == 'yes' )
			return true;

		if (confirm('[some_else_function] хватить видавати це повідомлення?')) {
			alert('some_else_function зупинено!');
			localStorage[app_pref+'stop-some_else_function'] = 'yes';
			clearInterval(interval_1);
		}
	}

При запуску викликається start_main_function, яка ставить таймер, шоб кожну секунду аддон питався юзера чи показувати повідомлення чи ні =) Доволі банально, просто і надоїдливо =)
Коли юзер нажме кнопку “Да” (“хватить” )) ), тоді аддон перестане питати..

нарешті №4.


Спробуємо написати аддон, який буде перехвачувати коди клавіш, які нажав юзер, на сайт Vkontakte.Ru.
В маніфесті нам прийдеться добавити один новий блок, content_scripts.
content_scripts – це блок, який дозволяє запускати наш js-скрипт при завантаженні певного сайту (який попадає під нашу маску)

• content_scripts.all_frames – завантажувати js-код коли підгружаються фрейми
• content_scripts.js – шлях до яваскрипта
• content_scripts.matches – маска потрібних нам сайтів

Наш manifest.json тепер виглядає так:

{
	"name": "uasc - test extension 4",
	"version": "0.4",
	"description": "uasc - тестовый плагин №4",
	"background_page": "background.html",
	"icons": {
		"128": "icon_128.png",
		"32": "icon_32.png",
		"48": "icon_48.png"
	},
	"content_scripts":
	[
		{
			"all_frames": true,
			"js": [ "script.js" ],
			"matches": [ "http://vkontakte.ru/*", "http://vk.com/*" ]
		}
	],
	"browser_action": {
		"default_icon": "icon.png",
		"default_title": "тестовый плагин №4",
		"popup": "popup.html"
	},
	"options_page": "options.html",
	"update_url": "http://uasc.org.ua/chrome/updates/crx"
}

Все доволі просто.. script.js буде викликатися коли юзер буде заходити на сайти “http://vkontakte.ru/*”, “http://vk.com/*”. Можете написати alert(1) в яваскрипті щоб побачити результат.
Для перехвату нажатих клавіш використаємо:

document.addEventListener("keyup", keyUpEventListener);

В результаті, заінсталювавши плагін, зайшовши на сайт вконтакті.ру, і написавни там щонебуть, побачимо результат:

і нарешті, останній №5.

Напишемо аддон, який буде час від часу (раз в 5 сек) завантажувати http://vkontakte.ru/feed2.php , парсити його, і, якшо є нові друзі, чи нові повідомлення, сповіщати нас.

Єдина проблема , яка може нас тут застати – Хром може заборонити відправляти запити на інші сайти =)
Але щоб цього не сталося, потрібно добавити новий блок в manifest.json:

• permissions – блок для контролю можливостей плагіну

.
Наш, 5й маніфест, виглядає так:

{
	"name": "Vkontakte Checker",
	"version": "0.1",
	"description": "Додаток для Chrome для провірки Вконтакте.Ru",
	"background_page": "background.html",
	"icons": {
		"128": "icon_128.png",
		"32": "icon_32.png",
		"48": "icon_48.png"
	},
	"browser_action": {
		"default_icon": "icon_32.png",
		"default_title": "Vkontakte.Ru",
		"popup": "popup.html"
	},
	"permissions": [ "tabs", "http://vkontakte.ru/" ],
	"update_url": "http://uasc.org.ua/chrome/updates/crx"
}

Для запиту сторінки з вк, використаємо XMLHttpRequest.
Ну і ще, щоб все так просто не було, добавимо анімацію картинки, коли аддон завантажує сторінку =)
Щоб змінити картинку аддону, в Хромі є ф-ція:

chrome.browserAction.setIcon({path:'шлях/до/картинки.png'});

Ф-ція для провірки feed2.php через XMLHttpRequest буде виглядати так:

	function check_vk() {

			var	xmlhttp = new XMLHttpRequest();
			xmlhttp.open("POST", "http://vkontakte.ru/feed2.php", false);
			xmlhttp.onload = function()
			{
				var answer = xmlhttp.responseText;

				var id = preg(answer, '/"id":([0-9]+)/i');
				var friends = preg(answer, '/"friends":{"count":([0-9]+)/i');
				var messages = preg(answer, '/"messages":{"count":([0-9]+)/i');
				var events = preg(answer, '/"events":{"count":([0-9]+)/i');
				var groups = preg(answer, '/"groups":{"count":([0-9]+)/i');
				var opinions = preg(answer, '/"opinions":{"count":([0-9]+)/i');
				var gifts = preg(answer, '/"gifts":{"count":([0-9]+)/i');

				localStorage[app_pref + 'id'] = id;
				localStorage[app_pref + 'friends'] = friends;
				localStorage[app_pref + 'messages'] = messages;
				localStorage[app_pref + 'events'] = events;
				localStorage[app_pref + 'groups'] = groups;
				localStorage[app_pref + 'opinions'] = opinions;
				localStorage[app_pref + 'gifts'] = gifts;

				if (friends != '0' || messages != '0' || events != '0' || groups != '0' || opinions != '0' || gifts != '0') {

					var message = '';
					if (friends != '0') {
						message += 'Нових запитів дружби: '+friends+"\n";
					}
					if (messages != '0') {
						message += 'Нових повідомлень: '+messages+"\n";
					}
					if (events != '0') {
						message += 'Нових подій: '+events+"\n";
					}
					if (groups != '0') {
						message += 'Нових запрошень в групи: '+groups+"\n";
					}
					if (opinions != '0') {
						message += 'Нових думок про вас: '+opinions+"\n";
					}
					if (gifts != '0') {
						message += 'Нових подарунків: '+gifts+"\n";
					}

					chrome.browserAction.setIcon({path:'animate/icon_32_new.png'});
					if (message != '' && old_vk != message) {
						alert('Вконтакті.Ру'+"\n\n"+message);
						old_vk = message;
					}
				}

				anim_num = 1;
				anim_plus = true;

			}
			xmlhttp.send(null);
	}
	function preg(text, regular) {
		eval('var re = '+regular);
		var matches = text.match(re);
		return matches[1];;
	}

Результат:
Кожні 5сек аддон провіряє чи не написав нам хтось вк, чи є нові повідомлення, etc




Архів з усіма прикладами та готовими “зборками”:
http://uasc.org.ua/files/chrome.zip

Якшо є питання – задавайте в коментарях, попробую відповісти =)
Дякую за увагу =)