如何获取Google幻灯片演示者首次打开才加载的下拉菜单内容？

直接定位数据来源（优先方案） #

Google Presenter的幻灯片元数据通常不会仅依赖菜单DOM存储，可通过以下方式直接获取：

• 全局对象排查：在控制台输入window，展开后查找含presenter、slide、deck等关键词的属性（比如google.presenter.model这类内部状态对象），其中大概率包含所有幻灯片的标题、ID等完整信息。
• 预加载数据提取：在Elements面板搜索script[type="application/json"]标签，很多单页应用会将页面初始数据嵌入这类脚本中，直接解析JSON即可拿到幻灯片列表。
• 网络请求捕获：打开Network面板的XHR/fetch分类，手动打开一次幻灯片菜单，观察是否有加载幻灯片列表的请求。找到后可直接复用该请求URL（需携带当前页面Cookie保证权限），无需依赖DOM加载。

临时模拟加载方案（直接获取失败时） #

若无法直接拿到数据，可通过JS隐藏式触发菜单加载并提取内容：

1. 定位菜单触发按钮，模拟事件加载内容：

   // 找到下拉触发按钮（需根据实际DOM调整选择器）
   const trigger = document.querySelector('.goog-dropdown-button');
   // 触发mousedown事件加载菜单内容
   trigger.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
   

2. 延迟提取标题并关闭菜单：

   setTimeout(() => {
     // 提取所有幻灯片标题
     const slideTitles = Array.from(document.querySelectorAll('.goog-menu-vertical .goog-menuitem-content'))
       .map(el => el.textContent.trim());
     console.log(slideTitles);
     // 触发mouseup关闭菜单
     trigger.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, cancelable: true }));
   }, 100);
   

3. 可选：提前隐藏菜单避免视觉干扰：

   const menu = document.querySelector('.goog-menu.goog-menu-vertical');
   menu.style.display = 'none';
   

开发者控制台高效检查技巧 #

• MutationObserver自动监听：设置监听自动捕获菜单内容加载事件，无需手动触发：

  const menu = document.querySelector('.goog-menu.goog-menu-vertical');
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(m => {
      if (m.addedNodes.length) {
        const titles = Array.from(document.querySelectorAll('.goog-menuitem-content')).map(el => el.textContent.trim());
        console.log('已加载幻灯片标题:', titles);
        observer.disconnect(); // 获取数据后停止监听
      }
    });
  });
  observer.observe(menu, { childList: true, subtree: true });
  

• DOM修改断点：在Elements面板找到菜单容器，右键选择「Break on」→「Subtree modifications」，菜单内容加载时会自动触发断点，此时可直接在控制台查询元素内容。
• 代码片段保存：将提取标题的代码保存到Chrome控制台的「Snippets」面板，需要时一键运行，提升效率。

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