Skip to main content
Extension.js 在所有扩展上下文中都能跑 TypeScript:background、content script、popup、options 和 sidebar。它默认使用 Rspack + SWC 管线。你不需要单独的 tsc 步骤、ts-loader,也不需要额外的打包器规则。 构建过程完全不需要 typescript 包。SWC 会编译你的源码并擦除类型。这个包只对编辑器工具和 tsc --noEmit 类型检查有意义。正因如此,缺少 typescript 包永远不会让构建失败——这一点和缺少框架集成包不同。

什么场景适合用 TypeScript

  • 你希望在各个扩展上下文中获得更安全的重构和更清晰的契约。
  • 你在 background script、content script 和 UI 界面之间共享逻辑。
  • 你需要在使用 AI 生成代码时让 API 的用法保持可预期。

模板示例

new-typescript

new-typescript template screenshot 适合搭建一个已配置好 TypeScript 默认设置的新标签页扩展。
仓库:extension-js/examples/newtab-typescript

content-typescript

content-typescript template screenshot 适合把 TypeScript 驱动的 content script 注入到现有页面。
仓库:extension-js/examples/content-typescript

自动生成的环境类型

对于 TypeScript 项目,Extension.js 会在项目根目录生成 extension-env.d.ts,里面包含环境声明(浏览器/运行时全局变量、EXTENSION_PUBLIC_* 环境变量以及打包器类型)。devbuild 都会重新生成它,所以编辑器的类型与 CI 中的 tsc --noEmit 始终保持一致。把它提交进版本库(或加进 git-ignore)都可以——下次运行时会重新创建。

在现有扩展中使用

按下面的步骤把 TypeScript 添加到现有扩展。

安装

  1. 把 TypeScript 安装为开发依赖:
  1. 初始化 TypeScript 配置文件 tsconfig.json

配置

TypeScript 检测和要求

Extension.js 会在 package.json 旁边查找 tsconfig.json
  • .ts 源文件却没有 tsconfig.json 时,Extension.js 会往项目里写入一份基线配置。构建会提示 Creating a default tsconfig.json 并继续。
  • 如果项目声明了 typescript 依赖,但还没有 tsconfig.json、也还没有 .ts 源文件,Extension.js 会为它写入一份基线配置。
基线配置示例:
有两个默认值值得了解:
  • moduleResolutionbundler,它对应 Rspack + SWC 管线。已被移除的 node(node10)模式会让 TypeScript 7 上的 tsc --noEmit 失败。
  • 只有当 Extension.js 在项目中检测到 JSX 框架时,jsx 才是 react-jsx。没有检测到时,它保持 preserve

自动类型

Extension.js 在开发期会在项目根目录生成 extension-env.d.ts。该文件包含 Extension.js API 与浏览器 polyfill 类型的声明。

转译与类型检查

默认的打包管线会编译 TypeScript,但不会在打包时跑完整的 tsc 类型检查。 推荐的脚本:

下一步

视频讲解