Inform in the documentation how environment variables can be accessed in components.

[JVariance]

Inform in the documentation how environment variables can be accessed in components.

In the documentation regarding multiple browser support you write:

const target = process.env.TARGET || "chrome";

Add a notice how to use env variables in client side by prefixing them with 'VITE_'.

So if you do...

const target = process.env.VITE_BROWSER || "chrome";

//...
webExtension({
  // ...
  browser: target,
  // ...
}),
//...

...you can use it in client side like:

const {VITE_BROWSER: currentBrowser} = import.meta.env;

switch(currentBrowser) {
  case "firefox":
    // implement firefox specific feature
    break;
  case "chrome":
     // implement chrome specific feature
    break;
  default:
    break;
}

[aklinker1]

Thanks for sharing! I've added an example to the docs. b69bccb

https://vite-plugin-web-extension.aklinker1.io/guide/supporting-multiple-browsers.html#check-browser-at-runtime

That said, I would recommend using define instead and setting up a global constant like __BROWSER__. In your example, things might not work.

1. You can't destructure import.meta.env
2. import.meta.env.VITE_BROWSER will not default to chrome, it will default to undefined unless your running VITE_BROWSER=chrome vite build

Maybe I'll add this global definition by default.

[JVariance]

Oh, great suggestion, didn't know that!

Destructuring import.meta.env worked for me, though. At least in dev mode (in Svelte). But anyhow, defaulting to chrome is way better.

Maybe you could additionally inform about setting up __BROWSER__ in vite.env.d.ts as e.g. declare const __BROWSER__: "firefox" | "chrome" | "opera" | "safari" | "edge"; when using TypeScript.

[aklinker1]

Destructuring import.meta.env worked for me, though

With Vite, production and dev modes are slightly different. From their docs: "During production, these env variables are statically replaced. It is therefore necessary to always reference them using the full static string. For example, dynamic key access like import.meta.env[key] will not work."

But maybe destructing get's transpiled to the full static string and everything works lol

Maybe you could additionally inform about setting up __BROWSER__ in vite.env.d.ts

This is standard Vite stuff, so I'm not going to over-document what is already documented by Vite.

The browser can be any string you want, so each project should create their own declaration file for that. But yes, in my projects, I have a declaration file that looks like this:

// @types/globals.d.ts
type SupportedBrowser = "chrome" | "firefox" | "ios";
declare const __BROWSER__: SupportedBrowser;
declare const __VERSION__: string;
// ... other defined constants