Add support for Edge and Firefox

[vioao]

Describe the problem

• Add support for Edge and Firefox.
• Add extension file builder.

Describe the proposed solution

• add the webextension-polyfill package
• support parse different mainfest.json
  • firefox.mainfest.json
  • edge.mainfest.json
• export dist to different folders
  • dist
    • firefox
    • chrome
    • edge

Alternatives considered

Still use a single mainfest.json. But inside the configuration. We could set item for different browser. eg.

• "manifest_version": 3,
• "{chrome}.manifest_version": 3,
• "{firefox}.manifest_version": 2,

Importance

would make my life easier

[JoeyDoey]

shameless plug @vioao . checkout Bedframe. it uses crx under the hood and makes it multi-browser.

you end up with:

- dist/
   - firefox
   - chrome
  - edge

all the vite + crx advantages + multibrowser.

however, as is crx already supports firefox + all chromium (including edge) browsers)

one thing you could do just now to go cross-browser in the standard vite+crx setup is to take advantage of the command and mode features in vite.

1. update your vite.config to use the function signature instead of the default. i.e

   export default defineConfig(({ command, mode }) => {                                  
   })

nb:

• command is either dev or build i.e. when you run npm run dev <~~ the command i dev
• mode is an arbitrary string that you can use to set the mode. in Bedframe I do, npm run dev --mode edge

you could expand on this and have an inline vite plugin (just a function) that'll build/dev the specific extension based on the command+mode you pass in.

I hope that makes sense / is helpful

[JoeyDoey]

reference implementation: https://github.com/nyaggah/bedframe/blob/main/packages/core/src/lib/get-manifest.ts#L25