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

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

Каждый современный браузер имеет возможность расширения функционала за счет добавления в него плагинов(расширений), и разумеется браузер 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, и в случае необходимости быстрого создания плагина, просто использовать её копию.

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

JavaScript / jQuery     chrome, opera, плагин для браузера, Яндекс Браузер