如何在Chrome扩展Manifest V3后台导入jsrsasign并解决window未定义错误？

我正在开发一款Chrome扩展，想导入jsrsasign-all-min.js库，用来在Google OAuth2登录完成后解析JWT令牌，但遇到了如下错误：

Uncaught ReferenceError: window is not defined

我猜测这个错误是因为该库面向前端环境，而background.js的运行环境是Service Worker，没有window对象导致的。

我的manifest.json内容如下：

{
    "manifest_version": 3,
    "name": "Reputation System",
    "version": "1.0.0",
    "key": "xxx",
    "background": {
        "service_worker": "background.js",
        "type": "module"
    },
    "action": {
        "default_title": "Reputation System"
    },
    "permissions": [
        "identity",
        "scripting"
    ],
    "oauth2": {
        "client_id": "xxx",
        "scopes": [
          "openid"
        ]
    }
}

我在background.js中这样导入库：

import { KJUR } from "./jsrsasign-all-min.js";

并尝试使用这个函数：

const user_info = KJUR.jws.JWS.readSafeJSONString(b64utoutf8(id_token.split(".")[1]));

请问我哪里操作有误？

问题根源 #

你的推测完全正确，jsrsasign-all-min.js是为浏览器前端环境编写的，它依赖window全局对象，但Chrome Manifest V3的后台Service Worker基于Web Worker环境，不存在window对象，因此触发了报错。

可行解决方法 #

方案1：使用库的Node.js兼容版本

jsrsasign提供了适配非浏览器环境的npm包，你可以安装官方的jsrsasign包替代前端min文件：

npm install jsrsasign

之后在background.js中直接导入：

import { KJUR } from 'jsrsasign';

这个版本不会依赖window对象，能在Service Worker中正常运行。

方案2：手动模拟window对象（不推荐）

如果不想更换依赖包，可以在导入库之前，在background.js中临时创建空的window对象：

globalThis.window = {};
import { KJUR } from "./jsrsasign-all-min.js";

但这种方法可能引发库的其他潜在问题（比如库还依赖window上的其他API），因此仅作为临时替代方案。

方案3：无需依赖库，手动解析JWT payload

如果只是需要解析JWT的payload部分，完全可以自己实现base64url解码，不用引入第三方库：

function parseJwtPayload(token) {
  const base64Url = token.split('.')[1];
  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
  const jsonPayload = decodeURIComponent(atob(base64).split('').map(c => 
    '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
  ).join(''));
  return JSON.parse(jsonPayload);
}

// 使用示例
const user_info = parseJwtPayload(id_token);

这种方法更轻量，适合仅需解析payload的场景。

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