manifest.json 来定义行为、UI、权限和与浏览器的集成。本页介绍你在一个浏览器扩展项目中会见到的文件扩展名，以及它们各自归属在哪里。
如果你想了解的是作为 Chrome 或 Firefox 软件附加组件意义上的”扩展”，请从 什么是浏览器扩展？ 开始。
JavaScript 文件扩展名：.js 与 .mjs
浏览器扩展接受与 Web 平台其余部分相同的 JavaScript 文件扩展名：
在 Manifest V3 中，当
manifest.json 在 background 块里包含 "type": "module" 时，背景 service_worker 会作为模块运行。详情见 Manifest V3 排错。
TypeScript 文件扩展名：.ts 与 .tsx
TypeScript 在 Extension.js 中作为一等源语言工作：
你不需要从零写一个
tsconfig.json。Extension.js 自带合理的默认值。chrome.*、browser.*、import.meta.env 以及公共环境变量键的类型来自 @types/chrome 以及 Extension.js 自带的 ambient 类型。参见 TypeScript。
React 文件扩展名：.jsx 与 .tsx
浏览器扩展中的 React 使用标准的 JSX 文件扩展名：
React 既可以在扩展页面（popup、options、side panel、new-tab）中工作，也可以在注入到网页中的 content script 中工作。设置与 shadow DOM 模式见 React。
浏览器扩展文件：manifest.json、background、content scripts、pages
除了 JavaScript 和 TypeScript 源代码，一个浏览器扩展目录通常还会包含：
Extension.js 将你的
.ts、.tsx、.jsx、.vue、.svelte、.css、.less、.scss 以及 .module.* 源代码编译成这种磁盘布局。它会按浏览器目标生成单独的目录（dist/chrome、dist/firefox、dist/edge）。
Extension.js 如何编译 JavaScript 与 TypeScript 扩展
当你运行extension dev 或 extension build 时，Extension.js 会：
- 读取
manifest.json并找出每一个入口点（background、content scripts、popup、options、side panel、new-tab、web-accessible HTML）。 - 解析这些入口引用到的源文件，包括跨
.ts、.tsx、.jsx、.vue、.svelte以及样式表类型的导入。 - 用具备扩展感知能力的默认值通过 Rspack 编译：在有帮助的地方进行代码切分，在浏览器拒绝的地方（service worker、content script）不进行分块。
- 把结果输出到
dist/<browser>，并附上为该目标过滤过的 manifest。
下一步
- 试用
extension create来脚手架生成一个 TypeScript 或 React 扩展。 - 阅读 TypeScript 与 React。
- 阅读 Manifest V3 排错 了解 service worker 与模块规则。
- 使用
extension build构建。