chrome扩展自动上传图片

目录结构

tree .
.
├── assets
│   ├── logo.png
│   └── upload.png
├── css
│   ├── chunk-vendors.css
│   ├── content.css
│   ├── popup.css
│   └── sidePanel.css
├── favicon.ico
├── index.html
├── js
│   ├── background.js
│   ├── content.js
├── manifest.json
├── options.html
├── popup.html

content.js

// content-script.js
//assets/img.avif是根目录下
async function autoUploadExtensionImage(imagePath = 'assets/upload.png') {
    try {
        // 1. 获取扩展内图片URL
        const imageUrl = chrome.runtime.getURL(imagePath);
        console.log('扩展资源URL:', imageUrl);

        // 2. 直接获取二进制数据
        const response = await fetch(imageUrl);
        if (!response.ok) throw new Error(`HTTP错误: ${response.status}`);

        // 3. 转换为File对象
        const blob = await response.blob();
        const file = new File([blob], 'auto_upload.png', {
            type: blob.type || 'image/png',
            lastModified: Date.now()
        });

        // 4. 执行上传操作
        const input = document.querySelector('input[type="file"]');
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);
        input.files = dataTransfer.files;

        // 5. 触发完整事件链
        ['input', 'change'].forEach(eventType => {
            input.dispatchEvent(new Event(eventType, {bubbles: true}));
        });
    } catch (error) {
        console.error('自动化上传失败:', error);
        throw error;
    }
}