通过命令行或本地脚本与浏览器 JavaScript 交互？答案

【问题标题】：Interact with browser JavaScript via command line or local script?通过命令行或本地脚本与浏览器 JavaScript 交互？
【发布时间】：2020-03-01 01:29:26
【问题描述】：

我们提供类似于 imagemagick 的浏览器页面 JavaScript，可帮助人们将图像转换为不同的大小和格式。但是，它需要网页交互。

是否可以让人们自动化这种交互 - 无需将图像发送到我们的服务器（从而增加带宽成本和服务器负载）并且无需用户下载像 Puppeteer 这样的无头浏览器库？

例如，以下流程是否可行：

通过命令行（或本地脚本）打开 Chrome 到特定网页。
将图片上传到该网页。
在网页上调用脚本。
接收脚本结果并允许进行本地操作。

启动 Chrome 是可能的，但尚不清楚启动后是否可以与特定浏览器窗口进行交互。

【问题讨论】：

@Bauke 抱歉，将修改并澄清问题。需要在客户端发生，而不期望用户可以/将下载额外的脚本。
您能补充更多信息吗？您要达到的目标非常不清楚。在我看来，您正在尝试创建一个浏览器扩展来转换图像？
@Nicolas 很抱歉造成混乱。不，不是浏览器扩展。目标是让开发人员在最小化我们的服务器/带宽负载的同时加入这个脚本。例如，一种方法是将此浏览器 JavaScript 移植到服务器并通过 API 公开它，但这意味着我们的服务器在每次转换时都会受到打击。理想情况下，我们允许用户使用此脚本，同时以某种方式绕过我们的服务器（超出页面加载）。
挂钩到这个脚本的上下文是什么，它是一个网页，我们是否通过script标签导入它？
理想的上下文如问题中所述，但从概念上讲，目标是让开发人员重用此图像代码（因此他们不需要编写自己的代码或处理 imagemagick）而不会给我们带来负担如果服务器实现了概念目标，请随意建议其他上下文。 @尼古拉斯

标签： javascript google-chrome firefox browser-automation offline-mode

【解决方案1】：

在技术上应该可以实现自动化，但远非简单。

您的问题可以分为两部分：离线处理和上传自动化。

离线处理

假设您的图像处理代码完全是在浏览器中的 JavaScript（而不是例如调用本地库的模块化节点程序），则可以在浏览器中完成所有处理。

文件“上传”可以read、已处理和downloaded，无需向服务器发送任何内容。处理甚至可能发生在 background thread 中，保持 UI 响应，例如漂亮的进度条。

代码本身可以使用Service Worker 或静态html + javascript 在线托管。一旦访问或部署，两者都可以离线打开和执行。（请注意，Chrome 严格限制静态 html，包括对网络工作者的严格限制。 Google 希望您保持在线状态。）

上传自动化

如上所述，通过文件输入选择或放入浏览器的文件可以通过页面内 JavaScript 读取，但我将继续将其称为传统上的“上传”动作。

Chrome 有一些自动化扩展，最著名的是 Kantu，但由于 Chrome 的 security restriction，它们无法处理文件上传。

所以，如果你想自动化文件选择，你需要使用原生的、浏览器外的自动化工具，比如 Kantu 的 XModules、AutoHotkey 或 SikuliX。存在商业解决方案，但考虑到您对无头浏览器的特殊要求，存在类似的限制。

AutoHotkey 将专注于模拟键盘（打开浏览器，等待 5 秒，按 Tab 10 次，回车，等待 2 秒，输入文件名，回车，等等），并且可以编译成一个可部署的 exe。
Sikulix 更强大，但也更难分发；只是 java 运行时比浏览器大。
Kantu + XModules 介于两者之间。用户需要安装浏览器扩展，和它的原生扩展，但是一旦完成，一切都会在浏览器中发生（或多或少）。

所有三种方法都涉及模拟键入文件名，因为据我所知，没有更简单的方法可以在用户启动（非无头）Chrome 中实现自动化。

图像文件的名称可以作为参数传递给 AutoHotkey 和 Sikulix 的命令行，或者存储在文件中并在 Kantu 的情况下由脚本读取。

在所有这三种情况下，自动化都会模拟用户，而现实生活中的用户在脚本运行时不得触摸计算机，否则自动化将中断。

命令行呢？

或者，如果您的目标是自动化而不部署浏览器，您可以考虑将其制作为命令行 node.js 程序，并将其打包为 exe。

distributable 会比编译好的 AutoHotkey 重，但移动部件少得多，因此更可靠：

独立于 Chrome 版本或 XModules 的存在。
所有处理都在自己的进程中进行，而不是劫持用户的 Chrome。
可以无头执行，对自动化非常重要。
灵活的命令行参数。

但我喜欢浏览器自动化，它如此简单

再想一想。

根据我的经验，很多事情会导致浏览器/GUI 自动化关闭：

不寻常的屏幕分辨率、浏览器缩放、操作系统缩放或上次记忆的 Chrome 尺寸会使您的页面变形而无法识别。
更改页面元素的浏览器扩展程序，例如广告拦截器。
IME 和其他使用热键拦截键盘输入的程序。
弹出式程序，例如防病毒、Windows 更新或插入 CD。
意外锁定、睡眠、注销、键留在键盘上或电源中断。
或者是一个简单的 Chrome 更新，它破坏了您所依赖的 100 项中的任何一项。

所以，是的，这就是为什么计算机自动化最好在无头模式下完成的原因。

我的代码安全吗？

如果您担心脚本的安全性，请不要担心。当您希望处理发生在客户端的那一刻，猫就出来了。

从技术上讲，您的代码受版权保护。但祝你好运。如果你想让你的代码不被提取/解密/unobfucation/whatever（咳嗽），你需要把它保持在一个在线黑盒，没有客户端处理。

【讨论】：

非常感谢！不担心代码被盗，只想在不增加服务器/带宽成本（除了加载页面之外）的情况下提供此服务，并且比发布代码开源更容易使用。不幸的是，这听起来不太可能，因为您的解决方案需要额外的下载。一旦页面被加载，只要有某种方式与页面 javascript 交互，该服务理论上应该可以离线工作。
@Crashalot 客户端处理在您的情况下似乎很容易。这是有问题的上传要求。经过数十年的滥用，浏览器现在非常安全，因此无法从浏览器中读取本地图像文件（或跨站点图像）。 Chrome 正在试验Native File System API，但我认为这是一个非常高风险的功能，所以我建议不要依赖它。还有Chrome App，但是我缺乏经验。
是的，客户端处理很容易。诀窍是在不产生带宽成本的情况下传输原始图像和转换后的图像。如果你想到别的东西，请分享。否则，感谢您迄今为止的帮助！
@Crashalot 抱歉，我们似乎使用了不同的术语。假设您的代码是 JavaScript，在浏览器中执行它们很容易，几乎是微不足道的。这个data uri converter 就是一个例子。我的答案有链接到离线处理部分中的读取和输出文件，只要文件由用户加载和保存。这是你想做的吗？
是的，代码在 JS 中，而且很简单。不幸的是，不同平台都有调整大小的需求，开发人员经常自己编写这些琐碎的代码。这只是一个没有人应该处理的烦恼，所以我们希望免费提供我们的版本作为服务，这样人们就可以专注于重要的代码。一种选择是开源代码，但我们想让它变得更简单并提供服务，这样人们就不需要处理更新或安装代码。挑战不是受到带宽费用的影响。

【解决方案2】：

围绕您的网络应用构建的一种方法是：

1) 将 console.log 重定向到标准输出（参见此处：In Chrome, how can I get the javascript console output to stdout/stderr），可能带有适当的 --log-level 标志和重定向到其他地方的错误消息，所以一些随机消息不会破坏整个事情，

2) 从脚本级别，而不是 / 除了保存结果文件，console.log 它在 Base64 中，

3) 并从 CLI 端使用管道，使 Base64 成为正确的文件（以及任何其他处理）。

【讨论】：

这很有趣。你以前试过这个吗？这种方法没有问题或潜在问题？
不，只是我在胡思乱想。
我明白了。这是一个聪明的主意。 :) 您是否看到绕过服务器将图像上传到网页的方法？在 curl 命令中发布图像是可行的，但它会导致我们产生带宽费用。

【解决方案3】：

这一切都可以通过 PowerShell 实现。使用 Powershell，您可以打开浏览器（使用 Powershell IE 会更容易，因为它自然受支持）。您可以打开网页、填写表格、下载或上传数据、获取对象、检查等。

访问下方webpage了解更多详情：

希望这会有所帮助。

【讨论】：