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

前言

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

运行时配置

此 API 仍在开发中,更多功能即将到来!

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

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 函数:

ts 复制代码
import { useAppConfig } from '#imports';
console.log(useAppConfig()); // { theme: "dark" }

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

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

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',
});

这有以下几大优势:

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

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

相关推荐
lee5762 小时前
老是忘记package.json,备忘一下 webpack 环境下 Vue Cli 和 Vite 命令行工具对比
vue.js
喝拿铁写前端3 小时前
前端与 AI 结合的 10 个可能路径图谱
前端·人工智能
codingandsleeping3 小时前
浏览器的缓存机制
前端·后端
-代号95274 小时前
【JavaScript】十二、定时器
开发语言·javascript·ecmascript
灵感__idea5 小时前
JavaScript高级程序设计(第5版):扎实的基本功是唯一捷径
前端·javascript·程序员
摇滚侠5 小时前
Vue3 其它API toRow和markRow
前端·javascript
難釋懷5 小时前
JavaScript基础-history 对象
开发语言·前端·javascript
beibeibeiooo5 小时前
【CSS3】04-标准流 + 浮动 + flex布局
前端·html·css3
拉不动的猪5 小时前
刷刷题47(react常规面试题2)
前端·javascript·面试
浪遏5 小时前
场景题:大文件上传 ?| 过总字节一面😱
前端·javascript·面试