具有多个 js 脚本的电子自动化 webview答案

【问题标题】：Electron automating webview with multiple js scripts具有多个 js 脚本的电子自动化 webview
【发布时间】：2017-11-04 16:40:31
【问题描述】：

我想使用 Github 的 Electron 创建一个桌面应用程序。本质上，该应用将打开外部网页，例如 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 上起作用？每个脚本显然应该可以访问我在 render.js 文件中创建的 webview 变量，以便脚本可以执行 webview.loadUrl(...)

之类的操作

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

TL;DR 总的来说，我想完成这样的事情：

-用户点击按钮选择当前自动化脚本

-出现开始和停止按钮

-用户点击开始按钮

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

-用户点击停止，当前脚本被卸载

【问题讨论】：

标签： javascript webview automation electron

【解决方案1】：

这个问题已经有一段时间了，但您需要查看网络视图的 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。

【讨论】：