tsc 步骤、ts-loader,也不需要额外的打包器规则。
什么场景适合用 TypeScript
- 你希望在各个扩展上下文中获得更安全的重构和更清晰的契约。
- 你在 background script、content script 和 UI 界面之间共享逻辑。
- 你需要在使用 AI 生成代码时让 API 的用法保持可预期。
模板示例
new-typescript

content-typescript

自动生成的环境类型
对于 TypeScript 项目,Extension.js 会在项目根目录生成extension-env.d.ts,里面包含环境声明(浏览器/运行时全局变量、EXTENSION_PUBLIC_* 环境变量以及打包器类型)。dev 和 build 都会重新生成它,所以编辑器的类型与 CI 中的 tsc --noEmit 始终保持一致。把它提交进版本库(或加进 git-ignore)都可以——下次运行时会重新创建。
在现有扩展中使用
按下面的步骤把 TypeScript 添加到现有扩展。安装
- 把 TypeScript 安装为开发依赖:
- 初始化 TypeScript 配置文件
tsconfig.json:
配置
TypeScript 检测和要求
Extension.js 会在package.json 旁边查找 tsconfig.json。
- 如果存在 TypeScript 源文件但缺少
tsconfig.json,Extension.js 会抛出错误,要求你创建一个。 - 如果 Extension.js 仅通过依赖或配置检测到 TypeScript,但没有源文件,它可以为你生成一份基线
tsconfig.json。
自动类型
Extension.js 在开发期会在项目根目录生成extension-env.d.ts。该文件包含 Extension.js API 与浏览器 polyfill 类型的声明。
转译与类型检查
默认的打包管线会编译 TypeScript,但不会在打包时跑完整的tsc 类型检查。
推荐的脚本:
下一步
- 了解 Extension.js 如何处理 ECMAScript 模块。
- 探索 Sass 模块等样式方案。
- 阅读浏览器扩展中的 JavaScript 和 TypeScript 文件。
- 对比各浏览器扩展框架对 TypeScript 的支持。

