如何在TypeScript开发的Chrome扩展中使用@types/jsrsasign并实现类型校验

你遇到的核心问题是Chrome扩展的脚本环境默认不支持ES模块语法，同时直接使用全局变量时TypeScript无法识别类型。下面给你几个可行的解决方案，按落地成本和适用场景排序：

方案一：声明全局变量+在Manifest中加载库脚本（最简单直接） #

这个方法不需要修改模块配置，利用Chrome扩展的脚本加载机制，同时让TypeScript识别全局变量的类型：

1. 在manifest.json中加载jsrsasign库
   把下载的jsrsasign-all-min.js放在扩展目录（比如libs文件夹），然后在需要使用它的业务脚本之前加载这个库。举个background脚本的例子：

   "background": {
     "scripts": [
       "./libs/jsrsasign-all-min.js",
       "./extension/background.js"
     ]
   }
   

   脚本加载后，KJUR和b64utoutf8等变量会自动挂载到window对象上。

2. 在TypeScript中声明全局变量
   在你的.ts文件顶部添加类型声明，让TypeScript关联@types/jsrsasign的类型定义：

   // 声明全局变量并绑定已有类型
   declare const KJUR: typeof import("jsrsasign").KJUR;
   declare const b64utoutf8: typeof import("jsrsasign").b64utoutf8;
   

3. 正常调用即可
   现在你可以直接写代码，既能获得完整的类型校验，运行时也不会报错：

   const decodedData = KJUR.jws.JWS.readSafeJSONString(b64utoutf8(token));
   

方案二：将扩展脚本配置为ES模块（Chrome 91+支持） #

如果你的目标Chrome版本较新（91及以上），可以直接把扩展脚本设为ES模块，这样就能正常使用import语法：

1. 修改manifest.json标记脚本为模块
   比如配置background service worker：

   "background": {
     "service_worker": "extension/background.js",
     "type": "module"
   }
   

   或者content script：

   "content_scripts": [
     {
       "matches": ["<all_urls>"],
       "js": ["extension/content.js"],
       "type": "module"
     }
   ]
   

2. 调整tsconfig.json的模块配置
   确保TypeScript生成符合ES模块规范的代码：

   {
     "compilerOptions": {
       "outDir": "extension",
       "target": "es6",
       "removeComments": true,
       "module": "ESNext",
       "moduleResolution": "NodeNext"
     },
     "include": ["**.ts"]
   }
   

3. 正常使用import
   现在你可以直接导入库并调用，类型校验完全正常：

   import { KJUR, b64utoutf8 } from "jsrsasign";
   
   const decodedData = KJUR.jws.JWS.readSafeJSONString(b64utoutf8(token));
   

   注意：这种方式需要确保你的依赖安装完整，且用户的Chrome版本支持ES模块的扩展脚本。

方案三：使用打包工具（推荐复杂扩展） #

如果你的扩展逻辑复杂、依赖较多，推荐用Webpack、Vite这类工具打包TypeScript和依赖：

1. 配置打包工具将你的.ts文件和jsrsasign库打包成一个单独的脚本文件；
2. 在manifest.json中引用打包后的脚本即可；
3. 打包过程会自动处理模块导入，TypeScript的类型校验能完美工作，同时还能优化代码体积、支持更多高级特性。

额外注意事项 #

• 确保@types/jsrsasign的版本和你下载的jsrsasign-all-min.js版本一致，版本不匹配可能导致类型与实际运行时行为不一致；
• 如果用方案一，一定要保证jsrsasign的脚本在业务脚本之前加载，否则会出现KJUR is not defined的运行时错误。

内容的提问来源于stack exchange，提问作者Axel Productions 86