WXT 中文文档

Appearance

自动导入 ​

WXT 使用 unimport（与 Nuxt 使用的相同工具）来设置自动导入。

ts
export default defineConfig({
  // 参见 https://www.npmjs.com/package/unimport#configurations
  imports: {
    // ...
  },
});

默认情况下，WXT 会自动为其所有 API 以及项目中的一些目录设置自动导入：

  • <srcDir>/components/*
  • <srcDir>/composables/*
  • <srcDir>/hooks/*
  • <srcDir>/utils/*

这些目录中文件的所有命名导出和默认导出，在项目的其他任何地方都可以直接使用，无需手动导入。

要查看自动导入的完整 API 列表，请运行 wxt prepare 并查看项目中的 .wxt/types/imports-module.d.ts 文件。

TypeScript ​

为了让 TypeScript 和编辑器能够识别自动导入的变量，你需要运行 wxt prepare 命令。

将此命令添加到 postinstall 脚本中，这样编辑器在安装依赖后就能获得报告类型错误所需的一切信息：

jsonc
// package.json
{
  "scripts": {
    "postinstall": "wxt prepare", 
  },
}

ESLint ​

ESLint 无法识别自动导入的变量，除非在 ESLint 的 globals 中显式定义它们。默认情况下，如果 WXT 检测到项目中安装了 ESLint，它会自动生成配置。如果配置没有自动生成，你可以手动让 WXT 生成。

ts
export default defineConfig({
  imports: {
    eslintrc: {
      enabled: 9,
    },
  },
});
ts
export default defineConfig({
  imports: {
    eslintrc: {
      enabled: 8,
    },
  },
});

然后在 ESLint 配置中，导入并使用生成的文件：

js
// eslint.config.mjs
import autoImports from './.wxt/eslint-auto-imports.mjs';

export default [
  autoImports,
  {
    // 其余配置...
  },
];
js
// .eslintrc.mjs
export default {
  extends: ['./.wxt/eslintrc-auto-import.json'],
  // 其余配置...
};

禁用自动导入 ​

并非所有开发者都喜欢自动导入。要禁用它们，请将 imports 设置为 false。

ts
export default defineConfig({
  imports: false, 
});

显式导入（#imports） ​

你可以通过 #imports 模块手动导入所有 WXT 的 API：

ts
import {
  createShadowRootUi,
  ContentScriptContext,
  MatchPattern,
} from '#imports';

要了解更多关于 #imports 模块的工作原理，请阅读相关博客文章。

如果你已经禁用了自动导入，仍然建议使用 #imports 从一个地方导入所有 WXT 的 API。