Firefox扩展导入html2pdf遇模块错误，寻求解决方案

我正尝试在Firefox扩展中使用HTML2PDF，想要生成整个站点而非仅当前页面的PDF（用于Github Pages上的大学项目文档）。但始终无法解决控制台中的错误：import declarations may only appear at top level of a module。

我的配置与代码 #

manifest配置（v2） #

{
  "manifest_version": 2,
  "name": "Newone",
  "version": "1.0",
  "description": "An extension to read all files on the Github website and convert to PDFs.",
  "icons": {
    "48": "icons/border-48.png"
  },
  "content_scripts": [
    {
      "matches": [
        "*://github.gatech.edu/pages/cs6035-tools/cs6035-tools.github.io/"
      ],
      "js": [
        "newone.js"
      ]
    }
  ],
  "background": {
    "page": "background.html"
  },
  "browser_specific_settings": {
    "gecko": {
      "id": "newone@example.com"
    }
  }
}

内容脚本newone.js #

import html2pdf from "dist/html2pdf";

// 我也试过这种注入DOM的方式，代码省略了
// const moduleURL = chrome.runtime.getURL('/dist/html2pdf.js');
// const script = document.createElement('script');
// script.src = moduleURL;
// document.head.appendChild(script);

document.body.style.border = "5px solid red";

var element = document.body;
var opt = {
    margin:       1,
    filename:     'GTFile.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 2 },
    jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
};

var worker = html2pdf().from(element).set(opt).save();

alert("Hopefully there's a PDF file created!");

我尝试过设置HTML文件为<script type="module" src='./dist/html2pdf.js'></script>，仍会出现相同错误；修改html2pdf.js导出var = function html2pdf也没用。

1. 改用HTML2PDF的非模块版本 #

HTML2PDF提供了UMD格式的打包文件（如dist/html2pdf.bundle.min.js），该版本无需import，会直接注册为全局变量。将此文件放入扩展目录中。

2. 修改manifest加载顺序 #

在content_scripts的js数组中，先加载HTML2PDF的打包文件，再加载你的业务脚本：

"content_scripts": [
  {
    "matches": [
      "*://github.gatech.edu/pages/cs6035-tools/cs6035-tools.github.io/"
    ],
    "js": [
      "dist/html2pdf.bundle.min.js",
      "newone.js"
    ]
  }
]

3. 调整业务脚本，移除import语句 #

因为HTML2PDF已作为全局变量加载，直接调用即可：

document.body.style.border = "5px solid red";

var element = document.body;
var opt = {
    margin:       1,
    filename:     'GTFile.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 2 },
    jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
};

// 直接调用全局的html2pdf方法
var worker = html2pdf().from(element).set(opt).save();

alert("PDF文件已生成！");

4. 动态注入脚本的处理方式（若需跨上下文） #

如果必须将脚本注入页面上下文，需等待HTML2PDF加载完成后再执行逻辑：

const script = document.createElement('script');
script.src = chrome.runtime.getURL('/dist/html2pdf.bundle.min.js');
script.onload = function() {
  var element = document.body;
  var opt = {
      margin:       1,
      filename:     'GTFile.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2 },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
  };
  html2pdf().from(element).set(opt).save();
  alert("PDF文件已生成！");
};
document.head.appendChild(script);

document.body.style.border = "5px solid red";

核心原因 #

Firefox扩展Manifest V2不支持将内容脚本标记为ES模块，直接使用import语法会触发错误。必须采用非模块的全局变量版本，或通过动态注入并等待加载完成的方式规避模块限制。

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