How to convert a website to wxt (and keep both build paths as website an extension)?

[rugk]

If you have a website that you want to show as an extension (or parts / componengts of it or whatever), I AFAIK see no docs explaining the best practices. Especially as wxt seem to be opinionated about the project structure this may easily lead to clashes...

Context

I am building a little website. Coming from that initial website that is basically just storing data I thought we need to store/sync data and thus "converted" it into a WebExtension for data storage via browser.storage.sync (or similar APIs).

Anyway, the more generic question is: If you have an existing website, how to best transform it respectively use it's code (Vue components etc:) to add a

Search

I saw the page "Migrate to WXT", but essentially, it's docs about migrating from an existing extension. (BTW, it does not mention this. Aka it does not say what the migration guide covers = what the source of the migration is.)

So this doe snot really apply to websites, apparently.

Problems

I tried with LLM help and it kinda works, but:

• first of all, I tried just running it in a sub-directory of an existing repo (see Initialisation fails when rujnning in existing git sub-directory #2289), which works and creates an extension

• however, now importing stuff from the "parent" directory caused much paint for TS module resolution etc.

  • e.g.:

    Rolldown failed to resolve import "wxt/browser" from "****/src/sync/InternalWebExtSyncProvider.ts".
    This is most likely unintended because it can break your application at runtime.

  /src contains the website source code. Even if compiled from the /extension directory, it obviously cannot be resolved.

• generally, you then end up with two package.json files etc. etc. - I guess this is not best practice?

• Same for TS tsconfig.json is duplicated, though wxt is special here again, because it ships with it's own tsconfig (which is generated?) - which does not make it easier to accomplish the task to "merge" such a website project into the extension (or vice versa for that matter):

  {
     "extends": "./.wxt/tsconfig.json"
   }

• Especially, all this can cause conflicts, if packages or if the TS config actually differs, does not it?

• Fundamentally, also the project structure is not clear and totally unsolved here. Should a wxt extension belong in it's own sub-directory (like /extension) or should it be at the root? If at the root, does it even make sense to run this?

• Probably there are more issues that I do not see yet. Are there, after all?

Example project: https://github.com/rugk/gzgtracker (commit adding website using browser, commit merging package.json and different build-roots together)

Essentially I am asking for a best practice here...

[aklinker1]

1. Use a monorepo
2. Put shared code in a shared package, abstracted so it doesn't depend on extension APIs or webpage APIs
3. Import shared components where you need them.

Here's an example, but it's quite old: https://github.com/anime-skip/player

It has a shared package, packages/player, that is used by two apps in the apps directory.

Note that I am consuming the player package as an NPM package, it is built to JS and .d.ts files, meaning there are no typescript project conflicts.

[aklinker1]

There's also an official example for using turbo: https://github.com/wxt-dev/examples/tree/main/examples/monorepo-turbo