#How to inject custom JS to webview tag

7 messages · Page 1 of 1 (latest)

tender loom
#

Hi!

I've an app who is an internal webbrowser for my company, for reasons it is a kiosk mode app, without a physical keyboard attached.

I have been able to insert a virtual keyboard in the input of my html itself, without problem, but I can't get the keyboard to jump when focusing on the webview input.

To archieve this, I have to inser a local JS file, plus a local CSS file and a minified version of JQuery. In the base html (the part who isn't a webview) it works fine, pic attached to prove this, but when I click on the input who is inside of the webview it doesn't show.

Any suggestions? It's been 3 days and I can't get out of this freaking well. I've read a lot that it can be archieved with ipc events, but 0 info about how to or an example of how to reach it.

I'm using electron 22, electron-virtual-secure-keyboard, and electron-builder, focused on linux only (ubuntu 22.04)

image.png
grave summit
#

You need to do same for webview

#

With preload for example https://www.electronjs.org/docs/latest/api/webview-tag#preload

`` Tag | Electron

Electron's webview tag is based on Chromium's webview, which is undergoing dramatic architectural changes. This impacts the stability of webviews, including rendering, navigation, and event routing. We currently recommend to not use the webview tag and to consider alternatives, like iframe, Electron's BrowserView, or an architecture that avoids ...

tender loom
#

Hi @grave summit !

If I have understant well, I have to create the script/link tags inside the preload.js, set the src to my local JS/CSS files, and inject them using document.appendChild(script) ?

grave summit
#

i dont think you able to inject them on remote website from harddrive

#

because of CORS

tender loom
#

Maybe from our web hosting?