OAuth correct place to put the public key?

[andrew-w-ross]

Following the google steps on enabling OAuth in extensions there is a step where you have to provide the public key in the manifest.json.

This works if I place it in the manifest on wxt.config.ts:

import { defineConfig } from "wxt";

// https://wxt.dev/guide/configuration.html
export default defineConfig({
  srcDir: "src",
  publicDir: "public",
  manifest: {
    permissions: ["storage", "identity"],
    //@ts-expect-error - Key isn't a valid property of the UserManifest type
    key: "PUBLIC_EXTENSION_KEY",
    oauth2: {
      client_id: "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
      //If you're following along with the google tutorial they say you don't need to include any scopes and suggest using an array with an
      //empty string. This is outdated and you need to include the following scopes at a minimum.
      scopes: ["openid", "email", "profile"],
    },
  },
});

This is obviously not the correct place to put it as the public key would be the same when deploying to other web stores. My question is where should I put the public key or browser specific manifest settings so they'll show up when I run in dev?

What else I've tried

There doesn't seem to be a way to do browser specific settings from the manifest documentation and anything browser specific seems to be on the entrypoints.

Seems the best option I have now is to set the key when import.meta.env.CHROME is true but I'm not sure if those are set in the wxt.config.ts itself.

[aklinker1]

The manifest field can be a function, and the browser being targeted is available in the first argument.

import { defineConfig } from "wxt";

const clientIds = {
  chrome: "...",
  edge: "...",
  firefox: "...",
  // ...
};

// https://wxt.dev/guide/configuration.html
export default defineConfig({
  srcDir: "src",
  publicDir: "public",
  manifest: ({ browser }) => ({
    permissions: ["storage", "identity"],
    //@ts-expect-error - Key isn't a valid property of the UserManifest type
    key: "PUBLIC_EXTENSION_KEY",
    oauth2: {
      client_id: clientIds[browser],
      //If you're following along with the google tutorial they say you don't need to include any scopes and suggest using an array with an
      //empty string. This is outdated and you need to include the following scopes at a minimum.
      scopes: ["openid", "email", "profile"],
    },
  }),
});

This is mentioned in the API reference, but that is super hard to read, so I'll add info to the manifest page you linked.

[aklinker1]

I've updated the docs: https://wxt.dev/guide/manifest.html#per-browser-configuration

[andrew-w-ross]

@aklinker1 Thanks so much, I've bother you twice in two days and both times you replied really quickly and updated the docs because of it. I think this project is going to be a huge success.

[aklinker1]

No worries! Writing docs is hard... I need people to tell me when they're missing something.