fix: Use @wxt-dev/browser instead of @types/chrome (#1645)

Author: aklinker1

packages/analytics/modules/analytics/client.ts

@@ -9,11 +9,12 @@ import type {
   AnalyticsEventMetadata,
   AnalyticsProvider,
 } from './types';
+import { browser } from '@wxt-dev/browser';
 
 const ANALYTICS_PORT = '@wxt-dev/analytics';
 
 export function createAnalytics(config?: AnalyticsConfig): Analytics {
-  if (typeof chrome === 'undefined' || !chrome?.runtime?.id)
+  if (!browser?.runtime?.id)
     throw Error(
       'Cannot use WXT analytics in contexts without access to the browser.runtime APIs',
     );
@@ -51,13 +52,13 @@ function createBackgroundAnalytics(
     defineStorageItem<boolean>('local:wxt-analytics:enabled', false);
 
   // Cached values
-  const platformInfo = chrome.runtime.getPlatformInfo();
+  const platformInfo = browser.runtime.getPlatformInfo();
   const userAgent = UAParser();
   let userId = Promise.resolve(userIdStorage.getValue()).then(
     (id) => id ?? globalThis.crypto.randomUUID(),
   );
   let userProperties = userPropertiesStorage.getValue();
-  const manifest = chrome.runtime.getManifest();
+  const manifest = browser.runtime.getManifest();
 
   const getBackgroundMeta = () => ({
     timestamp: Date.now(),
@@ -178,7 +179,7 @@ function createBackgroundAnalytics(
     config?.providers?.map((provider) => provider(analytics, config)) ?? [];
 
   // Listen for messages from the rest of the extension
-  chrome.runtime.onConnect.addListener((port) => {
+  browser.runtime.onConnect.addListener((port) => {
     if (port.name === ANALYTICS_PORT) {
       port.onMessage.addListener(({ fn, args }) => {
         // @ts-expect-error: Untyped fn key
@@ -194,7 +195,7 @@ function createBackgroundAnalytics(
  * Creates an analytics client for non-background contexts.
  */
 function createFrontendAnalytics(): Analytics {
-  const port = chrome.runtime.connect({ name: ANALYTICS_PORT });
+  const port = browser.runtime.connect({ name: ANALYTICS_PORT });
   const sessionId = Date.now();
   const getFrontendMetadata = (): AnalyticsEventMetadata => ({
     sessionId,
@@ -252,8 +253,8 @@ function defineStorageItem<T>(
 ): AnalyticsStorageItem<T> {
   return {
     getValue: async () =>
-      (await chrome.storage.local.get(key))[key] ?? defaultValue,
-    setValue: (newValue) => chrome.storage.local.set({ [key]: newValue }),
+      (await browser.storage.local.get(key))[key] ?? defaultValue,
+    setValue: (newValue) => browser.storage.local.set({ [key]: newValue }),
   };
 }
 

packages/analytics/package.json

@@ -52,14 +52,14 @@
   },
   "devDependencies": {
     "@aklinker1/check": "2.0.0",
-    "@types/chrome": "^0.0.313",
     "@types/ua-parser-js": "^0.7.39",
     "publint": "^0.3.12",
     "typescript": "^5.8.3",
     "unbuild": "^3.5.0",
     "wxt": "workspace:*"
   },
   "dependencies": {
+    "@wxt-dev/browser": "workspace:*",
     "ua-parser-js": "^1.0.40"
   }
 }

packages/analytics/tsconfig.json

@@ -3,8 +3,7 @@
   "compilerOptions": {
     "paths": {
       "#analytics": ["./.wxt/analytics/index.ts"]
-    },
-    "types": ["chrome"]
+    }
   },
   "exclude": ["node_modules", "dist"]
 }

packages/i18n/package.json

@@ -26,6 +26,7 @@
     "test": "buildc --deps-only -- vitest"
   },
   "dependencies": {
+    "@wxt-dev/browser": "workspace:*",
     "chokidar": "^4.0.3",
     "confbox": "^0.1.8 || ^0.2.2",
     "fast-glob": "^3.3.3"
@@ -40,7 +41,6 @@
   },
   "devDependencies": {
     "@aklinker1/check": "2.0.0",
-    "@types/chrome": "^0.0.313",
     "@types/node": "^20.17.6",
     "oxlint": "^0.16.8",
     "publint": "^0.3.12",

packages/i18n/src/__tests__/index.test.ts

@@ -1,13 +1,18 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { createI18n } from '../index';
+import { browser } from '@wxt-dev/browser';
 
-const getMessageMock = vi.fn();
-
-vi.stubGlobal('chrome', {
-  i18n: {
-    getMessage: getMessageMock,
-  },
+vi.mock('@wxt-dev/browser', async () => {
+  const { vi } = await import('vitest');
+  return {
+    browser: {
+      i18n: {
+        getMessage: vi.fn(),
+      },
+    },
+  };
 });
+const getMessageMock = vi.mocked(browser.i18n.getMessage);
 
 describe('createI18n', () => {
   beforeEach(() => {

packages/i18n/src/__tests__/types.test.ts

@@ -1,13 +1,18 @@
 import { beforeEach, describe, it, vi } from 'vitest';
 import { createI18n } from '..';
+import { browser } from '@wxt-dev/browser';
 
-const getMessageMock = vi.fn();
-
-vi.stubGlobal('chrome', {
-  i18n: {
-    getMessage: getMessageMock,
-  },
+vi.mock('@wxt-dev/browser', async () => {
+  const { vi } = await import('vitest');
+  return {
+    browser: {
+      i18n: {
+        getMessage: vi.fn(),
+      },
+    },
+  };
 });
+const getMessageMock = vi.mocked(browser.i18n.getMessage);
 
 const n: number = 1;
 

packages/i18n/src/index.ts

@@ -7,6 +7,7 @@ import {
   I18n,
   Substitution,
 } from './types';
+import { browser } from '@wxt-dev/browser';
 
 export function createI18n<
   T extends I18nStructure = DefaultI18nStructure,
@@ -39,9 +40,9 @@ export function createI18n<
     if (sub?.length) {
       // Convert all substitutions to strings
       const stringSubs = sub?.map((sub) => String(sub));
-      message = chrome.i18n.getMessage(key.replaceAll('.', '_'), stringSubs);
+      message = browser.i18n.getMessage(key.replaceAll('.', '_'), stringSubs);
     } else {
-      message = chrome.i18n.getMessage(key.replaceAll('.', '_'));
+      message = browser.i18n.getMessage(key.replaceAll('.', '_'));
     }
     if (!message) {
       console.warn(`[i18n] Message not found: "${key}"`);

packages/i18n/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "types": ["chrome", "node"]
+    "types": ["node"]
   },
   "exclude": ["node_modules/**", "dist/**"]
 }

packages/storage/package.json

@@ -30,12 +30,12 @@
     "test": "buildc --deps-only -- vitest"
   },
   "dependencies": {
+    "@wxt-dev/browser": "workspace:*",
     "async-mutex": "^0.5.0",
     "dequal": "^2.0.3"
   },
   "devDependencies": {
     "@aklinker1/check": "2.0.0",
-    "@types/chrome": "^0.0.313",
     "@webext-core/fake-browser": "^1.3.2",
     "oxlint": "^0.16.8",
     "publint": "^0.3.12",

packages/storage/src/__tests__/index.test.ts

@@ -1,6 +1,7 @@
 import { fakeBrowser } from '@webext-core/fake-browser';
 import { describe, it, expect, beforeEach, vi, expectTypeOf } from 'vitest';
 import { MigrationError, type WxtStorageItem, storage } from '../index';
+import { browser } from '@wxt-dev/browser';
 
 /**
  * This works because fakeBrowser is synchronous, and is will finish any number of chained
@@ -222,7 +223,7 @@ describe('Storage Utils', () => {
       describe('setMeta', () => {
         it('should set metadata at key+$', async () => {
           const existing = { v: 1 };
-          await chrome.storage[storageArea].set({ count$: existing });
+          await browser.storage[storageArea].set({ count$: existing });
           const newValues = {
             date: Date.now(),
           };
@@ -238,7 +239,7 @@ describe('Storage Utils', () => {
           'should remove any properties set to %s',
           async (version) => {
             const existing = { v: 1 };
-            await chrome.storage[storageArea].set({ count$: existing });
+            await browser.storage[storageArea].set({ count$: existing });
             const expected = {};
 
             await storage.setMeta(`${storageArea}:count`, { v: version });
@@ -1265,7 +1266,7 @@ describe('Storage Utils', () => {
 
         await item.removeValue();
         // Make sure it's actually blank before running the test
-        expect(await chrome.storage.local.get()).toEqual({});
+        expect(await browser.storage.local.get()).toEqual({});
         init.mockClear();
 
         const [value1, value2] = await Promise.all([