统计与样式增强模块

统计（analytics）：扩展也要看数据

扩展发布后，装了多少人、哪些功能被点，全靠统计。网页常用的 gtag 在 MV3 里不好使：service worker 环境、CSP 限制，Chrome 官方推荐改用 Measurement Protocol 直接上报。@wxt-dev/analytics 把这些差异封装好了，支持四个 provider：

• Google Analytics 4：走 Measurement Protocol，是 MV3 扩展接入 GA 的官方推荐路径；
• PostHog：开源产品分析，事件、会话录制、功能开关一应俱全；
• Umami：隐私优先的开源方案，扩展没有域名，建站时随便填一个即可；
• Moderok：专为扩展打造，无需 host_permissions，MV3 worker 可用，只收匿名数据。

三步接入

1. 装包并在 wxt.config.ts 挂模块：

npm i @wxt-dev/analytics

export default defineConfig({
  modules: ['@wxt-dev/analytics/module'],
});

2. 在 <srcDir>/app.config.ts 配置 provider。密钥走 .env（§27），别写死在仓库：

// app.config.ts
import { googleAnalytics4 } from '@wxt-dev/analytics/providers/google-analytics-4';

export default defineAppConfig({
  analytics: {
    debug: true,
    providers: [
      googleAnalytics4({
        apiSecret: import.meta.env.WXT_GA_API_SECRET,
        measurementId: '...',
      }),
    ],
  },
});

其他 provider 的写法大同小异。PostHog 传 apiKey，默认连 https://us.i.posthog.com，欧盟区或自托管改 apiHost；Umami 传 apiUrl、websiteId、domain；Moderok 传 appKey，还能开 trackLifecycle 自动上报安装、更新、每日回访，甚至 trackUninstalls 在卸载后引导用户填反馈问卷。

怎么选？只想看基础使用量，Umami 或 Moderok 最省事，尤其 Moderok 不需要任何 host_permissions，商店审核时权限更干净；要功能开关、会话录制这类产品能力，上 PostHog；已经在用 GA 生态的团队，选 GA4。扩展和网站不一样：用户装的是你的代码，不是访问你的页面，所以必须用这些针对扩展的集成方式，而不是往网页里塞一段 gtag。

3. 代码里从 #analytics 导入使用：

import { analytics } from '#analytics';

await analytics.track('some-event'); // 上报事件
await analytics.page();              // 页面浏览
await analytics.identify('user-id'); // 标记用户
analytics.autoTrack(document.body);  // 自动追踪点击

autoTrack(container) 会自动统计容器内元素的点击。扩展自己的 HTML 页面传 document；内容脚本只关心注入的 UI（§15），把 UI 容器传进去即可，不打扰宿主页面。

用户属性与匿名标识

用户 ID 和属性默认存在 browser.storage.local，可以用 wxt/storage 自定义存储位置与默认值（§18）。隐私友好的常见做法：用随机 UUID 当用户 ID，不碰真实身份：

// app.config.ts
import { storage } from 'wxt/storage';

export default defineAppConfig({
  analytics: {
    userId: storage.defineItem('local:analytics-user-id', {
      init: () => crypto.randomUUID(),
    }),
  },
});

运行时用 analytics.identify(userId, userProperties) 设置即可。注意合规：收集用户行为要在商店的隐私政策里写清楚（§39 上架时会审到），所以能匿名就匿名，能少收就少收。上架 Firefox 时，AMO 还要求声明数据收集权限（§35），统计越少越省事。

默认关闭与自定义 provider

生命周期事件（首次打开、安装、更新、每日回访）的自动追踪默认开启，卸载追踪默认关闭——enabled 可以配成 storage 项（比如让用户在设置页开关，§09），默认值用 fallback 指定，运行时用 analytics.setEnabled(true) 打开。没被支持的平台，用 defineAnalyticsProvider 写自定义 provider，官方四个 provider 的实现就是现成参考。不用 WXT 也能用：createAnalytics 手动建实例，在后台导入一次初始化消息监听即可。

unocss：原子化 CSS 一键接入

UnoCSS 是原子化 CSS 引擎：写 flex、p-4 这类工具类，构建时按需生成样式，不塞无用 CSS。WXT 集成是一个模块的事：

npm i -D @wxt-dev/unocss unocss

export default defineConfig({
  modules: ['@wxt-dev/unocss'],
  unocss: {
    excludeEntrypoints: ['background'], // 后台不需要样式
  },
});

入口文件里导入虚拟模块即可使用：

import 'virtual:uno.css';

对比 §28 的 Tailwind 方案：tailwind 要自己写 Vite 插件，unocss 走模块机制，配置更少、接入更快。

小结

analytics 管数据，unocss 管样式，都是「一个模块 + 少量配置」的典型。下一节把视角拉回整体：一套代码怎么跑所有浏览器。