Install with CRXJS

CRXJS turns a Vite project into an extension, with the manifest written in manifest.config.ts. The AnalyticsTrend extension SDK needs nothing CRXJS-specific.

npm install @analyticstrend/extension

The manifest

CRXJS builds one browser at a time, and it takes the background as that browser declares it: a service worker for Chrome, background scripts for Firefox. It does not convert one into the other, so declare both, keyed on the build:

// manifest.config.ts
import { defineManifest } from "@crxjs/vite-plugin";

export default defineManifest(({ mode }) => {
  const firefox = mode === "firefox";
  return {
    manifest_version: 3,
    name: "Your extension",
    version: "0.1.0",
    permissions: ["storage"],
    background: firefox
      ? { scripts: ["src/background.ts"], type: "module" }
      : { service_worker: "src/background.ts", type: "module" },
    ...(firefox && {
      browser_specific_settings: {
        gecko: {
          id: "your-extension@example.com",
          strict_min_version: "140.0",
          data_collection_permissions: {
            required: ["none"],
            optional: ["technicalAndInteraction", "locationInfo"],
          },
        },
      },
    }),
  };
});

A Firefox build from a manifest with only service_worker fails inside CRXJS's background loader, with "Cannot read properties of undefined (reading '0')".

The background

// src/background.ts
import { initBackground } from "@analyticstrend/extension";

const analytics = initBackground({
  writeKey: import.meta.env.VITE_ANALYTICSTREND_WRITE_KEY,
  uninstallTracking: true,
});

analytics.track("background_started");

At the top level, and not awaited. From a popup or content script, use trackFromContentScript.

Build for each browser

Pass the browser to the plugin, and build twice:

// vite.config.ts
import { crx } from "@crxjs/vite-plugin";
import { defineConfig } from "vite";
import manifest from "./manifest.config";

export default defineConfig(({ mode }) => ({
  plugins: [crx({ manifest, browser: mode === "firefox" ? "firefox" : "chrome" })],
  build: { outDir: mode === "firefox" ? "dist/firefox" : "dist/chrome" },
}));

vite build && vite build --mode firefox

The CRXJS example builds for both browsers in CI.