如何通过用户脚本/扩展程序实现向社交平台上传图片？

不用依赖外部程序，浏览器扩展本身就有足够权限实现纯内建的图片上传，用户脚本也有适配方案，具体如下：

浏览器扩展方案（推荐，权限充足） #

1. 直接操作DOM模拟文件选择 #

扩展的content script可以直接访问页面DOM，绕过普通网页的限制，核心思路是找到页面隐藏的文件上传输入框，直接给它赋值文件对象：

• 定位目标网站的文件输入框：Twitter的通常是input[type="file"][accept="image/*,video/*"]，Reddit的是input[type="file"]
• 将图片资源（扩展存储、网络请求获取的Blob）转为File对象
• 用DataTransfer构造文件列表，赋值给输入框并触发change事件让页面识别

代码示例：

// 在content script中执行
const fileInput = document.querySelector('input[type="file"][accept*="image"]');
if (!fileInput) return;

// 假设已获取图片Blob（例：从扩展存储读取或网络下载）
const imageBlob = await getImageBlobFromExtension(); 
const imageFile = new File([imageBlob], "post-img.jpg", { type: "image/jpeg" });

// 构造文件列表并赋值
const dataTransfer = new DataTransfer();
dataTransfer.items.add(imageFile);
fileInput.files = dataTransfer.files;

// 触发页面的文件选择事件
fileInput.dispatchEvent(new Event('change', { bubbles: true }));

2. 读取剪贴板图片（若需求是剪贴板上传） #

扩展可申请clipboardRead权限，直接读取剪贴板中的图片：

• 在manifest.json中添加权限："clipboardRead", "activeTab", "https://twitter.com/*", "https://www.reddit.com/*"
• 读取剪贴板并转为File对象后，复用上面的文件输入框赋值逻辑

代码示例：

navigator.clipboard.read().then(items => {
  for (const item of items) {
    if (!item.types.includes('image/png')) continue;
    item.getType('image/png').then(blob => {
      const imageFile = new File([blob], "clipboard-img.png", { type: "image/png" });
      // 后续操作同方案1
    });
  }
});

用户脚本（Tampermonkey/Greasemonkey）方案 #

用户脚本权限略低，但可以通过unsafeWindow操作页面原生对象绕过限制：

// Tampermonkey脚本示例
// 先通过GM_xmlhttpRequest获取图片Blob
GM_xmlhttpRequest({
  url: 'https://your-image-source.com/img.jpg',
  responseType: 'blob',
  onload: function(res) {
    const fileInput = unsafeWindow.document.querySelector('input[type="file"][accept*="image"]');
    if (!fileInput) return;
    
    const imageFile = new File([res.response], "post-img.jpg", { type: "image/jpeg" });
    const dataTransfer = new unsafeWindow.DataTransfer();
    dataTransfer.items.add(imageFile);
    
    fileInput.files = dataTransfer.files;
    fileInput.dispatchEvent(new unsafeWindow.Event('change', { bubbles: true }));
  }
});

关键注意点 #

• 目标网站的DOM结构可能更新，需要定期维护选择器
• 避免高频自动操作，防止触发反机器人机制导致账号受限
• 用户脚本的兼容性不如扩展，部分网站的CSP规则可能会限制操作

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