Chrome扩展开发：pdf.js CDN安全问题及文本提取方案咨询

我正在开发一款Chrome扩展，支持上传PDF或TXT文件并扫描提取文本。出于安全考虑，无法通过CDN引入pdf.js，尝试多种方案未达预期，求最优解决方案。另外还需要从PDF/TXT中提取符合特定模式的文本。

现有代码 #

popup.html #

<!DOCTYPE html>
<html>
  <head>
    <title>Amazon Order Automation</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <input type="file" id="fileInput" accept=".pdf,.txt" />
    <button id="startButton">Start Automation</button>
  </body>
</html>

popup.js #

document.addEventListener("DOMContentLoaded", function () {
  const fileInput = document.getElementById("fileInput");
  const startButton = document.getElementById("startButton");

  startButton.addEventListener("click", async function () {
    const selectedFile = fileInput.files[0];
    if (selectedFile) {
      const fileContent = await readFileContent(selectedFile);

      if (selectedFile.name.endsWith(".pdf")) {
        const pdfText = await extractTextFromPDF(fileContent);
        const trackingIds = extractTrackingIdsFromText(pdfText);
        chrome.storage.local.set({ trackingIds });
        chrome.runtime.sendMessage({ action: "startProcess" });
      } else {
        const trackingIds = extractTrackingIdsFromText(fileContent);
        chrome.storage.local.set({ trackingIds });
        chrome.runtime.sendMessage({ action: "startProcess" });
      }
    }
  });

  async function readFileContent(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (event) => {
        resolve(event.target.result);
      };
      reader.onerror = (event) => {
        reject(event.target.error);
      };
      reader.readAsArrayBuffer(file);
    });
  }

  async function extractTextFromPDF(pdfData) {
    const worker = new pdfjsWorker.PDFWorker();
    const pdf = await pdfjs.getDocument({ data: pdfData, worker }).promise;
    const textContent = [];

    for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
      const page = await pdf.getPage(pageNum);
      const pageText = await page.getTextContent();
      const pageString = pageText.items.map((item) => item.str).join(" ");
      textContent.push(pageString);
    }

    const fullText = textContent.join(" ");
    return fullText;
  }

  function extractTrackingIdsFromText(text) {
    return text.split("\n").filter((line) => line.trim().length > 0);
  }
});

解决方案 #

一、本地集成pdf.js的正确流程 #

1. 获取pdf.js本地资源
   下载官方预编译的pdf.js包，将包含pdf.js、pdf.worker.js的dist文件夹复制到扩展项目根目录，重命名为pdfjs。

2. 配置扩展Manifest

   • 若使用Manifest V3，在manifest.json中添加资源访问声明：

     "web_accessible_resources": [
       {
         "resources": ["pdfjs/*"],
         "matches": ["<all_urls>"]
       }
     ],
     "permissions": ["storage"]
     

   • 若为Manifest V2，直接添加：

     "web_accessible_resources": ["pdfjs/*"],
     "permissions": ["storage"]
     

3. 修正popup.js中的pdf.js初始化逻辑
   替换原extractTextFromPDF函数，确保正确加载本地库和Worker：

   async function extractTextFromPDF(pdfData) {
     // 加载本地pdf.js核心库
     await import('./pdfjs/pdf.js');
     // 设置Worker的本地路径
     pdfjsLib.GlobalWorkerOptions.workerSrc = chrome.runtime.getURL('pdfjs/pdf.worker.js');
     
     const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
     const textContent = [];
   
     for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
       const page = await pdf.getPage(pageNum);
       const pageText = await page.getTextContent();
       const pageString = pageText.items.map((item) => item.str).join(" ");
       textContent.push(pageString);
     }
   
     const fullText = textContent.join(" ");
     return fullText;
   }
   

   也可以在popup.html中静态引入pdf.js，添加<script src="pdfjs/pdf.js"></script>到<head>标签内，省去动态import步骤。

二、特定模式文本提取优化 #

将原extractTrackingIdsFromText函数替换为正则匹配逻辑，以亚马逊UPS追踪号为例：

function extractTrackingIdsFromText(text) {
  // 自定义正则匹配特定模式，此处为1Z开头的18位UPS追踪号
  const trackingPattern = /1Z[A-Z0-9]{16}/g;
  const matches = text.match(trackingPattern) || [];
  // 去重后返回结果
  return [...new Set(matches)];
}

可根据实际需求调整正则表达式，匹配订单号、其他物流追踪号等。

三、额外注意事项 #

• 确保后台脚本（Manifest V3为Service Worker）正确监听chrome.runtime.sendMessage发送的startProcess指令，完成后续自动化流程。
• 测试时需验证pdf.js资源路径是否正确，避免因路径错误导致Worker加载失败。

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