Javascript Electron使用多个js脚本自动化webview

我想用Github的Electron创建一个桌面应用程序。本质上，该应用程序将打开外部网页，如google.com，并执行各种自动化任务，如单击、键入等

到目前为止，我的index.html文件有一个带有预加载程序的webview，需要一个渲染器js文件

<webview
id="webview"
preload="./preload.js"
src="https://google.com"></webview>

<script>
require('./renderer');
</script>

这里是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可能使谷歌自动化，而facebook.js可能使facebook自动化。例如，google.js的代码如下所示：

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

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;
    }
  }

一,。如何包含这些不同的脚本文件？它们会包含在我的index.html中吗？如果用户单击一个按钮来自动化google，我如何加载google的自动化脚本并让它在webview上运行？显然，每个脚本都应该可以访问我在render.js文件中创建的webview变量，这样脚本就可以执行webview.loadUrl

二,。理想情况下，用户将选择一个脚本，然后能够启动和停止该脚本。如何准确地从index.html文件与所选脚本进行通信，使其启动/停止

TL；博士，总的来说，我想做到以下几点：

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

-此时会出现开始和停止按钮

-用户单击开始按钮

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

---

-用户单击“停止”，当前脚本将被卸载

自提出此问题以来已经有一段时间了，但您需要查看发送到webview的IPC消息。我让我的预加载脚本监听各种消息，并根据发送的消息采取行动。大概是这样的：

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

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

嗯,

TTE