如何通过Chrome扩展脚本自动向HTML文件选择器传入图片批量填充论坛表单？

浏览器出于安全限制，不允许脚本直接设置input[type=file]的value属性，必须通过File API模拟文件选择流程。以下是针对不同图片来源的实现方案，以及批量提交的优化建议：

核心实现思路 #

1. 将JSON中的图片源（Base64、远程URL、本地文件）转换为File对象
2. 通过DataTransfer接口将File对象赋值给文件输入框的files属性

场景1：JSON存储图片Base64编码 #

如果你的JSON中保存的是图片的Base64编码字符串，可以直接解析并创建File对象：

function pasteData(json) {
  // 填充文本字段
  const name = document.querySelector("#name");
  const description = document.querySelector("#description");
  const mediaInput = document.querySelector("#media");

  name.value = json.name;
  description.value = json.description;

  // 处理Base64格式图片
  if (json.imageBase64) {
    // 分离MIME类型和Base64数据
    const [mimeInfo, base64Data] = json.imageBase64.split(',');
    const mimeType = mimeInfo.match(/:(.*?);/)[1];
    // 解码Base64为二进制数据
    const byteString = atob(base64Data);
    const arrayBuffer = new ArrayBuffer(byteString.length);
    const uint8Array = new Uint8Array(arrayBuffer);

    for (let i = 0; i < byteString.length; i++) {
      uint8Array[i] = byteString.charCodeAt(i);
    }

    // 创建File对象
    const imageFile = new File([arrayBuffer], json.imageFileName || 'uploaded-image.png', { type: mimeType });
    // 赋值给文件输入框
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(imageFile);
    mediaInput.files = dataTransfer.files;
  }
}

场景2：JSON存储图片远程URL #

如果JSON中是图片的在线URL，先通过fetch下载图片为Blob，再转为File对象：

async function pasteData(json) {
  // 填充文本字段
  const name = document.querySelector("#name");
  const description = document.querySelector("#description");
  const mediaInput = document.querySelector("#media");

  name.value = json.name;
  description.value = json.description;

  // 处理远程URL图片
  if (json.imageUrl) {
    try {
      // 下载图片为Blob
      const response = await fetch(json.imageUrl);
      const blob = await response.blob();
      // 创建File对象
      const imageFile = new File([blob], json.imageFileName || 'remote-image.jpg', { type: blob.type });
      // 赋值给文件输入框
      const dataTransfer = new DataTransfer();
      dataTransfer.items.add(imageFile);
      mediaInput.files = dataTransfer.files;
    } catch (err) {
      console.error('图片下载失败:', err);
    }
  }
}

场景3：JSON存储本地文件路径（仅本地环境可用） #

浏览器默认禁止脚本直接访问本地文件，此方案仅适用于Electron、允许file://访问的浏览器环境：

async function pasteData(json) {
  // 填充文本字段
  const name = document.querySelector("#name");
  const description = document.querySelector("#description");
  const mediaInput = document.querySelector("#media");

  name.value = json.name;
  description.value = json.description;

  // 处理本地文件路径
  if (json.imagePath) {
    try {
      // 通过FileSystem API获取文件句柄
      const fileHandle = await window.showOpenFilePicker({
        startIn: 'pictures',
        suggestedName: json.imagePath.split('/').pop()
      });
      const imageFile = await fileHandle[0].getFile();
      // 赋值给文件输入框
      const dataTransfer = new DataTransfer();
      dataTransfer.items.add(imageFile);
      mediaInput.files = dataTransfer.files;
    } catch (err) {
      console.error('本地文件读取失败:', err);
    }
  }
}

批量提交优化建议 #

针对数千条数据的批量提交，需注意避免触发反爬机制：

// 假设dataArray是你的JSON数据数组
const dataArray = [/* 批量数据 */];

async function batchSubmit() {
  for (let i = 0; i < dataArray.length; i++) {
    const item = dataArray[i];
    // 填充当前数据
    await pasteData(item);
    // 提交表单
    document.querySelector("#form").submit();
    // 添加延迟，避免请求过于频繁（可根据论坛限制调整）
    await new Promise(resolve => setTimeout(resolve, 2000));
    // 重置表单，清理上一次的文件数据
    document.querySelector("#form").reset();
  }
}

// 启动批量提交
batchSubmit();

内容的提问来源于stack exchange，提问作者Ali Iftikhar