pdfjs-dist兼容Chrome扩展吗？Gulp构建报错及PDF提取替代方案咨询

一、pdfjs-dist是否兼容Chrome扩展？ #

完全兼容。pdfjs-dist基于Web标准开发，Chrome扩展的沙箱环境支持其核心PDF解析、文本提取等功能。

二、将pdfjs-dist添加到Chrome扩展的步骤 #

结合你使用npm+Gulp的场景，按以下流程操作：

1. 安装依赖：在扩展项目目录执行命令

   npm install pdfjs-dist --save
   

2. 调整Gulp构建配置：
   Gulp默认不会处理node_modules中的外部依赖，需借助webpack-stream或browserify打包ES模块。示例Gulp任务：

   const gulp = require('gulp');
   const webpack = require('webpack-stream');
   
   gulp.task('build-scripts', () => {
     return gulp.src('src/your-main-script.js')
       .pipe(webpack({
         mode: 'production',
         output: {
           filename: 'bundle.js'
         },
         module: {
           rules: [
             {
               test: /\.js$/,
               exclude: /node_modules/,
               use: 'babel-loader'
             }
           ]
         }
       }))
       .pipe(gulp.dest('dist/js'));
   });
   

3. 修正代码导入与Worker配置：
   • 确保代码中正确导入并使用pdfjsLib（原代码存在调用名错误）：

     import * as pdfjsLib from 'pdfjs-dist';
     

   • pdfjs-dist依赖Worker，需将pdfjs-dist/build/pdf.worker.js复制到扩展输出目录，并在代码中指定路径：

     pdfjsLib.GlobalWorkerOptions.workerSrc = chrome.runtime.getURL('js/pdf.worker.js');
     

4. 配置manifest.json：
   • 声明打包后的脚本文件：

     {
       "content_scripts": [
         {
           "matches": ["<all_urls>"],
           "js": ["dist/js/bundle.js"]
         }
       ]
     }
     

   • 添加Worker资源的可访问权限：

     {
       "web_accessible_resources": [
         {
           "resources": ["js/pdf.worker.js"],
           "matches": ["<all_urls>"]
         }
       ]
     }
     

三、Gulp构建中断的替代方案 #

若不想调整Gulp配置，可尝试以下两种方案：

方案1：使用预构建UMD版本 #

• 直接下载pdfjs-dist预构建的pdf.js和pdf.worker.js文件，放到扩展静态资源目录（如js/）
• 无需npm安装，直接使用全局pdfjsLib对象：

  async function extractTextWithPositions(pdfBuffer) {
    pdfjsLib.GlobalWorkerOptions.workerSrc = chrome.runtime.getURL('js/pdf.worker.js');
    const loadingTask = pdfjsLib.getDocument({ data: pdfBuffer });
    // 后续逻辑同原代码，注意修正调用名错误
  }
  

方案2：使用专注文本提取的封装库 #

如果仅需文本及位置提取，可使用pdfjs-extract（基于pdfjs-dist封装）：

• 安装：

  npm install pdfjs-extract --save
  

• 使用示例：

  const PDFExtract = require('pdfjs-extract').PDFExtract;
  const pdfExtract = new PDFExtract();
  
  async function extractTextWithPositions(pdfBuffer) {
    const extractResult = await pdfExtract.extractBuffer(pdfBuffer, {
      normalizeWhitespace: false
    });
    let extractedData = [];
    extractResult.pages.forEach((page, pageIndex) => {
      page.content.forEach(item => {
        extractedData.push({
          page: pageIndex + 1,
          text: item.str,
          x: Math.round(item.x),
          y: Math.round(item.y)
        });
      });
    });
    return extractedData;
  }
  

四、原代码错误修正 #

你提供的代码中存在一处调用错误：导入的是pdfjsLib，但调用时用了pdfjs.getDocument，需改为pdfjsLib.getDocument，否则会触发运行时未定义错误。

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