Chrome扩展如何仅适配谷歌幻灯片演示者视图的about:blank页面？

1. 调整manifest.json配置 #

在content_scripts中，针对谷歌幻灯片页面设置匹配规则，开启match_about_blank和all_frames，让脚本能注入到该域名下的所有子框架（包括演示者视图的about:blank页面）：

{
  "content_scripts": [
    {
      "matches": ["https://docs.google.com/presentation/*"],
      "js": ["content.js"],
      "css": ["main.css"],
      "match_about_blank": true,
      "all_frames": true
    }
  ]
}

2. 在content script中做页面校验 #

在content.js里添加DOM检测逻辑，只在存在专属元素的页面执行业务代码，避免无关页面生效：

document.addEventListener('DOMContentLoaded', () => {
  // 检查是否是目标页面（含专属DIV）
  const targetElement = document.querySelector('.punch-viewer-speakernotes');
  if (!targetElement) {
    // 非目标页面，移除已加载的CSS（可选）
    const styleSheet = document.querySelector('link[href="main.css"]');
    if (styleSheet) styleSheet.remove();
    return;
  }

  // 核心逻辑：检测演讲备注文本并展示内容
  const notesContent = document.querySelector('.punch-viewer-speakernotes-text-body-scrollable');
  if (notesContent) {
    // 监听备注文本变化
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        if (mutation.type === 'childList' || mutation.type === 'characterData') {
          const notesText = notesContent.textContent.trim();
          // 示例：检测到特定文本后展示提示
          if (notesText.includes('重点提示')) {
            let alertBox = document.getElementById('notes-alert');
            if (!alertBox) {
              alertBox = document.createElement('div');
              alertBox.id = 'notes-alert';
              alertBox.style.cssText = 'position: fixed; bottom: 20px; left: 20px; padding: 12px; background: #4CAF50; color: white; z-index: 9999; border-radius: 4px;';
              document.body.appendChild(alertBox);
            }
            alertBox.textContent = '检测到重点备注！';
          }
        }
      });
    });
    observer.observe(notesContent, { childList: true, subtree: true, characterData: true });
  }
});

补充说明 #

• 匹配https://docs.google.com/presentation/*是因为演示者视图的about:blank子框架上下文归属该域名，match_about_blank只会在此范围内生效，不会影响其他网站的about:blank页面。
• 通过DOM元素检测过滤页面，确保只有目标页面才会保留CSS并执行核心逻辑，避免资源浪费。

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