如何通过Chrome扩展在ChatGPT左侧菜单栏注入自定义链接

核心问题 #

1. DOM加载时机不匹配：ChatGPT是单页应用，DOMContentLoaded触发时，左侧导航栏可能还未完成异步渲染，导致选择器无法定位目标元素。
2. 选择器过于脆弱：依赖深层嵌套的静态DOM路径，ChatGPT更新页面结构时会直接失效。
3. 样式与插入逻辑问题：仅添加nav-item类无法匹配原生导航项的完整样式，插入位置的逻辑也存在偏差。

修正后的代码 #

manifest.json（保持原配置即可） #

{
  "name": "Auto Snippet AI",
  "version": "1.0",
  "description": "Inject a URL called 'https://autosnippet.ai/' to the left navigation bar of 'https://chat.openai.com/'",
  "manifest_version": 3,
  "permissions": [
    "activeTab",
    "tabs"
  ],
  "icons": {
    "16": "icon.png",
    "32": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "content_scripts": [
    {
      "js": [
        "content.js"
      ],
      "matches": [
        "https://chat.openai.com/*"
      ]
    }
  ]
}

content.js（关键修改） #

// 监听目标元素的出现，适配异步渲染
function waitForElement(selector, callback) {
  const observer = new MutationObserver((mutations) => {
    const element = document.querySelector(selector);
    if (element) {
      observer.disconnect();
      callback(element);
    }
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

// 插入自定义导航项
function insertCustomNavItem(navContainer) {
  // 避免重复插入
  if (document.querySelector('#auto-snippet-ai-link')) return;

  // 创建匹配原生风格的链接元素
  const link = document.createElement('a');
  link.id = 'auto-snippet-ai-link';
  // 复制ChatGPT原生导航项的类名，保证样式一致
  link.className = 'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors hover:bg-gray-800 dark:hover:bg-gray-700 md:hover:bg-transparent md:border-l-2 md:border-transparent md:px-2 md:hover:border-white/20';
  link.href = 'https://autosnippet.ai/';
  link.target = '_blank';
  link.rel = 'noopener noreferrer';

  // 图标容器（模拟原生结构）
  const iconWrapper = document.createElement('div');
  iconWrapper.className = 'flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-gray-800 text-gray-200';
  iconWrapper.textContent = 'AS';

  // 文本容器
  const textWrapper = document.createElement('div');
  textWrapper.className = 'truncate';
  textWrapper.textContent = 'Auto Snippet AI';

  // 组装元素
  link.appendChild(iconWrapper);
  link.appendChild(textWrapper);

  // 插入到"New chat"按钮之前，贴合原生布局逻辑
  const newChatBtn = navContainer.querySelector('button[data-testid="new-chat"]');
  if (newChatBtn) {
    navContainer.insertBefore(link, newChatBtn);
  } else {
    navContainer.appendChild(link);
  }
}

// 启动监听：用role属性定位导航容器，更稳定
waitForElement('nav[role="navigation"]', insertCustomNavItem);

关键改进点 #

• MutationObserver监听：确保导航栏渲染完成后再执行插入，适配单页应用的异步加载特性。
• 稳定选择器：通过nav[role="navigation"]定位容器，避免依赖易变的DOM嵌套路径。
• 原生样式匹配：复制原生导航项的类名，保证新链接视觉风格与页面统一。
• 防重复注入：通过唯一ID判断元素是否存在，避免多次插入。
• 安全性优化：添加noopener noreferrer属性，防止外部页面篡改当前上下文。

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