Chrome扩展中触发Drop事件异常：修改文件列表后文件无法附着

你的当前实现存在核心问题：手动构造的DropEvent和DataTransfer对象无法完全模拟浏览器原生事件的内部状态与上下文，多数网站的文件上传逻辑会依赖原生事件的隐性属性（如事件触发的DOM节点、内部权限标记等），导致自定义事件无法被站点识别。此外，你直接阻断了原事件的传播与默认行为，丢失了触发场景的上下文信息。

以下是两种可行的实现方案：

方案一：直接修改原事件的DataTransfer（推荐） #

无需将文件发送到background再触发新事件，在内容脚本中直接拦截并修改原事件的DataTransfer即可，保留原生事件的上下文：

// 内容脚本中监听drop事件
document.addEventListener('drop', function(e) {
    // 收集原文件列表
    const originalFiles = Array.from(e.dataTransfer.files);
    
    // 这里执行你的文件分析/修改逻辑，示例：过滤大于1MB的文件
    const modifiedFiles = originalFiles.filter(file => file.size <= 1024 * 1024);
    
    // 清空原DataTransfer内容
    e.dataTransfer.clearData();
    
    // 将修改后的文件添加回DataTransfer
    modifiedFiles.forEach(file => {
        e.dataTransfer.items.add(file);
    });
    
    // 不要调用preventDefault/stopPropagation，让原事件继续执行
});

如果必须在background中处理文件，可先异步发送请求，待处理完成后再放行原事件：

document.addEventListener('drop', async function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    const originalFiles = Array.from(e.dataTransfer.files);
    
    // 发送文件到background处理
    const modifiedFiles = await new Promise(resolve => {
        chrome.runtime.sendMessage({
            type: 'processFiles',
            files: originalFiles.map(f => ({name: f.name, type: f.type, size: f.size}))
        }, res => resolve(res.modifiedFiles));
    });
    
    // 重新填充DataTransfer
    e.dataTransfer.clearData();
    modifiedFiles.forEach(file => {
        // 注意：如果需要传递文件内容，需提前在background中处理为ArrayBuffer再返回
        e.dataTransfer.items.add(new File([file.content], file.name, {type: file.type}));
    });
    
    // 重新触发原事件的默认行为（或直接调用目标元素的上传逻辑）
    e.target.dispatchEvent(new DragEvent('drop', {
        bubbles: true,
        cancelable: true,
        dataTransfer: e.dataTransfer,
        clientX: e.clientX,
        clientY: e.clientY
    }));
});

方案二：在页面上下文注入脚本触发事件 #

由于内容脚本与页面JS上下文隔离，直接触发的事件可能无法被页面监听器捕获，需将事件触发逻辑注入到页面上下文执行：

// 内容脚本
document.addEventListener('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    const files = Array.from(e.dataTransfer.files);
    
    // 发送到background处理
    chrome.runtime.sendMessage({type: 'processFiles', files: files}, function(response) {
        const modifiedFiles = response.modifiedFiles;
        
        // 向页面注入脚本，在页面上下文触发事件
        const injectScript = document.createElement('script');
        injectScript.textContent = `
            const dt = new DataTransfer();
            ${modifiedFiles.map(file => `
                dt.items.add(new File([Uint8Array.from('${file.content}')], '${file.name}', {type: '${file.type}'}));
            `).join('')}
            
            const dropEvent = new DragEvent('drop', {
                bubbles: true,
                cancelable: true,
                dataTransfer: dt,
                clientX: ${e.clientX},
                clientY: ${e.clientY},
                target: ${JSON.stringify(e.target.tagName)}
            });
            
            document.querySelector('${e.target.tagName}').dispatchEvent(dropEvent);
        `;
        document.head.appendChild(injectScript);
        injectScript.remove();
    });
});

// background.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.type === 'processFiles') {
        // 执行文件处理逻辑，示例：重命名文件
        const modifiedFiles = request.files.map(file => ({
            name: `processed_${file.name}`,
            type: file.type,
            content: Array.from(new TextEncoder().encode('modified content')) // 示例内容，实际需处理原文件
        }));
        sendResponse({modifiedFiles: modifiedFiles});
    }
});

关键注意事项 #

• DataTransfer的files属性是只读的，必须通过dataTransfer.items.add()方法添加文件。
• 触发新事件时，需复制原事件的关键属性（如clientX、clientY、target），模拟原生事件的触发场景。
• 若处理二进制文件，需在background中通过FileReader读取文件内容为ArrayBuffer，再传递回内容脚本重新构造File对象。

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