Chrome扩展中Input.dispatchDragEvent无法实现文件拖放问题

核心问题拆解 #

你遇到的报错和页面无响应，主要源于Chrome DevTools Protocol（CDP）Input.dispatchDragEvent参数不符合规范，以及拖放模拟的关键细节缺失，具体如下：

1. 必填字段缺失引发序列化错误 #

报错Failed to deserialize params.data - BINDINGS: mandatory field missing的直接原因是：data参数缺少types数组。CDP要求DragData类型必须声明数据格式，拖放文件时需指定types: ['Files']，否则会触发参数验证失败。

2. 拖放目标坐标不准确 #

固定的x:500, y:500可能未落在页面的拖放区域内（比如elmah.io工具的文件上传框），导致事件未被目标元素捕获，页面自然无响应。

3. 文件拖放的条目结构错误 #

你之前设置的items为text/plain类型，不符合文件拖放的要求。正确的文件条目需要声明kind: 'file'，并匹配文件的MIME类型。

4. 无法传递实际文件内容的限制 #

CDP的Input.dispatchDragEvent无法直接访问本地文件系统，只能模拟文件名的拖放。如果目标页面需要读取文件的二进制内容，这种方法无效，必须在页面上下文内创建File对象并模拟事件。

修正后的代码示例 #

方法一：仅模拟文件名拖放（适用于不需要读取文件内容的场景） #

let tab = {};
tab.id = 1857800479; // 替换为实际tabId

chrome.debugger.attach({ tabId: tab.id }, "1.3", function () {
  chrome.debugger.sendCommand({ tabId: tab.id }, "Input.enable", {}, function () {
    // 定位页面拖放区域（替换为实际选择器，比如elmah.io的.drop-area）
    chrome.debugger.sendCommand({ tabId: tab.id }, "DOM.querySelector", {
      selector: ".drop-area"
    }, function (result) {
      if (!result.nodeId) {
        console.error("未找到拖放目标元素");
        return;
      }

      // 获取拖放区域的中心坐标
      chrome.debugger.sendCommand({ tabId: tab.id }, "DOM.getBoxModel", {
        nodeId: result.nodeId
      }, function (boxModel) {
        const x = boxModel.model.content[0] + (boxModel.model.content[2] - boxModel.model.content[0]) / 2;
        const y = boxModel.model.content[1] + (boxModel.model.content[3] - boxModel.model.content[1]) / 2;

        const baseParams = {
          x,
          y,
          modifiers: 0,
          data: {
            types: ['Files'], // 必填：声明数据类型为文件
            dragOperationsMask: 1, // 允许复制操作（对应数值1）
            items: [{
              kind: 'file',
              mimeType: 'image/jpeg', // 匹配文件的MIME类型
              file: { name: '_6f9cae77-b075-4b9a-b69f-a36fa2683b0b.jpg' }
            }],
            files: ['_6f9cae77-b075-4b9a-b69f-a36fa2683b0b.jpg']
          }
        };

        // 按顺序触发拖放事件
        chrome.debugger.sendCommand({ tabId: tab.id }, 'Input.dispatchDragEvent', {
          ...baseParams, type: 'dragEnter'
        }, function () {
          // 模拟多次dragOver更贴近真实拖拽
          chrome.debugger.sendCommand({ tabId: tab.id }, 'Input.dispatchDragEvent', {
            ...baseParams, type: 'dragOver'
          }, function () {
            setTimeout(() => {
              chrome.debugger.sendCommand({ tabId: tab.id }, 'Input.dispatchDragEvent', {
                ...baseParams, type: 'drop'
              }, function () {
                console.log("拖放事件触发完成");
                chrome.debugger.detach({ tabId: tab.id });
              });
            }, 100);
          });
        });
      });
    });
  });
});

方法二：传递实际文件内容（适用于需要读取文件的场景） #

如果页面需要解析文件内容，必须在页面上下文内创建File对象并模拟拖放：

let tab = {};
tab.id = 1857800479; // 替换为实际tabId

chrome.debugger.attach({ tabId: tab.id }, "1.3", function () {
  // 在页面上下文执行脚本模拟拖放
  chrome.debugger.sendCommand({ tabId: tab.id }, "Runtime.evaluate", {
    expression: `
      // 示例：创建模拟文件（实际场景可替换为真实Blob/File）
      const fileBlob = new Blob(['模拟文件内容'], { type: 'image/jpeg' });
      const targetFile = new File([fileBlob], '_6f9cae77-b075-4b9a-b69f-a36fa2683b0b.jpg', { type: 'image/jpeg' });
      
      // 获取拖放区域元素
      const dropArea = document.querySelector('.drop-area');
      if (!dropArea) {
        console.error("未找到拖放区域");
        return;
      }

      // 创建并配置拖放事件
      const createDragEvent = (type) => {
        const event = new DragEvent(type, { bubbles: true, cancelable: true });
        Object.defineProperty(event, 'dataTransfer', { value: new DataTransfer() });
        return event;
      };

      const dragEnter = createDragEvent('dragenter');
      const dragOver = createDragEvent('dragover');
      const drop = createDragEvent('drop');

      // 添加文件到drop事件的dataTransfer
      drop.dataTransfer.items.add(targetFile);

      // 按顺序触发事件
      dropArea.dispatchEvent(dragEnter);
      dropArea.dispatchEvent(dragOver);
      dropArea.dispatchEvent(drop);
    `
  }, function (result) {
    console.log("页面内拖放模拟完成");
    chrome.debugger.detach({ tabId: tab.id });
  });
});

关键注意事项 #

• 替换代码中的.drop-area为页面实际的拖放区域选择器（可通过Chrome开发者工具查看元素获取）。
• 若使用方法二，需确保能获取到文件的Blob数据（比如通过扩展的文件读取API获取本地文件内容）。
• CDP版本建议使用1.3而非1.2，兼容性更好。

内容的提问来源于stack exchange，提问作者丶 Limeー来夢 丶