WXT浏览器插件开发中文教程(8)----WXT配置详解之运行时配置

前言

大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

运行时配置 ​

此 API 仍在开发中，更多功能即将到来！

在单一位置 <srcDir>/app.config.ts 定义运行时配置：

import { defineAppConfig } from '#imports';
// 为配置定义类型
declare module 'wxt/utils/define-app-config' {
  export interface WxtAppConfig {
    theme?: 'light' | 'dark';
  }
}
export default defineAppConfig({
  theme: 'dark',
});

警告

此文件会提交到代码仓库中，因此不要在此处放置任何机密信息。相反，请使用环境变量。

要访问运行时配置，WXT 提供了 useAppConfig 函数：

import { useAppConfig } from '#imports';
console.log(useAppConfig()); // { theme: "dark" }

在应用配置中使用环境变量 ​

你可以在 app.config.ts 文件中使用环境变量。

declare module 'wxt/utils/define-app-config' {
  export interface WxtAppConfig {
    apiKey?: string;
    skipWelcome: boolean;
  }
}
export default defineAppConfig({
  apiKey: import.meta.env.WXT_API_KEY,
  skipWelcome: import.meta.env.WXT_SKIP_WELCOME === 'true',
});

这有以下几大优势：

• 在一个文件中定义所有预期的环境变量
• 将字符串转换为其他类型，例如布尔值或数组
• 如果未提供环境变量，则提供默认值

最后感谢阅读！欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！