Chrome扩展导入外部NPM库遇阻：sbd库调用报错排查求助

常见报错原因 #

• 导入顺序或方式错误：比如在popup.js加载后才引入sbd库，或者混用了全局脚本与ES模块语法
• Manifest配置缺失：未正确声明资源访问权限，或未指定脚本模块类型
• 库的暴露机制不匹配：sbd.min.js作为UMD模块，若用ES模块导入未正确获取导出对象

两种可靠导入方式 #

方式一：全局脚本引入（适合弹窗页面） #

1. 在popup.html中先引入sbd库，再加载你的业务脚本，确保依赖顺序正确：

<!-- popup.html 示例 -->
<!DOCTYPE html>
<html>
<body>
  <!-- 先加载sbd库 -->
  <script src="/sbd/dist/sbd.min.js"></script>
  <!-- 再加载业务脚本 -->
  <script src="/popup.js"></script>
</body>
</html>

2. 在popup.js中直接调用全局变量SBD的方法：

// popup.js 示例
const testText = "Hello world. This is a test sentence.";
const sentences = SBD.sentences(testText);
console.log(sentences);

3. 确保manifest.json中action.default_popup指向正确的popup.html，无需额外配置模块类型。

方式二：ES模块导入（现代扩展推荐） #

1. 修改manifest.json，确保内容安全策略允许模块脚本，并配置弹窗入口：

{
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  }
}

2. 在popup.html中声明脚本为模块类型：

<script type="module" src="/popup.js"></script>

3. 在popup.js中通过相对路径导入sbd库，注意获取UMD模块的默认导出：

// popup.js 示例
import SBD from './sbd/dist/sbd.min.js';

const testText = "Hello world. This is a test sentence.";
const sentences = SBD.sentences(testText);
console.log(sentences);

快速排查步骤 #

1. 打开Chrome开发者工具（F12）的Console标签，查看具体报错信息：
   • 若提示SBD is not defined：检查脚本引入顺序或导入语法
   • 若提示资源加载失败：确认sbd.min.js的文件路径与代码中声明一致
2. 若在内容脚本中使用sbd，需将sbd/dist/sbd.min.js加入manifest.json的content_scripts.js数组，或通过web_accessible_resources声明可访问资源。

更简便的替代方案 #

直接使用CDN引入sbd库，无需下载本地文件：

1. 在popup.html中引入CDN脚本：

<script src="https://cdn.jsdelivr.net/npm/sbd@1.0.1/dist/sbd.min.js"></script>

2. 修改manifest.json的内容安全策略，允许加载该CDN资源：

{
  "content_security_policy": {
    "extension_pages": "script-src 'self' https://cdn.jsdelivr.net; object-src 'self'"
  }
}

3. 在popup.js中直接调用全局SBD即可。

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