开发可从URL上传图片至input:file的Chrome扩展实现代码

核心实现原理 #

浏览器出于安全机制限制，不允许脚本直接给input[type="file"]的files属性赋值自定义值，必须通过标准的DataTransferAPI构造符合W3C规范的FileList对象完成填充，整个流程不需要修改页面原生的上传交互逻辑。

分步实现逻辑 #

• 定位目标页面上已知的input[type="file"]DOM节点，提前校验元素类型是否符合文件上传的基本要求
• 通过fetch请求拉取远程图片的二进制资源，转换为Blob格式对象
• 基于Blob对象构造标准File实例，匹配对应图片类型的MIME值、合理的文件名称
• 初始化DataTransfer实例，将File对象写入实例的内置文件列表
• 将DataTransfer生成的FileList赋值给目标input的files属性，触发原生冒泡事件，让页面内置的上传逻辑正常捕获到文件变更动作

完整可运行实现代码 #

/**
 * 将指定URL的远程图片填充到目标文件上传input
 * @param {HTMLInputElement} targetFileInput 已知的文件类型input元素
 * @param {string} imageUrl 远程图片资源地址
 */
async function uploadImageFromUrlToInput(targetFileInput, imageUrl) {
  // 前置元素合法性校验
  if (targetFileInput?.type !== 'file') {
    throw new Error('目标元素不是合法的文件上传输入框');
  }

  // 拉取远程图片二进制资源
  const fetchResult = await fetch(imageUrl, {
    mode: 'cors',
    credentials: 'same-origin'
  });
  if (!fetchResult.ok) {
    throw new Error(`远程图片拉取失败，HTTP状态码：${fetchResult.status}`);
  }
  const imageBlob = await fetchResult.blob();

  // 从URL路径解析生成合规文件名
  const urlPathSegments = new URL(imageUrl).pathname.split('/');
  const fileName = urlPathSegments.at(-1) || `remote-image-${Date.now()}.png`;

  // 构造符合浏览器规范的File对象
  const remoteImageFile = new File([imageBlob], fileName, {
    type: imageBlob.type,
    lastModified: Date.now()
  });

  // 构造合法的文件列表
  const transferInstance = new DataTransfer();
  transferInstance.items.add(remoteImageFile);

  // 完成input的文件属性赋值
  targetFileInput.files = transferInstance.files;

  // 触发原生事件通知页面上传逻辑
  targetFileInput.dispatchEvent(new Event('change', { bubbles: true }));
  // 兼容监听input事件的老旧页面
  targetFileInput.dispatchEvent(new Event('input', { bubbles: true }));
}

落地适配说明 #

• 权限配置：在Chrome扩展的manifest配置文件中，需要将远程图片所在的域名加入主机权限列表，否则跨域请求会被浏览器拦截，无法获取图片二进制内容
• 类型匹配：如果目标input的accept属性限定了可上传的图片类型，需要保证构造File对象的MIME类型和要求匹配，避免被页面脚本拦截
• 多文件兼容：如果目标input支持多文件上传，只需在DataTransfer实例中追加多个File对象即可，核心逻辑不需要调整
• 大文件适配：单张图片体积较大时，需要增加加载状态提示，避免拉取过程中页面无反馈

内容的提问来源于stack exchange，提问作者Aleksandr Galkin