如何为WhatsApp网页版机器人添加从URL拉取图片回复的功能？

首先，咱们得先明确两个核心步骤：识别图片指令和实现从指定URL拉取并发送图片。结合你现有代码的结构，我给你整理了具体的修改方案：

1. 新增指令识别逻辑 #

先找到你现有代码里处理@time这类指令的地方（应该是在消息监听或者指令判断的函数里），添加一个新的分支来识别图片指令，比如我们用@schoolpic作为触发指令：

// 假设这是你现有处理指令的函数片段
function handleCommand(message) {
    if (message.includes('@time')) {
        // 原有的时间回复逻辑
        const now = new Date();
        sendMessage(`当前时间：${now.toLocaleString()}`);
    } 
    // 新增图片指令分支
    else if (message.includes('@schoolpic')) {
        // 调用图片发送函数，传入指定图片URL
        sendImageFromUrl('https://www.school.com/pic.jpg');
    }
}

2. 实现图片拉取与发送函数 #

接下来编写sendImageFromUrl函数，这个函数需要完成三个事情：

• 从指定URL拉取图片并转成Blob格式
• 模拟WhatsApp网页版的图片上传流程
• 发送图片消息

async function sendImageFromUrl(imageUrl) {
    try {
        // 1. 拉取图片并转为Blob
        const response = await fetch(imageUrl);
        if (!response.ok) throw new Error(`图片拉取失败：${response.status}`);
        const blob = await response.blob();
        
        // 2. 创建模拟的文件对象
        const file = new File([blob], 'school_pic.jpg', { type: blob.type });
        
        // 3. 找到WhatsApp网页版的文件上传输入框（一般是隐藏的input[type="file"]）
        const fileInput = document.querySelector('input[type="file"][accept="image/*,video/*"]');
        if (!fileInput) throw new Error('未找到文件上传控件');
        
        // 4. 模拟文件上传（需要用DataTransfer来构造文件列表）
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);
        fileInput.files = dataTransfer.files;
        
        // 5. 触发上传事件（WhatsApp会自动处理预览和发送按钮）
        fileInput.dispatchEvent(new Event('change', { bubbles: true }));
        
        // 可选：如果需要自动发送，等待预览加载后点击发送按钮
        setTimeout(() => {
            const sendBtn = document.querySelector('span[data-icon="send"]').parentElement;
            if (sendBtn) sendBtn.click();
        }, 1000); // 延迟1秒确保预览加载完成，可根据实际调整
    } catch (error) {
        console.error('发送图片出错：', error);
        // 出错时可以回复用户提示
        sendMessage('抱歉，图片发送失败了😥');
    }
}

3. 注意事项 #

• DOM选择器兼容性：WhatsApp网页版的DOM结构可能会更新，要确保fileInput和sendBtn的选择器是当前有效的，可以通过浏览器开发者工具查看最新的元素选择器。
• 跨域问题：如果目标图片URL存在跨域限制（没有CORS头），直接用fetch会失败，这时候可以考虑在Tampermonkey脚本里开启@grant GM_xmlhttpRequest来绕过跨域（如果是油猴脚本的话），或者用代理服务器中转。
• 指令自定义：你可以把@schoolpic改成你想要的任何指令，比如@getpic，只要在handleCommand里对应判断就行。

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