前端 - 使用plasmo写一个谷歌插件，获取打印预览并自动下载保存pdf？

Question

我在使用plasmo写一个谷歌插件。目标网站有一个按钮，点击就是打印数据，数据是通过接口获取的。需求是，通过插件批量自动点击打印，把打印预览的，重命名并另存为PDF。现在我发现，我获取不到打印预览弹窗的内容？

Answer 1

打印预览是浏览器的功能吧，不是网页功能，在 JS 控制的范围以外。所以你获取不到。

应该没什么解决方法，因为必须调用浏览器 API，没有就是没有。可以考虑换个技术方案，比如走 puppeteer。

Answer 2

在Plasmo框架中实现自动下载打印预览的PDF，需要绕过Chrome的安全限制。以下是完整方案：

核心问题分析

1. 打印预览窗口无法直接访问 - Chrome的打印预览是系统级弹窗，无法通过DOM操作获取内容
2. 需要绕过默认打印流程 - 必须拦截打印请求，生成PDF数据流

解决方案（使用Chrome API）

// background.ts (后台服务)
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "savePDF") {
    const { tabId, filename } = request;
    
    // 附加调试器获取PDF数据
    chrome.debugger.attach({ tabId }, "1.0", () => {
      chrome.debugger.sendCommand(
        { tabId },
        "Page.printToPDF",
        {
          transferMode: "ReturnAsBase64",
          printBackground: true,
          landscape: false,
          displayHeaderFooter: false,
          margin: { top: 0.4, bottom: 0.4, left: 0.4, right: 0.4 }
        },
        (pdfData) => {
          if (chrome.runtime.lastError) {
            console.error("PDF生成失败:", chrome.runtime.lastError);
            return;
          }
          
          // 转换并下载PDF
          const pdfBlob = base64ToBlob(pdfData.data, "application/pdf");
          const url = URL.createObjectURL(pdfBlob);
          chrome.downloads.download({
            url: url,
            filename: `${filename}.pdf`,
            saveAs: true
          }, () => URL.revokeObjectURL(url));
          
          chrome.debugger.detach({ tabId });
        }
      );
    });
  }
  return true;
});

function base64ToBlob(base64: string, mimeType: string) {
  const byteCharacters = atob(base64);
  const byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += 1024) {
    const slice = byteCharacters.slice(offset, offset + 1024);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    byteArrays.push(new Uint8Array(byteNumbers));
  }
  return new Blob(byteArrays, { type: mimeType });
}

// content.ts (内容脚本)
function automatePrinting() {
  // 1. 找到打印按钮并触发点击
  const printButton = document.querySelector('button.print-btn')!;
  printButton.click();

  // 2. 拦截打印请求
  window.print = () => {
    // 3. 发送生成PDF请求
    chrome.runtime.sendMessage({
      action: "savePDF",
      filename: `report_${new Date().toISOString().slice(0, 10)}`,
      tabId: chrome.devtools.inspectedWindow.tabId
    });
  };
}

// 当数据加载完成后执行
if (document.readyState === 'complete') {
  automatePrinting();
} else {
  window.addEventListener('load', automatePrinting);
}

关键配置

1. manifest.json 权限声明:

   {
     "permissions": [
    "debugger",
    "downloads",
    "scripting"
     ],
     "host_permissions": ["<target_website>/*"]
   }

2. plasmo.manifest.json 额外配置:

   {
     "background": {
    "service_worker": "background.ts",
    "type": "module"
     }
   }

实现原理

1. 拦截打印流程：

   • 覆盖window.print()方法阻止默认弹窗
   • 通过点击事件触发自定义打印流程

2. PDF生成技术：

   • 使用chrome.debuggerAPI获取原始PDF数据
   • Page.printToPDF命令生成Base64编码的PDF

3. 文件下载：

   • 转换Base64为Blob对象
   • 通过chrome.downloadsAPI保存文件

注意事项

1. 用户提示：首次使用需在manifest声明debugger权限，Chrome会显示警告条
2. 错误处理：添加chrome.debugger的detach操作防止资源泄漏
3. 样式保留：设置printBackground: true确保CSS样式完整输出
4. 文件名策略：使用日期/接口数据动态生成文件名（示例中使用日期）

替代方案

如果不想使用debugger API，可考虑：

// 使用html2canvas+jsPDF（有样式失真风险）
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

const printElement = document.getElementById('print-area');
html2canvas(printElement).then(canvas => {
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF('p', 'mm', 'a4');
  pdf.addImage(imgData, 'PNG', 0, 0, 210, 297);
  pdf.save('document.pdf');
});

推荐使用debugger方案，它能完美保留原始打印样式。注意在Chrome 111+版本中，可考虑新的 chrome.printingAPI（目前仅限ChromeOS）。实际部署时需处理网络延迟，建议在接口返回数据后添加500ms延时再触发打印。