@wxt-dev/analytics 0.1.6 → 0.2.1

package/README.md

@@ -4,8 +4,8 @@ Add analytics, like google analytics, to your WXT extension.
 
 ## Supported Analytics Providers
 
-- Google Analytics (Measurement Protocol)
-- Umami
+- [Google Analytics 4 (Measurement Protocol)](#google-analytics-4-measurement-protocol)
+- [Umami](#umami)
 
 ## Installation
 
@@ -49,7 +49,7 @@ await analytics.identify('some-user-id');
 
 ## Providers
 
-### Google Analytics (Measurement Protocol)
+### Google Analytics 4 (Measurement Protocol)
 
 Follow [Google's documentation](https://developer.chrome.com/docs/extensions/how-to/integrate/google-analytics-4#setup-credentials) to obtain your credentials:
 

package/dist/client.d.mts

@@ -1,6 +1,5 @@
-import { a as Analytics } from './shared/analytics.c704a57b.mjs';
+import { A as AnalyticsConfig, a as Analytics } from './shared/analytics.5d517cf0.mjs';
 
-declare let analytics: Analytics;
-declare const _default: any;
+declare function createAnalytics(config?: AnalyticsConfig): Analytics;
 
-export { analytics, _default as default };
+export { createAnalytics };

package/dist/client.d.ts

@@ -1,6 +1,5 @@
-import { a as Analytics } from './shared/analytics.c704a57b.js';
+import { A as AnalyticsConfig, a as Analytics } from './shared/analytics.5d517cf0.js';
 
-declare let analytics: Analytics;
-declare const _default: any;
+declare function createAnalytics(config?: AnalyticsConfig): Analytics;
 
-export { analytics, _default as default };
+export { createAnalytics };

package/dist/client.mjs

@@ -1,67 +1,21 @@
-import { defineWxtPlugin } from 'wxt/sandbox';
-import { useAppConfig } from 'wxt/client';
-import uaParser from 'ua-parser-js';
+import { UAParser } from 'ua-parser-js';
 
-const defineStorageItem = (key, defaultValue) => ({
-  getValue: async () => (await chrome.storage.local.get(key))[key] ?? defaultValue,
-  setValue: (newValue) => chrome.storage.local.set({ [key]: newValue })
-});
-let analytics;
-const ANALYTICS_PORT = "wxt-analytics";
-const interactiveTags = /* @__PURE__ */ new Set(["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA"]);
-const interactiveRoles = /* @__PURE__ */ new Set([
-  "button",
-  "link",
-  "checkbox",
-  "menuitem",
-  "tab",
-  "radio"
-]);
-const client = defineWxtPlugin(() => {
-  const isBackground = globalThis.window == null;
-  analytics = isBackground ? createBackgroundAnalytics() : createAnalyticsForwarder();
-});
-function createAnalyticsForwarder() {
-  const port = chrome.runtime.connect({ name: ANALYTICS_PORT });
-  const sessionId = Date.now();
-  const getMetadata = () => ({
-    sessionId,
-    timestamp: Date.now(),
-    language: navigator.language,
-    referrer: globalThis.document?.referrer || void 0,
-    screen: globalThis.window ? `${globalThis.window.screen.width}x${globalThis.window.screen.height}` : void 0,
-    url: location.href
-  });
-  const methodForwarder = (fn) => (...args) => port.postMessage({ fn, args: [...args, getMetadata()] });
-  const analytics2 = {
-    identify: methodForwarder("identify"),
-    page: methodForwarder("page"),
-    track: methodForwarder("track"),
-    setEnabled: methodForwarder("setEnabled"),
-    autoTrack: (root) => {
-      const onClick = (event) => {
-        const element = event.target;
-        if (!element || !interactiveTags.has(element.tagName) && !interactiveRoles.has(element.getAttribute("role")))
-          return;
-        void analytics2.track("click", {
-          tagName: element.tagName?.toLowerCase(),
-          id: element.id || void 0,
-          className: element.className || void 0,
-          textContent: element.textContent?.substring(0, 50) || void 0,
-          // Limit text content length
-          href: element.href
-        });
-      };
-      root.addEventListener("click", onClick, { capture: true, passive: true });
-      return () => {
-        root.removeEventListener("click", onClick);
-      };
-    }
-  };
-  return analytics2;
+const ANALYTICS_PORT = "@wxt-dev/analytics";
+function createAnalytics(config) {
+  if (typeof chrome === "undefined" || !chrome?.runtime?.id)
+    throw Error(
+      "Cannot use WXT analytics in contexts without access to the browser.runtime APIs"
+    );
+  if (config == null) {
+    console.warn(
+      "[@wxt-dev/analytics] Config not provided to createAnalytics. If you're using WXT, add the 'analytics' property to '<srcDir>/app.config.ts'."
+    );
+  }
+  if (location.pathname === "/background.js")
+    return createBackgroundAnalytics(config);
+  return createFrontendAnalytics();
 }
-function createBackgroundAnalytics() {
-  const config = useAppConfig().analytics;
+function createBackgroundAnalytics(config) {
   const userIdStorage = config?.userId ?? defineStorageItem("local:wxt-analytics:user-id");
   const userPropertiesStorage = config?.userProperties ?? defineStorageItem(
     "local:wxt-analytics:user-properties",
@@ -69,7 +23,7 @@ function createBackgroundAnalytics() {
   );
   const enabled = config?.enabled ?? defineStorageItem("local:wxt-analytics:enabled", false);
   const platformInfo = chrome.runtime.getPlatformInfo();
-  const userAgent = uaParser();
+  const userAgent = UAParser();
   let userId = Promise.resolve(userIdStorage.getValue()).then(
     (id) => id ?? globalThis.crypto.randomUUID()
   );
@@ -92,7 +46,8 @@ function createBackgroundAnalytics() {
         timestamp: meta.timestamp,
         screen: meta.screen,
         referrer: meta.referrer,
-        language: meta.language
+        language: meta.language,
+        url: meta.url
       },
       user: {
         id: await userId,
@@ -109,7 +64,7 @@ function createBackgroundAnalytics() {
       }
     };
   };
-  const analytics2 = {
+  const analytics = {
     identify: async (newUserId, newUserProperties = {}, forwardMeta) => {
       userId = Promise.resolve(newUserId);
       userProperties = Promise.resolve(newUserProperties);
@@ -132,7 +87,11 @@ function createBackgroundAnalytics() {
       const baseEvent = await getBaseEvent(forwardMeta);
       const event = {
         ...baseEvent,
-        page: { url }
+        page: {
+          url,
+          location: globalThis.location?.href,
+          title: globalThis.document?.title
+        }
       };
       if (config?.debug)
         console.debug("[analytics] page", event);
@@ -168,15 +127,75 @@ function createBackgroundAnalytics() {
       };
     }
   };
-  const providers = config?.providers?.map((provider) => provider(analytics2, config)) ?? [];
+  const providers = config?.providers?.map((provider) => provider(analytics, config)) ?? [];
   chrome.runtime.onConnect.addListener((port) => {
     if (port.name === ANALYTICS_PORT) {
       port.onMessage.addListener(({ fn, args }) => {
-        void analytics2[fn]?.(...args);
+        void analytics[fn]?.(...args);
       });
     }
   });
-  return analytics2;
+  return analytics;
 }
+function createFrontendAnalytics() {
+  const port = chrome.runtime.connect({ name: ANALYTICS_PORT });
+  const sessionId = Date.now();
+  const getMetadata = () => ({
+    sessionId,
+    timestamp: Date.now(),
+    language: navigator.language,
+    referrer: globalThis.document?.referrer || void 0,
+    screen: globalThis.window ? `${globalThis.window.screen.width}x${globalThis.window.screen.height}` : void 0,
+    url: location.href
+  });
+  const methodForwarder = (fn) => (...args) => port.postMessage({ fn, args: [...args, getMetadata()] });
+  const analytics = {
+    identify: methodForwarder("identify"),
+    page: methodForwarder("page"),
+    track: methodForwarder("track"),
+    setEnabled: methodForwarder("setEnabled"),
+    autoTrack: (root) => {
+      const onClick = (event) => {
+        const element = event.target;
+        if (!element || !INTERACTIVE_TAGS.has(element.tagName) && !INTERACTIVE_ROLES.has(element.getAttribute("role")))
+          return;
+        void analytics.track("click", {
+          tagName: element.tagName?.toLowerCase(),
+          id: element.id || void 0,
+          className: element.className || void 0,
+          textContent: element.textContent?.substring(0, 50) || void 0,
+          // Limit text content length
+          href: element.href
+        });
+      };
+      root.addEventListener("click", onClick, { capture: true, passive: true });
+      return () => {
+        root.removeEventListener("click", onClick);
+      };
+    }
+  };
+  return analytics;
+}
+function defineStorageItem(key, defaultValue) {
+  return {
+    getValue: async () => (await chrome.storage.local.get(key))[key] ?? defaultValue,
+    setValue: (newValue) => chrome.storage.local.set({ [key]: newValue })
+  };
+}
+const INTERACTIVE_TAGS = /* @__PURE__ */ new Set([
+  "A",
+  "BUTTON",
+  "INPUT",
+  "SELECT",
+  "TEXTAREA"
+]);
+const INTERACTIVE_ROLES = /* @__PURE__ */ new Set([
+  "button",
+  "link",
+  "checkbox",
+  "menuitem",
+  "tab",
+  "radio"
+]);
 
-export { analytics, client as default };
+export { createAnalytics };

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as wxt from 'wxt';
-import { A as AnalyticsConfig } from './shared/analytics.c704a57b.mjs';
+import { A as AnalyticsConfig } from './shared/analytics.5d517cf0.mjs';
 
 declare module 'wxt/sandbox' {
     interface WxtAppConfig {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as wxt from 'wxt';
-import { A as AnalyticsConfig } from './shared/analytics.c704a57b.js';
+import { A as AnalyticsConfig } from './shared/analytics.5d517cf0.js';
 
 declare module 'wxt/sandbox' {
     interface WxtAppConfig {

package/dist/index.mjs

@@ -1,25 +1,34 @@
 import 'wxt';
 import 'wxt/sandbox';
-import { defineWxtModule, addWxtPlugin } from 'wxt/modules';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'url';
+import { defineWxtModule, addAlias } from 'wxt/modules';
+import { resolve } from 'node:path';
 
-const _dirname = dirname(fileURLToPath(import.meta.url));
-const pluginId = "@wxt-dev/analytics/client" ;
 const index = defineWxtModule({
   name: "analytics",
-  imports: [{ name: "analytics", from: pluginId }],
+  imports: [{ name: "analytics", from: "#analytics" }],
   setup(wxt) {
-    addWxtPlugin(
-      wxt,
-      resolve(_dirname, "client.mjs" )
-    );
-    wxt.hooks.hook("build:manifestGenerated", (_, manifest) => {
+    wxt.hook("build:manifestGenerated", (_, manifest) => {
       manifest.permissions ?? (manifest.permissions = []);
       if (!manifest.permissions.includes("storage")) {
         manifest.permissions.push("storage");
       }
     });
+    const analyticsModulePath = resolve(
+      wxt.config.wxtDir,
+      "analytics/index.ts"
+    );
+    const analyticsModuleCode = `
+      import { createAnalytics } from '@wxt-dev/analytics/client';
+
+      export const analytics = createAnalytics(useAppConfig().analytics);
+    `;
+    addAlias(wxt, "#analytics", analyticsModulePath);
+    wxt.hook("prepare:types", async (_, entries) => {
+      entries.push({
+        path: analyticsModulePath,
+        text: analyticsModuleCode
+      });
+    });
   }
 });
 

package/dist/providers/google-analytics-4.d.mts

@@ -1,4 +1,4 @@
-import { b as AnalyticsProvider } from '../shared/analytics.c704a57b.mjs';
+import { b as AnalyticsProvider } from '../shared/analytics.5d517cf0.mjs';
 
 interface GoogleAnalyticsProviderOptions {
     apiSecret: string;

package/dist/providers/google-analytics-4.d.ts

@@ -1,4 +1,4 @@
-import { b as AnalyticsProvider } from '../shared/analytics.c704a57b.js';
+import { b as AnalyticsProvider } from '../shared/analytics.5d517cf0.js';
 
 interface GoogleAnalyticsProviderOptions {
     apiSecret: string;

package/dist/providers/umami.d.mts

@@ -1,4 +1,4 @@
-import { b as AnalyticsProvider } from '../shared/analytics.c704a57b.mjs';
+import { b as AnalyticsProvider } from '../shared/analytics.5d517cf0.mjs';
 
 interface UmamiProviderOptions {
     baseUrl: string;

package/dist/providers/umami.d.ts

@@ -1,4 +1,4 @@
-import { b as AnalyticsProvider } from '../shared/analytics.c704a57b.js';
+import { b as AnalyticsProvider } from '../shared/analytics.5d517cf0.js';
 
 interface UmamiProviderOptions {
     baseUrl: string;

package/dist/shared/{analytics.c704a57b.d.mts → analytics.5d517cf0.d.mts}

@@ -26,17 +26,17 @@ interface AnalyticsConfig {
     /**
      * Configure how the enabled flag is persisted
      */
-    enabled?: AnalyticsStorageItemConfig<boolean>;
+    enabled?: AnalyticsStorageItem<boolean>;
     /**
      * Configure how the user Id is persisted
      */
-    userId?: AnalyticsStorageItemConfig<string>;
+    userId?: AnalyticsStorageItem<string>;
     /**
      * Configure how user properties are persisted
      */
-    userProperties?: AnalyticsStorageItemConfig<Record<string, string>>;
+    userProperties?: AnalyticsStorageItem<Record<string, string>>;
 }
-interface AnalyticsStorageItemConfig<T> {
+interface AnalyticsStorageItem<T> {
     getValue: () => T | Promise<T>;
     setValue?: (newValue: T) => void | Promise<void>;
 }
@@ -55,13 +55,13 @@ interface BaseAnalyticsEvent {
         /** `Date.now()` of when the event was reported */
         timestamp: number;
         /** `"1920x1080"` */
-        screen?: string;
+        screen: string | undefined;
         /** `document.referrer` */
-        referrer?: string;
+        referrer: string | undefined;
         /** `navigator.language` */
-        language?: string;
+        language: string | undefined;
         /** `location.href` */
-        url?: string;
+        url: string | undefined;
     };
     user: {
         id: string;
@@ -70,8 +70,8 @@ interface BaseAnalyticsEvent {
 }
 interface AnalyticsPageInfo {
     url: string;
-    title?: string;
-    location?: string;
+    title: string | undefined;
+    location: string | undefined;
 }
 interface AnalyticsPageViewEvent extends BaseAnalyticsEvent {
     page: AnalyticsPageInfo;

package/dist/shared/{analytics.c704a57b.d.ts → analytics.5d517cf0.d.ts}

@@ -26,17 +26,17 @@ interface AnalyticsConfig {
     /**
      * Configure how the enabled flag is persisted
      */
-    enabled?: AnalyticsStorageItemConfig<boolean>;
+    enabled?: AnalyticsStorageItem<boolean>;
     /**
      * Configure how the user Id is persisted
      */
-    userId?: AnalyticsStorageItemConfig<string>;
+    userId?: AnalyticsStorageItem<string>;
     /**
      * Configure how user properties are persisted
      */
-    userProperties?: AnalyticsStorageItemConfig<Record<string, string>>;
+    userProperties?: AnalyticsStorageItem<Record<string, string>>;
 }
-interface AnalyticsStorageItemConfig<T> {
+interface AnalyticsStorageItem<T> {
     getValue: () => T | Promise<T>;
     setValue?: (newValue: T) => void | Promise<void>;
 }
@@ -55,13 +55,13 @@ interface BaseAnalyticsEvent {
         /** `Date.now()` of when the event was reported */
         timestamp: number;
         /** `"1920x1080"` */
-        screen?: string;
+        screen: string | undefined;
         /** `document.referrer` */
-        referrer?: string;
+        referrer: string | undefined;
         /** `navigator.language` */
-        language?: string;
+        language: string | undefined;
         /** `location.href` */
-        url?: string;
+        url: string | undefined;
     };
     user: {
         id: string;
@@ -70,8 +70,8 @@ interface BaseAnalyticsEvent {
 }
 interface AnalyticsPageInfo {
     url: string;
-    title?: string;
-    location?: string;
+    title: string | undefined;
+    location: string | undefined;
 }
 interface AnalyticsPageViewEvent extends BaseAnalyticsEvent {
     page: AnalyticsPageInfo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wxt-dev/analytics",
-  "version": "0.1.6",
+  "version": "0.2.1",
   "description": "Add analytics to your web extension",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "publint": "^0.2.8",
     "typescript": "^5.5.2",
     "unbuild": "^2.0.0",
-    "wxt": "0.18.13"
+    "wxt": "0.19.13"
   },
   "dependencies": {
     "ua-parser-js": "^1.0.38"