浏览器插件开发历程：CiderTabs

1 环境准备和技术选型安装好 nodejs包管理器npm 或 pnpm 或 bun 或 yarn以下我以 pnpm 为例创建一个专门的目录来开发浏览器插件比如名为browser-plugins利用 WXT 浏览器插件开发框架快速初始化一个简单的模板UI框架React、Vue、Svelte、原生 等等我以 Svelte 为例选择理由pnpm 是一个解决了 npm 许多痛点的先进包管理器WXT 目前活跃度比较高Svelte 体积小和性能好对于浏览器插件来说这些点很重要项目创建使用 WXT 初始化项目模版然后填入项目名字 CiderTabs 和选择 UI 框架我这边选择 svelte pnpm这就成功初始化了// pnpm 进行 wxt 包初始化 ts // cidertabs // svelte pnpm dlx wxtlatest init // 进入项目 cd cidertabs // 项目安装 pnpm install //项目运行测试 pnpm devUI 组件库Tailwind 或 UnoCSS我以 UnoCSS 为例// 加入 unocss 和 wxt 集成包 pnpm add -D wxt-dev/unocss // 加入 unocss 和 vitewxt 基于 vite集成包 pnpm add -D unocss/vite // 加入 unocss 核心主包 pnpm add -D unocsslatest // 加入 unocss tailwind css 兼容预设 wind4 当前最新版本 pnpm add -D unocss/preset-wind4 // 加入 unocss tailwind css 兼容预设 wind3 选择稳定版本可选 pnpm add -D unocss/preset-wind3 // 加入 unocss 语法糖增强允许不只写在 class 属性里可作为 HTML 标签属性使用 pnpm add -D unocss/preset-attributify // 加入 unocss css 图标预设 // 基于 Iconify 生态可通过 CSS 类名直接使用图标 pnpm add -D unocss/preset-icons // 样式重置包等价于 Tailwind 的 Preflight pnpm add -D unocss/reset // 组件化开发复用 UI提高效率 pnpm add -D unocss/transformer-directives // 支持变体组简写简化重复前缀 // 比如 hover:(bg-red-500 text-white) 等价于 hover:bg-red-500 hover:text-white pnpm add -D unocss/transformer-variant-group2 扩展功能图标集// 安装 Material Design Icons 图标集免费商用 pnpm add -D iconify-json/mdi网页字体嵌入可选// 快速引入 Google Fonts 网页字体无需手动写 link 标签 pnpm add -D unocss/preset-web-fonts国际化方案后期补充// WXT 官方 i18n 模块处理 manifest / 商店多语言 pnpm add -D wxt-dev/i18n // i18next 核心 svelte绑定 语言检测器 pnpm add i18next svelte-i18next i18next-browser-languagedetector // 文案提取工具可选自动扫描代码提取翻译 key pnpm add -D i18next-cli3 实践开始uno.config.ts因为引入了 UnoCSS 所以我们在项目根目录下创建文件 uno.config.ts这是 UnoCSS 的核心配置文件。它告诉 UnoCSS 使用哪些预设preset和转换器transformerConfig File根据 UnoCSS 的官网预设为例先粘贴个模板// uno.config.ts import { defineConfig, presetAttributify, presetIcons, presetTypography, presetWebFonts, presetWind4, transformerDirectives, transformerVariantGroup, } from unocss; export default defineConfig({ shortcuts: [ // ... ], theme: { colors: { // ... }, }, rules: [ // ... ], variants: [ // ... ], presets: [ presetWind4(), presetAttributify(), presetIcons(), presetTypography(), presetWebFonts({ fonts: { // ... }, }), ], transformers: [transformerDirectives(), transformerVariantGroup()], });然后添加一些注释// uno.config.ts // 从 unocss 包中导入所需的函数和预设 import { // UnoCSS 配置工厂函数用于定义配置对象 defineConfig, // 属性模式预设允许在 HTML 属性中使用 UnoCSS 类名 presetAttributify, // 图标预设支持通过类名使用图标字体 presetIcons, // 排版预设提供专业的排版样式工具类 presetTypography, // Web 字体预设支持从 Google Fonts 等加载自定义字体 presetWebFonts, // Wind4 预设基于 Tailwind CSS v4 的工具类集合 presetWind4, // 指令转换器支持 apply、screen 等 CSS 指令 transformerDirectives, // 变体组合转换器支持将多个变体组合成一个类名 transformerVariantGroup, } from unocss; // 导出 UnoCSS 默认配置 export default defineConfig({ // 预检样式在所有工具类之前注入的全局 CSS常用于 CSS Reset、基础样式或全局变量注入 preflights: [], // 定义 CSS 图层顺序用于控制样式优先级 layers: {}, // 定义快捷方式将多个工具类组合成一个别名 shortcuts: [ // 此处可添加快捷方式定义例如[btn: px-4 py-2 rounded bg-blue-500 text-white] // ... ], // 主题配置自定义颜色、字体、间距等设计变量 theme: { // 自定义颜色调色板 colors: { // 此处可添加自定义颜色例如primary: #3b82f6 // ... }, }, // 自定义规则扩展 UnoCSS 的工具类生成逻辑 rules: [ // 此处可添加自定义规则 // ... ], // 自定义变体扩展工具类的条件逻辑 variants: [ // 此处可添加自定义变体 // ... ], // 预设列表按顺序加载的预设插件 presets: [ // 加载 Wind4 预设Tailwind CSS v4 兼容 presetWind4(), // 加载属性模式预设 presetAttributify(), // 加载图标预设 presetIcons(), // 加载排版预设 presetTypography(), // 加载 Web 字体预设并配置字体 presetWebFonts({ // 字体配置对象 fonts: { // 此处可添加字体定义例如inter: Inter:400,700 // ... }, }), ], // 转换器列表按顺序应用的代码转换插件 transformers: [transformerDirectives(), transformerVariantGroup()], });对于浏览器插件项目可以考虑删除 WebFonts因为注重体积和性能推荐用系统自带字体然后把上面的词条有关 WebFonts 都删除即可pnpm remove -D unocss/preset-web-fonts我们先把其它的禁用掉先启用重置和主题还有引入图标// uno.config.ts // 从 unocss 包中导入所需的函数和预设 import { // UnoCSS 配置工厂函数用于定义配置对象 defineConfig, // 属性模式预设允许在 HTML 属性中使用 UnoCSS 类名 presetAttributify, // 图标预设支持通过类名使用图标字体 presetIcons, // 排版预设提供专业的排版样式工具类 presetTypography, // Wind4 预设基于 Tailwind CSS v4 的工具类集合 presetWind4, // 指令转换器支持 apply、screen 等 CSS 指令 transformerDirectives, // 变体组合转换器支持将多个变体组合成一个类名 transformerVariantGroup, } from unocss; // 导出 UnoCSS 默认配置 export default defineConfig({ // 定义 CSS 图层顺序用于控制样式优先级 // layers: {}, // 主题配置自定义颜色、字体、间距等设计变量 // theme: { // // 自定义颜色调色板 // colors: { // // 此处可添加自定义颜色例如primary: #3b82f6 // // ... // }, // }, // 定义快捷方式将多个工具类组合成一个别名 // shortcuts: [ // // 此处可添加快捷方式定义例如[btn: px-4 py-2 rounded bg-blue-500 text-white] // // ... // ], // 自定义规则扩展 UnoCSS 的工具类生成逻辑 // rules: [ // // 此处可添加自定义规则 // // ... // ], // 自定义变体扩展工具类的条件逻辑 // variants: [ // // 此处可添加自定义变体 // // ... // ], // 预设列表按顺序加载的预设插件 presets: [ // 加载 Wind4 预设Tailwind CSS v4 兼容 presetWind4({ // 预检样式在所有工具类之前注入的全局 CSS常用于 CSS Reset、基础样式或全局变量注入 preflights: { reset: true, theme: true, }, }), // 加载属性模式预设 presetAttributify(), // 加载图标预设 presetIcons({ prefix: i-, extraProperties: {}, scale: 1, // warn: true, collections: { mdi: () import(iconify-json/mdi/icons.json).then( (i) i.default, ), }, }), // 加载排版预设 presetTypography(), ], // 转换器列表按顺序应用的代码转换插件 transformers: [transformerDirectives(), transformerVariantGroup()], });然后在要引入重置样式的 popup 文件夹下的 main.ts 文件加上// 导入 Vite UnoCSS 虚拟模块 import virtual:uno.css;这时候你在项目根目录输入 pnpm dev 看看样式是否被重置了如果没有就改位置一般是还没识别到文件位置原来是项目根目录的就把配置文件 uno.config.ts 移入 src 文件夹下原来是 src 目录的就把配置文件 uno.config.ts 移入项目根目录里如果不想移动文件就在 wxt.config.ts 文件修改为如下所示相当于直接指明配置文件位置后面就知道识别了// wxt.config.ts import { defineConfig } from wxt; import UnoCSS from unocss/vite; // See https://wxt.dev/api/config.html export default defineConfig({ srcDir: src, modules: [wxt-dev/module-svelte], // vite 接收函数形式返回包含 plugins 的配置对象即可 vite: () ({ plugins: [ UnoCSS({ configFile: ./uno.config.ts, }), ], }), });由此可见我们新手小白编程起步时遇到最多的问题或者 99.999% 的问题都是配置问题或者可以说是「沟通」问题代码不就是你和电脑之间的语言吗所以沟通不明白那么自然而然就会出现你说西、它走东的情况。解决这个问题的方法就是要搞明白怎样才是有效的沟通一下子就盯上问题本质说回主题当我们把里面的 reset: true 时发现样式都被重置了我们运行 pnpm dev 看看这时候就可以引入我们自己写的 theme 样式了写主题样式之前可以考虑加一个包unocss/transformer-compile-class可选transformerCompileClass把标签class属性内一组原子样式编译压缩成单个哈希类名类似 Windi CSS 编译模式用于缩短 HTML 标签 class 长度、减少 DOM 体积这里有官方教程Compile class transformer首先加入此包pnpm add -D unocss/transformer-compile-class然后在配置文件 uno.config.ts 中加入以下代码如果出现报错就先执行以下 pnpm 命令// 统一升级到完全同一个版本 pnpm up unocss* unocss/* --latest关键unocss和所有unocss/xxx必须版本号一模一样import transformerCompileClass from unocss/transformer-compile-class import { defineConfig } from unocss export default defineConfig({ // ... transformers: [ // 建议放在第一位 transformerCompileClass(), ], })然后我们加入 Variants【自定义变体】—— 极易被忽略的王牌功能先改写配置文件 uno.config.ts// 从 unocss 包中导入所需的函数和预设 import { // UnoCSS 配置工厂函数用于定义配置对象 defineConfig, // 属性模式预设允许在 HTML 属性中使用 UnoCSS 类名 presetAttributify, // 图标预设支持通过类名使用图标字体 presetIcons, // 排版预设提供专业的排版样式工具类 presetTypography, // Wind4 预设基于 Tailwind CSS v4 的工具类集合 presetWind4, // 指令转换器支持 apply、screen 等 CSS 指令必装包 transformerDirectives, // 变体组合转换器支持将多个变体组合成一个类名必装包 transformerVariantGroup, // 编译类名转换器将自定义类名编译为 UnoCSS 工具类必装包 // transformerCompileClass, } from unocss; import transformerCompileClass from unocss/transformer-compile-class; /** * 【自身data属性变体】 * 使用示例 active:text-red-500 * 生成选择器.active\:text-red-500[data-activetrue] * 适用元素自己带有 data-activetrue * param prefix 前缀 * param selectorSuffix 属性选择器 */ function variantAttr(prefix: string, selectorSuffix: string) { const pre ${prefix}:; // 返回标准 VariantFunction return (matcher: string) { if (!matcher.startsWith(pre)) return matcher; return { matcher: matcher.slice(pre.length), selector: (s: string) ${s}${selectorSuffix}, // 增加order控制变体嵌套层级防止优先级错乱 order: 20, }; }; } /** * 【祖先group变体】类似 group-hover * 使用示例 group-active:text-red * 生成选择器.group[data-activetrue] .group-active\:text-red * 适用父元素 classgroup data-activetrue控制子元素样式 */ function variantAncestor(prefix: string, ancestorSelector: string) { const pre ${prefix}:; return (matcher: string) { if (!matcher.startsWith(pre)) return matcher; return { matcher: matcher.slice(pre.length), selector: (s: string) ${ancestorSelector} ${s}, order: 20, }; }; } // 导出 UnoCSS 默认配置 export default defineConfig({ // 定义 CSS 图层顺序用于控制样式优先级 // layers: {}, // 主题配置自定义颜色、字体、间距等设计变量 theme: { // 自定义颜色调色板 colors: { // 此处可添加自定义颜色例如primary: #3b82f6 // ... brand: { DEFAULT: var(--c-primary), hover: var(--c-primary-hover), active: var(--c-primary-active), bg: var(--c-primary-bg), text: var(--c-primary-text), }, success: { DEFAULT: var(--c-success) }, warning: { DEFAULT: var(--c-warning) }, error: { DEFAULT: var(--c-error) }, info: { DEFAULT: var(--c-info) }, bg: { DEFAULT: var(--c-bg), secondary: var(--c-bg-secondary), tertiary: var(--c-bg-tertiary), hover: var(--c-bg-hover), active: var(--c-bg-active), }, }, }, // 定义快捷方式将多个工具类组合成一个别名 // shortcuts: [ // // 此处可添加快捷方式定义例如[btn: px-4 py-2 rounded bg-blue-500 text-white] // // ... // ], // 自定义规则扩展 UnoCSS 的工具类生成逻辑 // rules: [ // // 此处可添加自定义规则 // // ... // ], // 自定义变体扩展工具类的条件逻辑 variants: [ // 此处可添加自定义变体 // ... // 元素自身 data-* 状态变体 variantAttr(active, [data-activetrue]), variantAttr(open, [data-opentrue]), variantAttr(closed, [data-openfalse]), variantAttr(selected, [data-selectedtrue]), variantAttr(loading, [data-loadingtrue]), variantAttr(error, [data-errortrue]), variantAttr(success, [data-successtrue]), variantAttr(warning, [data-warningtrue]), variantAttr(disabled, [data-disabledtrue]), variantAttr(readonly, [data-readonlytrue]), variantAttr(focused, [data-focusedtrue]), variantAttr(expanded, [data-expandedtrue]), // 父级group增强变体原生group-hover不够用 variantAncestor(group-active, .group[data-activetrue]), variantAncestor(group-open, .group[data-opentrue]), variantAncestor(group-selected, .group[data-selectedtrue]), variantAncestor(group-disabled, .group[data-disabledtrue]), // 示例自定义任意特殊业务变体 按需开启 // variantAttr(current, [aria-currentpage]), // 导航当前页 // variantAttr(checked, [aria-checkedtrue]), // variantAttr(pressed, [aria-pressedtrue]), ], // 预设列表按顺序加载的预设插件 presets: [ // 加载 Wind4 预设Tailwind CSS v4 兼容 presetWind4({ // ✅ dark: 有预设可以直接使用不用自己写变体 dark: class, // 预检样式在所有工具类之前注入的全局 CSS常用于 CSS Reset、基础样式或全局变量注入 preflights: { reset: true, theme: true, }, }), // 加载属性模式预设 presetAttributify(), // 加载图标预设 presetIcons({ prefix: i-, extraProperties: {}, scale: 1, // warn: true, collections: { mdi: () import(iconify-json/mdi/icons.json).then( (i) i.default, ), }, }), // 加载排版预设 presetTypography(), ], // 转换器列表按顺序应用的代码转换插件 transformers: [ transformerCompileClass(), transformerDirectives(), transformerVariantGroup(), ], });然后在长期更新慢慢来