Как сделать плагин для Google Chrome

Author Автор: Роман Чернышов    Опубликовано: 4 декабря 2022

Chrome Plugins Каждый современный браузер имеет возможность расширения функционала за счет добавления в него плагинов(расширений), и разумеется браузер Google Chrome не исключение. Более того, все плагины созданные для Chrome отлично работают в браузерах созданных на этом же движке — Blink, среди них такие как Яндекс Браузер, Microsoft Edge и Opera (версии старше 15). Таким образом можно автоматизировать рабочие процессы на сайте, добавить недостающий функционал на страницу, обрабатывать любые данные на странице и многое другое. Рассмотрим простой и быстрый вариант создания своего плагина. Для этого нам потребуется создать несколько файлов, скриптов с кодом на JavaScript, HTML, CSS и JSON.

Структура файлов

Создаем директорию NEW_Plugin, а в ней следующий перечь файлов:

manifest.json — Главный файл плагина, манифест, содержащий его описание и настройки в формате JSON, предназначенные для браузера, описывающие то, как должен работать плагин. Ниже его содержимое:

{
	"name":  "Название плагина", 
	"version": "1.0",  // Версия расширения.
	"manifest_version": 3, // Версия манифеста
	"action": {
		"default_title": "Заголовок, название плагина", // Заголовок. Его видно если навести курсор на иконку в браузере
		"default_icon": { // Список путей к файлам иконок плагина, которые будут отображаться в панели браузера
		      "16": "images/icon16.png", // Путь к иконке плагина
		      "32": "images/icon32.png",
		      "48": "images/icon48.png",
		      "128": "images/icon128.png"
		}, 
		"default_popup": "popup.html" // Путь к HTML файлу, который отвечает за всплывающее окно настроек плагина, при нажатии на иконку плагина в браузере
	},
	"icons": { // Список путей к файлам иконок плагина
	      "16": "images/icon16.png",
	      "32": "images/icon32.png",
	      "48": "images/icon48.png",
	      "128": "images/icon128.png"
	},
	"permissions": [ // Настройки прав доступа плагина
	  	"storage", // Разрешено использовать Local Storage
		"cookies", // Разрешено работать с Cookie
	     	"notifications", // Разрешено отправлять уведомления пользователю
	],
	"background": { // Пусть к файлу JavaScript, который будет работать в фоновом режиме и выполнять различные действий, как со страницей, так и на системном уровне браузера
		"service_worker": "background.js"
	},
	"host_permissions": [ // Список доменов к которым разрешено обращаться
	  	"https://site.ru/*", // Разрешены любые запросы к указанному домену
	  	"*://*/*"
	],
 	"content_scripts": [ // Скрипты загружаемые на веб-страницах
	    {
	      "matches": [ "*://mail.yandex.ru/*"], // На каких доменах разрешена загрузка скриптов
	      "js": ["js/jquery1.8.3.min.js", "js/content.js"], // JS Скрипты
	      "css": ["css/custom.css"] // CSS Скрипты
	    }
	  ]
}

background.js — Файл на JavaScript, который будет работать в фоновом режиме и выполнять различные действий, как со страницей, так и на системном уровне браузера. Например, если на сайте, на котором активирован плагин, установлена политика безопасности CORS, запрещающая обращаться из JS кода загруженного на странице сайта(content.js), к другим внешним доменам, то можно обойти это ограничение, обращаясь из content.js кода не к внешним доменам напрямую, а к JS коду плагина размещенного в background.js (вызывая соответствующую функцию). А background.js, уже далее, будет работать на уровне браузера производя запрос к нужному нам внешнему домену.

// Принимает fetch запрос от content.js, обходим CORS, шлем запрос во внешний мир
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  fetch(request.input, request.init).then(function(response) { //let response = await 
    return response.text().then(function(text) {
      sendResponse([{
        body: text,
        status: response.status,
        statusText: response.statusText,
      }, null]);
    });
  }, function(error) {
    sendResponse([null, error]);
  });
  return true; //response
});

content.js — Файл на JavaScript, который будет загружаться непосредственно на самой веб-странице, т.е. встраиваться в неё и оперировать DOM деревом, получая доступ ко всем глобальным переменным и т.д.

// Пример запроса к внешнему сайту, в обход политики CORS
var url = "https://love-crm.ru/api/v1/check/status"; // URL запроса к внешнему сайту
var query = {}; // Объект POST параметров, если есть
var request = { // Объект содержащий настойки запроса
 	method: "POST",
 	mode: "cors",
 	headers: {
		 "Content-Type": "application/json",
		 "Authorization": "Token " + token,
		 "X-Secret": secret
 	},
 	body: JSON.stringify(query)
}
fetchResource(url, request, options); // Вызов функции из background.js работающей на уровне браузера

popup.js — Файл на JavaScript, который будет выполняться при нажатии на иконку активированного плагина в браузере. При клике на эту иконку всплывает окно плагина, как правило с его настройками. Окно плагина написано на HTML и CSS, за что отвечают соответствующие файлы popup.html и popup.css.

popup.html — Файл на HTML, который будет отображаться при нажатии на иконку активированного плагина в браузере, как правило содержит в себе форму настроек или информацию о версии плагина.

<!DOCTYPE html>
<html>
	<head>
		<title>Настройки плагина</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script src="popup.js"></script>
		<link href="popup.css" rel="stylesheet" type="text/css">
	</head>
	<body>
 
        Тут код HTML формы настроек плагина или информация о его версии
 
	</body>
</html>

popup.css — Файл содержащий стили CSS, отвечающие за внешний вид всплывающего окна с настройками плагина.

Загрузка плагина в браузер

Страница с расширениями

Для того, чтобы добавить готовый плагин в браузер, достаточно перейти в раздел основного Меню, выбрать пункт «Дополнительные инструменты», а затем «Расширения». После чего откроется страница расширений, где нужно будет нажать кнопку «Загрузить распакованное расширение», и после активировать его. После чего плагин станет активным на веб-сайтах доступ к которым указан в манифесте, а на панели появится его иконка при нажатии на которую будет всплывать окно с формой настроек из файла popup.html.

Остается только написать основной функционал плагина в файле content.js, задать перечь действий которые он будет выполнять на целевой страницы сайта.

Также на странице плагинов(расширений) в браузере, вы можете упаковать файлы плагина в один файл с расширением CRX, для его последующей передачи и распространения.

Заключение

Простая инструкция по быстрому созданию плагина для браузеров на движке Blink, в частности Google Chrome. На будущее можно сохранить получившуюся структуру в отдельной директории под название _blank, и в случае необходимости быстрого создания плагина, просто использовать её копию.

Друзья, если вам нужна помощь в разработке плагина, или необходимо написать плагин под ваши цели и задачи, обращайтесь, буду рад сотрудничеству!

Оставить комментарий

Автор блога
Чернышов Роман
Роман Чернышов
Веб-разработчик, Full Stack
Senior, Architector
PHP, JavaScript, Node.JS, Python, HTML 5, CSS 3, MySQL, Bash, Linux Admin
Заказать работу
предложить оффер

Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка