How to link to/open a a HTML page in a new tab? Like "Open popup in new tab"?

[rugk]

What is the intended way of wxt to link to a HTML page (just like as a normal HTML page, but shown/run in your browser)? E.g. one could re-use the existing HTML in entrypoints/popup/index.html or so depending on what is intended to be shown.

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 to link to a HTML (or, for whatever matter, to some other asset like an image or whatever), how to best open it in a wxt-compiled extension/code?

Use cases

Examples for why you would want this:

• Add an "Open in new tab" button to the popup to give the user some flexibility/option to open (I guess this may be a common use case?)
• Convert a website into an extension (a use case likely also common, I'd say, I open a new issue for that)
• Just show an asset like maybe an image in a new tab or so?

Concrete example/code

Intuitively, me (and LLMs 🙃) would write this (given the default project structure) for the popup example:

    browser.tabs.create({url: browser.runtime.getURL('entrypoints/popup/index.html')});    

However, apparently correct (after the build steps, as far as I saw in all build variants) would be:

    browser.tabs.create({url: browser.runtime.getURL('popup.html')});

Finding this really left me puzzling and I also see no docs mentioning this (Edit: Ah now I see, it's the "Output Path" in the docs, 😲 - this was not obvious IMHO) or having this in mind.

Problem

Now, the "solution" above still is problematic. It is like "guessing" a path, it's not included in the build, thus:

• if wxt changes how and where HTML files are placed/compiled to, this may easily break.
• no type/path-checking: if one writes typos here, it will not work. No TS or so catches this.

So is there any better way?

Preliminary suggestions

If there is no existing way, ideas for improvement would be:

• have a wxt-api or somehow compiled thing to get that path?
• or just rewrite the path in the source code when detected?

[aklinker1]

browser.runtime.getURL is type-safe - there's no need to guess what the output path is, WXT tells you what the possibe options are.

There has been discussion around creating constants or enums that can be used instead of a type-literal, can't look that issue up right now.

[rugk]

Ah thanks, did not import wxt there due to typing issues, as I had to use that in a different part of the project (aka the website, see #2291 ), but yeah it seems to work, basically.

[rugk]

For reference: This commit fixes it by abstracting away the non-type-safe version.