Привет, Хабр. Меня зовут Алексей, я бэкенд-разработчик C#. Хочу рассказать о том как я узнал что такое native messaging в браузерах и какие задачи можно с его помощью решать. В одном проекте я разрабатывал десктопную утилиту, которая должна была уметь обмениваться сообщениями с веб-страницами в браузере, чтобы в том числе управлять их содержимым и как угодно взаимодействовать с ними. Расскажу о том, как удалось решить такую задачу и покажу результат работы небольшого приложения с таким взаимодействием.
Постановка задачи
Мне нужно было сделать десктопное C#-приложение, которое позволяло бы кликнуть на какой-нибудь UI-элемент и посмотреть его свойства. Оно должно было работать со всеми популярными браузерами, а также — взаимодействовать с HTML-данными веб-страниц, из которых извлекались бы свойства UI-элементов (всего около 30 свойств), селектор и индекс. Все элементы можно сохранить для дальнейшего использования в сторонних программах (назовём их "роботы"), которые с этими элементами должны взаимодействовать. Также нужна была возможность дорабатывать API для взаимодействий с элементами и браузером.
Итак, сначала было решено взять за основу какую-нибудь популярную библиотеку для автотестирования, например, Selenium. Но вскоре после экспериментов выяснилось, что:
Мешает использование веб-драйверов, к которым робот не сможет прикрепиться и от которых «толстеет» дистрибутив (это было неприемлемо в рамках проекта).
Всё сводится к использованию ExecuteScript, и API таких библиотек не закрывает все потребности.
Мы не сможем работать непосредственно с API браузера. И вообще, Selenium становится совсем ненужной прокладкой, когда существует способ напрямую общаться с браузером и содержимым веб-страницы.
Чтобы решить все эти проблемы, прекрасно подошёл вариант с написанием браузерного расширения, которое предоставляет доступ к широкому функционалу браузерного API, а также к полному управлению веб-страницами. Более того, оказалось что браузеры предоставляют возможность обмена сообщениями между расширением и приложением запущенным на машине, что открывает для нас все необходимые возможности. Эта технология называется native messaging, а для связи между браузером и приложением сам браузер запускает native messaging host - исполняемая программа для обмена сообщениями, которую нам тоже далее предстоит написать.
Для примера создадим расширение для браузера Edge, хост между нашим приложением и браузером, а потом само приложение. Для других браузеров всё делается так же. Если что, код не промышленный и набросал я всё это лишь для примера, но как подробное ознакомление с технологией это подойдёт.
Расширение
Для начала создадим папку с тремя файлами:
manifest.json — обязательный компонент, содержит описание расширения, перечень прав, разрешённых хостов, дополнительных подключаемых скриптов и прочее. Для наших задач подходит следующий манифест (я не буду подробно описывать его возможности, как и браузерный API):
{
"name": "ExampleExtension",
"description": "Get properties of any ui element on page",
"version": "1.0", // Версия расширения
"manifest_version": 3, // Текущая актуальная версия манифеста
"content_scripts": [ // Подключение скрипта, работающего со страницей
{
"js": [ "content.js" ],
"matches": [ "http://*/*", "https://*/*", "file://*/*" ] // Разрешённые страницы
}
],
"permissions": [ "nativeMessaging", "webRequest", "webNavigation", "debugger", "scripting", "activeTab", "tabs" ], // Перечень разрешений, каждое из которых отвечает за работу с определённым API браузера
"host_permissions": [ "http://*/*", "https://*/*", "file://*/*" ],
"background": {
"service_worker": "service_worker.js" // Подключение скрипта, работающего в фоне с событиями браузера
}
}content.js — скрипт, работающий в контексте веб-страницы и позволяющий работать с её контентом, в том числе изменять его. Он изолирован от других расширений и вкладок. Подробнее о его возможностях можно прочитать в официальной документации.
var isCapturing = false; // Если true, то мы находимся в режиме захвата
var capturedElement = null; // Храним здесь захваченный элемент
document.onkeydown = function (e) {
if (e.which == 17) { // Клавиша Ctrl
isCapturing = false;
e.preventDefault(); // Предовратим реакцию браузера на клавишу
sendElement(capturedElement);
}
};
document.onmousemove = function (point) {
if (!isCapturing)
return;
try {
capturedElement = document.elementFromPoint(point.clientX, point.clientY);
highlightElement(capturedElement, "green solid 3px");
}
catch { }
};
function sendElement(targetElement) {
let attrs = {}; // Запишем в объект свойства, которые хотим отправить
attrs['Text'] = targetElement.innerText;
attrs['Class'] = targetElement.getAttribute('class');
attrs['X'] = targetElement.getBoundingClientRect()['x'];
attrs['Y'] = targetElement.getBoundingClientRect()['y'];
let result = { message: "Element", element: attrs };
chrome.runtime.sendMessage(result); // Отправка сообщения в service worker
}
function highlightElement(element, outline) {
if (window.prevElement) { // Запоминаем элемент, чтобы не подсвечивались несколько одновременно
window.prevElement.style.outline = window.prevElementOutline;
}
if (element) {
const elementOutline = element.style.outline;
setTimeout(function () {
element.style.outline = elementOutline;
}, 5000);
window.prevElementOutline = element.style.outline;
window.prevElement = element;
element.style.outline = outline;
} else {
delete window.prevElementOutline;
delete window.prevElement;
}
}Здесь мы обрабатываем два события: движение мыши и нажатие клавиши Ctrl. Если мы находимся в режиме захвата (isCapturing == true, переключать в true будем из service worker), то обработчик первого события будет запоминать UI-элемент, на который мы навелись, и подсвечивать его границы. Обработчик второго события отправит элемент в service worker с помощью вызова API chrome.runtime, который позволяет также получать информацию о манифесте.
service_worker.js — при запуске расширения начинает работать в фоне в единственном экземпляре. В нём прописаны обработчики событий браузера и сообщений из контент-скриптов.
var port = null; // Имя порта, через который свяжем расширение и хост
Initialize();
// Слушаем сообщения из content.js
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
if (msg.message == "Element") {
port.postMessage({ Text: "Element", Data: JSON.stringify(msg.element) }); // API для отправки сообщения хосту
ExecuteScriptInAllTabs(() => { isCapturing = false; }); // Отключаем режим захвата во вкладках
}
});
async function Initialize() {
ConnectPort();
if (port != null) {
port.postMessage({ Text: "Connect", Data: "" }); // Если успешно связались с хостом, то сообщим об этом в консоль разработчика
}
else {
await setTimeout(() => { Initialize(); }, 1000); // Повтор подключения к хосту
}
}
async function ConnectPort() {
port = chrome.runtime.connectNative('com.hellohabr.msg'); // Пробуем подключиться к хосту
port.onDisconnect.addListener(async () => { // Ожидаем разрыв соединения
port = null;
console.warn("Disconnected");
if (chrome.runtime.lastError) {
console.warn(chrome.runtime.lastError.message);
await setTimeout(() => { Initialize(); }, 1000); // Повтор на случай разрыва
}
});
port.onMessage.addListener(function (message) { // Слушаем сообщения от хоста
let msg = JSON.parse(JSON.stringify(message));
console.log("Received " + JSON.stringify(msg));
if (msg.command == "Capture") { // Пришла команда включить режим захвата
ExecuteScriptInAllTabs(() => { isCapturing = true; });
}
});
}
function ExecuteScriptInAllTabs(script) {
chrome.tabs.query({}, function (tabs) { // API для взаимодействия со вкладками
tabs.forEach(function (tab) { // Пусть режим захвата будет активен во всех возможных вкладках
if (!tab.url.startsWith("http")) { // Работаем только с сайтами
return;
}
try {
chrome.scripting.executeScript({ // API для проигрывания JS-скрипта в указанной вкладке
target: { tabId: tab.id },
func: script
});
}
catch (err) {
console.warn(err);
}
});
});
}Как только мы активируем наше расширение в браузере, запустится service worker. В нём мы с помощью chrome.runtime.connectNative('com.hellohabr.msg') в первую очередь попытаемся установить соединение с нашим native messaging host (его напишем позже). Для этого в манифесте необходимо разрешение nativeMessaging.
Ещё нам необходимо при запуске приложения создавать в реестре текущего пользователя ветку SOFTWARE\Microsoft\Edge\NativeMessagingHosts\com.hellohabr.msg со значением в виде пути к ещё одному манифесту, который необходим для работы native messaging (создадим его чуть позже). Почему? Дело в том, что при запуске расширения браузер будет пытаться запустить exe-файл нашего хоста, путь к которому и прописан в дополнительном манифесте.
Примечание: лично я сталкивался с проблемой что Chrome может не подключиться к хосту без ключа SOFTWARE\WOW6432Node\Google\Chrome\NativeMessagingHosts\com.saluterpa.msg. Кроме того, если вы упорно видите в консоли нижеприведённую ошибку, то есть вероятность что стоит воспользоваться Process monitor и проследить, куда ходит браузер в реестре. К примеру, у меня он пытался прочитать значение из LOCAL_MACHINE, а некоторые браузеры могут и вовсе заглядывать в ветку для Chrome. Значения ключей в таких ветках должны быть те же самые: путь к манифесту для native messaging.
К слову, в официальной документации хорошо описаны всевозможные и ошибки и что с ними делать: https://developer.chrome.com/docs/extensions/develop/concepts/native-messaging, раздел debugging.
Вернёмся к скрипту. При успешном подключении обрабатывать сообщения от хоста будет port.onMessage.addListener. При получении команды «захватить» мы будем взаимодействовать с content.js посредством API chrome.scripting, который позволяет нам во время исполнения внедрять в страницу JS-скрипт или CSS (необходимо разрешение scripting в манифесте). Более каноничным способом общения с content.js являются обратные вызовы в методе chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {}}). Но нам это не подходит, так как мы собираемся активировать захват по запросу от хоста.
В результате, получается примерно такая схема общения между компонентами:
Добавление расширения
В браузере перейдём в панель управления расширения. Это можно сделать одним из двух способов: в адресной строке ввести edge://extensions или в браузере нажать кнопку Расширения → Управление расширениями.
Теперь включим режим разработчика в левой части панели. Для этого нажмём кнопку Загрузить распакованное.
Укажем папку, в которой создали manifest.json. Видим наше расширение. Его ID ещё пригодится нам позже.
Нажав «Служебный сценарий», мы сможем увидеть все ошибки service worker и всё что мы выводим в коде в консоль.
Пишем хост
Как только мы запустим расширение, браузер будет стараться запустить exe-файл, путь к которому мы указали в манифесте для native messaging. Одно расширение держит один такой .exe (хост). Создадим .NET-проект и в нём один класс Program. Его переменные и Main выглядят так:
static NamedPipeServerStream? s_pipe;
static StreamReader? s_pipeReader;
static StreamWriter? s_pipeWriter;
static void Main(string[] args)
{
s_pipe = null;
s_pipeReader = null;
s_pipeWriter = null;
BrowserMessage message;
while ((message = Read()) != null) // Ждём сообщение от браузера
{
if (message.Text == "Connect")
{
StartNamedPipe(); // Откроем pipe для общение с нашим приложением
Write("Connected to NMHost"); // Ответим браузеру, что всё хорошо
}
else if (message.Text == "Element")
{
s_pipeWriter.WriteLine(message.Data); // Отправим результат захвата в приложение
s_pipeWriter.Flush();
}
}
}Для общения с нашим приложением будем использовать NamedPipes. Этого вполне достаточно, потому что позволяет постоянно поддерживать двустороннюю связь. Теперь запустим pipe и ждём сообщений от приложения:
static void StartNamedPipe()
{
Task.Run(() =>
{
while (true)
{
if (s_pipe == null || !s_pipe.IsConnected)
{
// Ниже инициализируем pipe
s_pipe = new NamedPipeServerStream($"example_pipe_edge", PipeDirection.InOut, 1, PipeTransmissionMode.Byte,
PipeOptions.Asynchronous | PipeOptions.WriteThrough, 0, 0);
s_pipe.WaitForConnection();
s_pipeReader = new StreamReader(s_pipe);
s_pipeWriter = new StreamWriter(s_pipe);
Write("Client connected");
string appMsg;
while ((appMsg = s_pipeReader.ReadLine()) != null) // Ожидаем команд от приложения
{
Write(appMsg); // Передадим сообщение от приложения браузеру
}
Write("Lost connection with client");
s_pipe = null;
}
}
});
}Для общения с браузером используется стандартный ввод-вывод, который он перехватывает. Выглядит это так:
static BrowserMessage Read()
{
var stdin = Console.OpenStandardInput();
var lengthBytes = new byte[4];
stdin.Read(lengthBytes, 0, 4);
var length = BitConverter.ToInt32(lengthBytes, 0);
var buffer = new char[length];
using (var reader = new StreamReader(stdin))
{
var idx = 0;
while (idx < length && reader.Peek() >= 0)
{
idx += reader.Read(buffer, idx, buffer.Length - idx);
}
}
return JsonConvert.DeserializeObject<BrowserMessage>(new string(buffer));
}
static void Write(string command)
{
var msgdata = "{\"command\": \"" + command + "\"}";
var dataLength = msgdata.Length;
var stdout = Console.OpenStandardOutput();
stdout.WriteByte((byte)((dataLength >> 0) & 0xFF));
stdout.WriteByte((byte)((dataLength >> 8) & 0xFF));
stdout.WriteByte((byte)((dataLength >> 16) & 0xFF));
stdout.WriteByte((byte)((dataLength >> 24) & 0xFF));
Console.Write(msgdata);
}Остаётся только структура сообщения, которое мы будем получать от браузера:
class BrowserMessage
{
public string? Text { get; set; }
public string? Data { get; set; }
}Приложение
Создадим WPF-приложение. В проекте необходимо создать тот самый манифест для native messaging. Теоретически, можем создать его где угодно, но придётся прописывать в коде путь к нему. Назовём его edgemanifest.json:
{
"name": "com.hellohabr.msg",
"description": "Test messaging host",
"path": "ExampleNMHost.exe",
"type": "stdio",
"allowed_origins": [
"chrome-extension://<ЗДЕСЬ ID ВАШЕГО РАСШИРЕНИЯ В БРАУЗЕРЕ>/"
]
}Path — это путь к нашему хосту из прошлой главы. Рекомендую класть его рядом с файлом манифеста, чтобы не думать о правилах браузера при указании пути. Allowed_origins — список расширений, которые смогут использовать наш хост. Ваш идентификатор вы сможете посмотреть в управлении расширениями.
Само приложение будет максимально простым: кнопка для начала захвата и окно для вывода результата. Но перед этим при запуске программы необходимо прописать в реестре путь к edgemanifest и подключиться к пайпу, который мы открываем на хосте:
var path = Path.GetFullPath("edgemanifest.json");
var value = Microsoft.Win32.Registry.CurrentUser.OpenSubKey($@"SOFTWARE\Microsoft\Edge\NativeMessagingHosts\com.hellohabr.msg")?.GetValue("").ToString();
if (Microsoft.Win32.Registry.CurrentUser.OpenSubKey($@"SOFTWARE\Microsoft\Edge\NativeMessagingHosts\com.hellohabr.msg") == null || value != path)
{
Microsoft.Win32.Registry.CurrentUser.CreateSubKey($@"SOFTWARE\Microsoft\Edge\NativeMessagingHosts");
Microsoft.Win32.Registry.CurrentUser.CreateSubKey($@"SOFTWARE\Microsoft\Edge\NativeMessagingHosts\com.hellohabr.msg");
var key = Microsoft.Win32.Registry.CurrentUser.OpenSubKey($@"Software\Microsoft\Edge\NativeMessagingHosts\com.hellohabr.msg", true);
key.SetValue("", path);
}
if (WaitNamedPipe(@"\\.\pipe\" + $"example_pipe_edge", 0))
{
connection = new NamedPipeClientStream($"example_pipe_edge");
try
{
connection.Connect();
connection.ReadMode = PipeTransmissionMode.Byte;
streamWriter = new StreamWriter(connection);
streamReader = new StreamReader(connection);
}
catch { }
}Триггер кнопки: здесь мы отправляем команду хосту и ждём результат, пока браузер получит команду от хоста и мы захватим элемент:
private void Button_Click(object sender, RoutedEventArgs e)
{
streamWriter.WriteLine("Capture");
streamWriter.Flush();
label.Text= streamReader.ReadLine();
}Соберём приложение вместе с манифестом и файлом хоста. На выходе должно получиться примерно так:
Запускаем
Когда загрузим расширение в браузер, мы увидим, что он тщетно пытается соединиться с нашим хостом:
Как только запустим приложение, оно пропишет в реестр необходимый ключ и браузер сможет подхватить наш хост. После этого мы должны увидеть следующее сообщение:
Для корректной работы необходимо переключиться на вкладку с сайтом и обновить её. На вкладке с менеджером расширений работать не будет. Жмём на нашу печальную кнопку, переходим в браузер, наводим на нужный элемент и жмём Ctrl:
Заключение
В итоге мы получили приложение, позволяющее при небольшом дополнении функционала свободно взаимодействовать с браузером: запускать js-скрипты, работать с контентом страницы, управлять вкладками и прочие возможности которые даёт нам chrome API и наша фантазия. Данная инструкция подходит для большинства chromium браузеров, для Firefox небольшие отличия заключаются в некоторых полях манифеста и в названии функций вызова api браузера. Также перед загрузкой расширения нужно упаковать его в xpi формат, все эти нюансы описаны в документации Firefox.
В отдельной статье я постараюсь подробнее рассказать о том как взаимодействовать непосредственно с контентом страниц, а также некоторых тонкостях и ограничениях в выполнении таких действий.