使用Chrome扩展程序更改输入URL，而不是用户选择的图像文件

Question

我正在开发扩展程序，该扩展程序会自动从网站获取信息，并使用表单打开另一个网站，并用原始网站的信息填充它。到目前为止，它可以正常工作，但我也想自动将图像从原始网站上载到具有表单的网站。

具有表单的网站中有此HTML元素：

<div id="input_area">
   <input type="file" accept="image/*" name="image" size="20" id="image" 
   onchange="blocket.apps.newad.click_extra_images(this);" style="left: -154px; top: 16px;">
</div>

单击时会触发文件选择器，您可以在其中选择图像文件。我打算跳过整个文件选择器，而是尝试从URL上传图像，因为可以很容易地从原始网站上找到URL作为图像。我也试图通过直接从URL而不是用户计算机上载图像来避免隐私和安全问题。

这有可能吗？包含表单的页面为https://www2.tori.fi/ai/form/1?ca=16。只需在首页（在KOKO TORI下）中选择第一个选项即可进入表格。在那里，您应该找到该元素。

https://imgur.com/a/jyb4nBE

感谢您的知识和努力！ <3

---

编辑：

我设法将输入类型编辑为“隐藏”，并在上传之前更改输入的值（导致错误）。可以使用以下方式手动触发上载：

var event = new Event('change');
document.getElementById("image").dispatchEvent(event);

但是我找不到附加网址进行上传的方法。我也读过有关“斑点”的文章。 Blob显然是从URL提取数据的方法。但是我不知道如何将blob（或文件）附加到该输入。我也尝试将URL作为上载的值，但这会导致页面错误。

Answer 1

这个问题不是很笼统，但是您不应尝试在用户上传图像时而是在您上传之后，获取图像地址。

随着上载后整个页面的重新加载，您可以尝试查看元素“ img_0”（img_1，img_2 ...等）是否存在。然后保存源代码或下载文件。

if(document.getElementById("img_0")) {
   var image_url = document.getElementById("img_0").src;
   saveImageURL2DB(image_url);
}

您必须对实际网址进行一些调整，因为它们使用了大量重定向。实际的图像缩略图类似于此url

<img id="img_0" src="https://img.tori.fi/image/thumbs/30/100001.jpg" alt="">

重定向到该URL（图像文件名保持不变）

https://images.tori.fi/api/v1/imagestori/images/100001.jpg?rule=thumbs

并且您可以通过这些URL获得中等或完整的图像

https://images.tori.fi/api/v1/imagestori/images/100001.jpg?rule=medium_660
https://images.tori.fi/api/v1/imagestori/images/100001.jpg?rule=big

它认为数据库中的Blob数据类型与此无关，除非您要将实际的图像文件保存到数据库中（而不是仅使用tori.fi的图像文件。