如何在about:blank页面运行background.js(service_worker)及错误排查

一、修正content_scripts配置 #

about:blank页面的脚本注入需要关联父页面来源，仅设置match_about_blank: true不够。修改manifest.json的content_scripts部分，绑定Google Slides的父页面地址，并开启全框架匹配：

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

• matches限定脚本仅在Slides相关的about:blank标签触发
• all_frames: true确保脚本能覆盖Presenter的子框架（演讲者笔记通常在子框架内）

二、修复Uncaught TypeError错误 #

报错大概率是脚本执行时机过早，或元素选择器不匹配。调整foreground.js，用DOM监听确保元素加载后再操作：

// 监听演讲者笔记容器的加载
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length) {
      // 替换为实际的演讲者笔记容器选择器（右键检查元素获取）
      const notesContainer = document.querySelector('.punch-viewer-notes-content');
      if (notesContainer) {
        notesContainer.style.backgroundColor = '#f0f8ff'; // 自定义背景色
        observer.disconnect(); // 找到元素后停止监听
      }
    }
  });
});

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

若仍报错，检查控制台的错误信息，确认是选择器错误还是DOM结构变化，及时更新选择器。

三、放弃activeTab权限依赖 #

activeTab权限不支持about:blank页面，无需在manifest中声明该权限，完全通过content_scripts配置实现脚本注入即可。

四、验证步骤 #

1. 在chrome://extensions/页面刷新扩展，加载新配置
2. 打开Google Slides进入Presenter模式，确认页面在about:blank标签打开
3. 查看演讲者笔记背景色是否生效，同时检查控制台（F12）是否还有报错

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