Расширения для Google Chrome. Пишем свой AdBlock

Информация о веб-расширениях

Сперва немного фактов. Понятие расширение для веб-браузера появилось достаточно давно. В 1999 году в браузере Internet Explorer появилась возможность работы с расширениями. В Opera, Google Chrome и Safari все это появилось позже – в 2009 году.

С приходом расширений в Google Chrome многие понадеялись, что будет сделана революция во всей сфере. Дело в том, что Chrome предоставил разработчик добавлять свои расширения для веб-браузера.

Спустя недолгое время всем стало понятно, что для компании Google расширения вовсе не в приоритете. Обидно это осознавать, но Google ужасно относится к своим маркетплейсам.

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

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

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

Разработка расширения

Для описания расширения необходимо создать файл «manifest.json». Приме файла ниже:

{
	"manifest_version": 2,
	"name": "Название",
	"description": "Описание расширения",
	"version": "0.0.1",
	"author": "Автор",
	"browser_action": {
		"default_title": "Подсказка при наведении на плагин",
		"default_icon": "icon.png",
		"default_popup": "index.html"
	},
	"content_scripts": [
		{
			"matches": [
				"<all_urls>"
			],
			"js": ["jquery.min.js", "content.js", "changeBg.js"]
		}
	],
	"permissions": ["activeTab"]
}

В манифесте описываются основные характеристики вашего расширения. В нашем случае указано следующее:

• описание плагина: название, автор, версия;
• иконка плагина;
• файл «index.html», что описывает дизайн пользовательского интерфейса;
• плагин будет работать на всех страницах и будут подключены 3 JavaScript скрипта;
• разрешение на использованием вкладок – activeTab.

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

Вы можете скачать готовый проект плагина по этой ссылке, а также ниже представлено видео с детальной реализацией необходимого плагина: