Chat2File-Gemini/offscreen.js at master · severus98/Chat2File-Gemini · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
// Chat2File-Gemini - Offscreen Document Handler
// 处理图片导出等需要离屏渲染的任务

console.log('[Chat2File-Gemini] Offscreen 文档已加载');

// 监听来自 background script 的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    console.log('[Chat2File-Gemini] Offscreen 收到消息:', request.target, request.job?.type);

    // 处理图片导出任务
    if (request.target === 'offscreen-image' && request.job) {
        handleImageExport(request.job)
            .then(result => sendResponse(result))
            .catch(err => sendResponse({ success: false, error: err.message }));
        return true; // 异步响应
    }

    return false;
});

// ============================================
// 图片导出处理
// ============================================
async function handleImageExport(job) {
    const { type, html, options } = job;

    console.log('[Chat2File-Gemini] 开始处理图片导出:', type);

    switch (type) {
        case 'exportToPng':
            return exportToPng(html, options);
        case 'exportToCreativeImage':
            return exportToCreativeImage(html, options);
        default:
            return { success: false, error: '未知的导出类型: ' + type };
    }
}

// 导出为 PNG
async function exportToPng(html, options = {}) {
    if (typeof html2canvas === 'undefined') {
        await loadHtml2Canvas();
    }

    return new Promise((resolve, reject) => {
        try {
            // 创建临时容器
            const container = document.createElement('div');
            container.innerHTML = html;
            container.style.cssText = 'position:absolute;left:-9999px;top:-9999px;width:800px;';
            document.body.appendChild(container);

            html2canvas(container, {
                backgroundColor: options.backgroundColor || '#ffffff',
                scale: options.scale || 2,
                logging: false,
                useCORS: true,
                allowTaint: true
            }).then(canvas => {
                document.body.removeChild(container);

                canvas.toBlob(blob => {
                    if (blob) {
                        resolve({
                            success: true,
                            blob: blob,
                            filename: `gemini-${Date.now()}.png`
                        });
                    } else {
                        reject(new Error('Canvas 导出失败'));
                    }
                }, 'image/png');
            }).catch(err => {
                document.body.removeChild(container);
                reject(err);
            });
        } catch (err) {
            reject(err);
        }
    });
}

// 导出为创意图片
async function exportToCreativeImage(html, options = {}) {
    // 创意图片导出 - 添加更多样式处理
    if (typeof html2canvas === 'undefined') {
        await loadHtml2Canvas();
    }

    const styledHtml = `
        <div style="padding: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 400px;">
            <div style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.2);">
                ${html}
            </div>
        </div>
    `;

    return exportToPng(styledHtml, { ...options, backgroundColor: null });
}

// 加载 html2canvas
function loadHtml2Canvas() {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js';
        script.onload = resolve;
        script.onerror = () => reject(new Error('无法加载 html2canvas'));
        document.head.appendChild(script);
    });
}

console.log('[Chat2File-Gemini] Offscreen 初始化完成');