Angular开发Chrome扩展：Facebook自动发帖图片上传问题及解决

我用Angular开发了一款Chrome扩展，需求是进入Facebook网站时自动创建新帖子。但遇到了一个问题：通过JavaScript给文件输入框填充图片后，虽然files属性已经正确赋值，但Facebook无法识别并显示图片，还会触发必填字段的错误提示。

初始代码 #

const inputElement = document.querySelector('input[accept="image/*,image/heif,image/heic"]') as HTMLInputElement;

console.log(inputElement.files);

const imageUrl = 'https://firebasestorage.googleapis.com/v0/b/ssrtest-cebd9.appspot.com/o/temp_fb_test%2F360_image_number_21.jpg?alt=media&';

fetch(imageUrl)
    .then(response => response.blob())
    .then(blob => {
        const file = new File([blob], 'myimage.jpg', { type: blob.type });

        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);

        const fileList = dataTransfer.files;

        inputElement.files = fileList;
        const changeEvent = new Event('change');
        const inputEvent = new Event('input');
        inputElement.dispatchEvent(changeEvent);
        inputElement.dispatchEvent(inputEvent);
    });

问题原因 #

初始代码只触发了change和input事件，但Facebook的页面逻辑依赖更多用户交互相关的事件来识别文件上传操作，仅这两个事件无法完全模拟手动上传的完整流程。

解决方法 #

需要模拟手动上传图片时触发的完整事件序列，包括focus、blur事件，并且确保事件支持冒泡（匹配原生事件的行为）。修改后的代码如下：

fetch(imageUrl)
    .then(response => response.blob())
    .then(blob => {
        const file = new File([blob], 'myimage.jpg', { type: blob.type });
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);
        const fileList = dataTransfer.files;
        inputElement.files = fileList;

        const eventNames = ['change', 'input', 'blur', 'focus'];
        eventNames.forEach(eventName => {
            const event = new Event(eventName, { bubbles: true });
            inputElement.dispatchEvent(event);
        });
    });

通过添加focus和blur事件，并设置bubbles: true让事件冒泡，完全模拟了手动上传时的交互事件流，Facebook的页面逻辑就能正确识别上传的图片，不再触发错误提示。

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