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

这有以下几大优势:

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

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

相关推荐
程序员黄同学27 分钟前
AI 模型在前端应用中的典型使用场景和限制
前端·人工智能·neo4j
傻小胖1 小时前
nodejs的包管理工具介绍,npm的介绍和安装,npm的初始化包 ,搜索包,下载安装包
前端·npm·node.js
小救星小杜、5 小时前
给vue-admin-template菜单栏 sidebar-item 添加消息提示
前端·vue.js
小小小小宇7 小时前
模块联邦
前端
佳腾_7 小时前
【web服务_负载均衡Nginx】二、Nginx 核心技术之负载均衡与反向代理
前端·nginx·云计算·负载均衡·web中间件
三书yjy8 小时前
所见即所得的前端 AI 工具 Readdy.ai
前端·人工智能·readdy.ai
欧买噶噶8 小时前
vue浅试(1)
前端·javascript·vue.js
华洛8 小时前
从0到1打造企业级AI售前机器人——实战指南一:根据产品需求和定位进行agent流程设计🧐
前端·javascript·node.js
拉不动的猪8 小时前
微前端之-Micro-App
前端·javascript·面试
uhakadotcom8 小时前
一篇文章带你玩转服务器端追踪:原理、优势与实战案例
javascript·后端·面试