how to get return value from webview.executeJavaScript in electron

Question

hi all in my project i have three js files, main.js,browser.js and inject.js, in browser.js i have implemented all the click action related to my webview and many functionalities, from this i have a click action to get Username from the webpage which is loaded in webview for that i created a function in inject.js to get contents and elements from the page i got the value in Inject.js files but in Browser.js files i getting undefined values

here my sample code:

browser.js

var proName = webview.executeJavaScript('__myInjection.profileName()');

inject.js

profileName : function (){
var recordArray = []
var url
var script = document.createElement("script");
script.src = require('./jquery-3.2.1.min.js');

  $(document).ready(function() {
 url = $("[data-control-name='identity_profile_photo']").attr("href");
alert(url)
  });

return url;


},

values getting called in inject.js but browser.js returns Undefined values

Answer 1

Not exactly sure why you resort to inject JS code into a WebView, but why not… Make sure it is not an XY problem.

1. webview.executeJavascript() method does not return anything. You can pass a callback as 3rd argument (more on that below), but I do not think it receives anything from the executed code.

2. In your injected code, you create a callback that will get executed on page ready. Therefore anything returned by your function (like your url variable) will not have been affected yet by the callback code. Make sure you understand How to return the response from an asynchronous call?

If I understand correctly, you are trying to scrap some data on your embedded page, and send it back to your Renderer (browser).

A more appropriate way of achieving this result would be to use the preload attribute of electron <webview>:

<webview src="urlToGuestPage" preload="./inject.js"></webview>

In inject.js, you can require(electron), and use the electron IPC scheme (electron.ipcRenderer) to communicate between the Webview (ipcRendrer.sendToHost()) and the "parent" Renderer. You have a simple example there: https://electron.atom.io/docs/api/webview-tag/#event-ipc-message

// In embedder page. (parent Renderer / browser.js)
const webview = document.querySelector('webview')
webview.addEventListener('ipc-message', (event) => {
  console.log(event.channel)
  // Prints "pong"
})
webview.send('ping')

// In guest page. (preload script for the webview / inject.js)
const {ipcRenderer} = require('electron')
ipcRenderer.on('ping', () => {
  ipcRenderer.sendToHost('pong')
})

You should be able to find more detailed tutorials for such communication between a Renderer and a webview, e.g. https://ourcodeworld.com/articles/read/201/how-to-send-retrieve-information-and-manipulate-the-dom-from-a-webview-with-electron-framework