ChatGPT Firefox上传插件因版本更新失效，请求定位新选择器

问题背景 #

我开发的Firefox插件用于给chat.openai.com添加「上传文件」按钮，自5月24日ChatGPT版本更新后完全失效，确认问题出在按钮插入位置的选择器上，此前使用的选择器代码如下：

// Function to inject the button
function injectButton() {
  // Find the target element
  const targetElement = document.querySelector("div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.absolute.bottom-0 > form > div > div:nth-child(1)");

解决方案 #

1. 定位新选择器的方法 #

• 打开chat.openai.com，右键点击输入框附近要插入按钮的位置，选择「检查」打开开发者工具
• 在Elements面板中，优先选择带有data-testid属性、语义化ID或稳定类名的元素作为定位目标，避免依赖动态生成的短类名（这类通常会随版本更新变化）
• 比如当前ChatGPT的输入表单带有data-testid="conversation-turn-input-form"属性，可基于这个表单元素定位子容器

2. 替换选择器示例 #

尝试使用更稳定的选择器替换原有代码，比如：

const targetElement = document.querySelector('form[data-testid="conversation-turn-input-form"] > div:nth-child(1)');

或者定位到输入框的直接父容器：

const targetElement = document.querySelector('div.flex.items-center.gap-2.flex-wrap');

注：实际需根据当前ChatGPT的DOM结构调整，建议在开发者工具中实时验证选择器是否有效

3. 额外优化建议 #

• 配置MutationObserver监听DOM变化，因为ChatGPT是单页应用，页面内容会动态加载，确保DOM更新后按钮能重新注入
• 尽量缩短选择器层级，优先使用属性选择器（如data-testid），这类属性的稳定性远高于动态类名

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