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

这有以下几大优势:

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

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

相关推荐
给月亮点灯|3 分钟前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊5 分钟前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
张迅之36 分钟前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
@CLoudbays_Martin1137 分钟前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php
蔗理苦2 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro2 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹3 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风3 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱3 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年3 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划