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

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

1 247
02 октября 2020 в 16:30

В статье мы разработаем веб расширение для браузера Google Chrome. Также мы поговорим на тему сферы веб плагинов. Что с ней сегодня и есть ли у неё какие-либо перспективы?

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

Сперва немного фактов. Понятие расширение для веб-браузера появилось достаточно давно. В 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 файл с дизайном и добавить два скрипта, что будут срабатывать при появлении плагина или при действиях пользователя.


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



Больше интересных новостей

Комментарии для сайта Cackle