如何在PDF页面捕获afterprint事件？现有监听代码为何失效？

问题根源 #

Chrome内置PDF查看器运行在独立沙盒环境中，普通内容脚本无法自动注入该环境，你之前的代码并未在PDF页面中执行，因此无法捕获afterprint事件。

解决方案步骤 #

1. 更新扩展权限配置

修改manifest.json，添加Chrome内置页面访问权限，确保scripting权限正常启用：

{
  "permissions": ["tabs", "activeTab", "nativeMessaging", "scripting"],
  "host_permissions": [
    "http://*/*",
    "https://*/*",
    "chrome://*/*"
  ]
}

注：移除原content_scripts中指向popup.js的配置——popup.js是弹窗脚本，不适合作为内容脚本注入页面。

2. 主动注入监听脚本到PDF页面

在background.js中监听标签页更新事件，识别PDF页面并注入监听脚本：

// background.js
chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
  // 检测是否为PDF页面：包含直接打开的PDF文件、网页内嵌PDF两种情况
  const isPdfPage = tab.url?.endsWith('.pdf') || changeInfo.mimeType === 'application/pdf';
  
  if (isPdfPage && changeInfo.status === 'complete') {
    try {
      await chrome.scripting.executeScript({
        target: { tabId: tabId },
        func: () => {
          // 监听afterprint事件
          window.addEventListener('afterprint', () => {
            console.log('PDF打印完成');
            // 向background.js发送通知
            chrome.runtime.sendMessage({ action: 'pdfPrintCompleted' });
          });
        }
      });
      console.log('已成功注入PDF打印监听脚本');
    } catch (error) {
      console.error('注入脚本失败:', error);
    }
  }
});

3. 在background.js中处理打印完成通知

添加消息监听逻辑，执行打印完成后的业务操作：

// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'pdfPrintCompleted') {
    console.log('收到PDF打印完成通知');
    // 此处添加你的业务逻辑，例如调用nativeMessaging
    // chrome.runtime.sendNativeMessage('你的原生应用ID', { data: '打印完成' }, (response) => {
    //   console.log('原生应用响应:', response);
    // });
  }
});

4. 测试注意事项

• 确保Chrome使用内置PDF查看器（在设置中禁用第三方PDF插件）
• 重新加载扩展（在chrome://extensions/页面点击刷新按钮）
• 打开PDF页面触发打印操作，查看background.js控制台输出验证效果

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