自定义网站Google Translate按钮语言列表，添加“更多”按钮

嘿，我来帮你搞定这个自定义语言列表的需求！Google翻译官方的Element组件本身没有直接支持这种「常用+更多」的布局，不过我们可以通过DOM监听+手动修改菜单结构来实现，具体方案如下：

核心思路 #

1. 先让Google翻译加载全部语言选项
2. 用MutationObserver监听翻译菜单的异步渲染（因为Google的脚本是动态生成DOM的）
3. 把语言选项分成「常用语言」和「其他语言」两组
4. 重新构建菜单：先展示常用语言，再加一个「更多」按钮，点击后展开剩余语言

完整实现代码 #

<div id="google_translate_element5"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  // 初始化翻译元素，不限制语言（让Google加载所有语言选项）
  new google.translate.TranslateElement({
    pageLanguage: 'zh-CN', // 替换成你的页面默认语言
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element5');

  // 监听翻译菜单的DOM变化，确保菜单加载完成后再修改
  const observer = new MutationObserver((mutations) => {
    const languageMenuFrame = document.querySelector('.goog-te-menu-frame');
    if (languageMenuFrame && languageMenuFrame.contentDocument) {
      const menuContent = languageMenuFrame.contentDocument.querySelector('.goog-te-menu2');
      // 只处理一次，避免重复修改菜单
      if (menuContent && !menuContent.querySelector('.more-languages-btn')) {
        observer.disconnect();
        
        // --------------------------
        // 1. 定义你的常用语言列表（用语言代码）
        // --------------------------
        const commonLangCodes = ['zh-CN', 'en', 'ja', 'ko', 'fr', 'de'];
        const allMenuItems = Array.from(menuContent.children);

        // --------------------------
        // 2. 分离常用语言和其他语言
        // --------------------------
        const commonItems = [];
        const moreItems = [];
        allMenuItems.forEach(item => {
          const langCode = item.querySelector('.goog-te-menu2-item-span')?.getAttribute('lang');
          if (commonLangCodes.includes(langCode)) {
            commonItems.push(item);
          } else {
            moreItems.push(item);
          }
        });

        // --------------------------
        // 3. 重新构建菜单结构
        // --------------------------
        // 清空原有菜单
        menuContent.innerHTML = '';
        // 添加常用语言选项
        commonItems.forEach(item => menuContent.appendChild(item));

        // 添加「更多语言」按钮
        const moreBtn = document.createElement('div');
        moreBtn.className = 'goog-te-menu2-item more-languages-btn';
        moreBtn.textContent = '更多语言';
        moreBtn.style.cursor = 'pointer';
        menuContent.appendChild(moreBtn);

        // 创建隐藏的「更多语言」容器
        const moreContainer = document.createElement('div');
        moreContainer.className = 'more-languages-container';
        moreContainer.style.display = 'none';
        moreItems.forEach(item => moreContainer.appendChild(item));
        menuContent.appendChild(moreContainer);

        // --------------------------
        // 4. 给「更多」按钮添加交互逻辑
        // --------------------------
        moreBtn.addEventListener('click', (e) => {
          e.stopPropagation(); // 阻止事件冒泡，避免菜单意外关闭
          const isVisible = moreContainer.style.display === 'block';
          moreContainer.style.display = isVisible ? 'none' : 'block';
          moreBtn.textContent = isVisible ? '更多语言' : '收起';
        });

        // --------------------------
        // 5. 添加样式优化，提升视觉体验
        // --------------------------
        const style = document.createElement('style');
        style.textContent = `
          .more-languages-btn {
            font-weight: 600;
            border-top: 1px solid #e0e0e0;
            margin-top: 8px;
            padding-top: 8px;
          }
          .more-languages-container .goog-te-menu2-item {
            padding-left: 32px; /* 缩进显示，区分常用语言 */
          }
        `;
        document.head.appendChild(style);
      }
    }
  });

  // 开始监听翻译元素的DOM变化
  observer.observe(document.getElementById('google_translate_element5'), {
    childList: true,
    subtree: true
  });
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

关键细节说明 #

• 常用语言自定义：你可以修改commonLangCodes数组，添加/移除需要优先显示的语言代码（比如es代表西班牙语，ru代表俄语）
• DOM监听逻辑：用MutationObserver是因为Google翻译的菜单是异步生成的，必须等它渲染完成后才能修改结构
• 事件冒泡处理：点击「更多」按钮时用e.stopPropagation()，避免触发菜单的默认关闭事件
• 样式优化：给「更多」按钮加分隔线、给次级语言加缩进，让菜单层级更清晰

注意事项 #

• 这个方案依赖Google翻译生成的DOM结构，如果Google后续更新了组件的类名或结构，可能需要调整选择器
• 确保页面能正常访问Google的翻译脚本（国内环境可能需要处理网络访问问题）

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