Недавно я создал веб-браузер на основе фреймворка Javascript и библиотеки Electron и React.js соответственно и с Webpack. Одним из требований браузера было внедрение JS в веб-просмотр. Javascript, который работает внутри веб-сайта, работающего внутри веб-просмотра.
К счастью, это можно сделать с помощью предварительной нагрузки; Предварительная загрузка - это один из параметров Webview, который позволяет вам вставлять весь JS-файл внутри веб-сайта, отображаемого веб-просмотром. После этого у файла будет доступ ко всем внутренним API браузера, таким как окно и документ.
Вы можете вставить файл предварительной загрузки, например 👇
Есть несколько вещей, которые вам нужно знать о предварительной загрузке, при работе со средой разработки вы можете легко передать относительный путь. Тем не менее, во время производства вам необходимо убедиться, что ваш файл предварительной загрузки доступен через файловый протокол, поскольку предварительная загрузка принимает только путь к протоколу файлов, у меня была аналогичная проблема с браузером на основе реакции. не удалось получить путь к файлу предварительной загрузки.
Также в файле предварительной загрузки будет перезагружаться каждый раз, когда загружается контент dom, но если вы перемещаетесь по SPA, не будет ни перезагрузки, ни события загрузки контента dom. Таким образом, вам придется искать веб-просмотр в событиях did-start-loading и did-stop-loading. и после получения этих событий вы можете отправить сообщение для настройки прослушивателя в вашем файле предварительной загрузки следующим образом 👇
У вас будет доступ к электронному API и его функциональности. И чтобы проверить, загружено ли содержимое dom в настоящее время, вы можете использовать это в своем файле предварительной загрузки. 👇
Точно так же теперь можно изменить что угодно внутри веб-сайта, поскольку у вас есть доступ к API документа, вы можете выбирать их, добавлять элементы, скрывать элементы и т. Д.
Вот и все.
