具有多个JS脚本的Electron自动化WebView

Question

我想使用github的电子创建一个桌面应用。本质上，该应用将打开外部网页，例如Google.com，并执行各种自动化任务，例如单击，打字等。

到目前为止，我的index.html文件具有带有预加载器的WebView，并且需要渲染器JS文件。

<webview
id="webview"
preload="./preload.js"
src="https://google.com"></webview>
<script>
require('./renderer');
</script>

这是Renderer.js

const { ipcRenderer: ipc } = require('electron');
document.addEventListener('DOMContentLoaded', function(event) {
  const webview = document.getElementById('webview');
  const btn = document.getElementById('devtools');
});

这是preload.js

const { ipcRenderer: ipc } = require('electron');
console.log('Hey, this is being run in the context of the webview renderer process');

理想情况下，我将拥有一个单独的JS文件，该文件将充当特定站点的脚本。例如，Google.js可能会自动化Google，而Facebook.js可能会自动化Facebook。例如，Google.js将具有这样的代码：

function loadHomepage () {
webview.loadURL(https://google.com);
}
function clickGoogleSearchButton () {
$('#googleSearchButtonId').click()
}

1。我将如何包含这些各种脚本文件？它们会包含在我的index.html中吗？如果用户单击一个按钮以自动化Google，则如何加载Google的自动化脚本并在WebView上起作用？显然，每个脚本应该可以访问我在渲染文件中创建的WebView变量，以便脚本可以执行WebView.loadurl(...(

之类的事情。

2。理想情况下，用户将选择一个脚本，然后能够启动并停止该脚本。我该如何从index.html文件与所选脚本进行通信？

TL; DR总体，我想完成类似的事情：

- 用户单击一个按钮以选择当前的自动化脚本

- 启动和停止按钮出现

- 用户单击开始按钮

- 所选脚本开始运行，在WebView上执行各种操作

- 用户单击停止，当前脚本已卸载

Answer 1

自从被问到以来已经有一段时间了，但是您需要查看WebView的IPC消息。我让我的预加载脚本在收听各种消息，并根据发送的消息采取操作。这样的东西：

processInboundMessage(data: WebViewMsg) {
    switch (data.operation) {
      case WebViewOperation.GetElementText:
        this.processMessageGetElementText(data);
        break;
      case WebViewOperation.GetSelectedText:
        this.processMessageGetSelectedText(data);
        break;
      case WebViewOperation.SetElementValue:
        this.processMessageSetElementValue(data);
        break;
      case WebViewOperation.TriggerEvent:
        this.processMessageTriggerClick(data);
        break;
      case WebViewOperation.HttpGet:
        this.processMessageHttpGet(data);
        break;
      case WebViewOperation.HttpPost:
        this.processMessageHttpPost(data);
        break;
      case WebViewOperation.GetJsVariableValue:
        this.processMessageGetJsVariableValue(data);
        break;
      case WebViewOperation.AddBorder:
        this.processMessageAddBorder(data);
        break;
      case WebViewOperation.RegisterListener:
        this.processMessageRegisterListener(data);
        break;
    }
  }

完成操作后，预紧脚本会回复主机：

respondToHost(data: WebViewMsg) {
    ipcRenderer.sendToHost(data.returnChannel, data);
  }

其中data是要发送回主机的有效载荷，而data.returnChannel是主机在收到消息时检查的GUID。