New Tab

[claudiojulioferraz]

HEY. I have been trying unsuccessfully to make it so that when I click on a button in the extension's popup it opens a new tab with a new page/"instance" of Svelte.

However, if I use browser.tabs.create and point it to another Svelte component, it doesn't work. It only works if I point it like this: browser.tabs.create({ url: "/src/popup.html" })}. And then a new tab opens that exactly copies the popup.

How can I resolve this? Anyway, thank you very much for this wonderful extension!

Automatically translated.

[aklinker1]

Like you said, it is possible to open HTML files included in the extension, like your popup.html.

It's also possible to configure the plugin to build additional HTML files not listed in your manifest.json.

So you've got listed files, like your popup.html, that are listed in your manifest, and you've got unlisted files that are not listed in your manifest.json. Both listed and unlisted files are writen to the dist/ directory and can be loaded at runtime.

So what you're looking for is an unlisted HTML file.

First, create the file.

touch pages/some-page.html

Then add it to the additionalInpits plugin option.

Build the extension, and you'll see the new HTML file in your dist/ directory at dist/pages/some-page.html

You can get the url of this file at runtime with browser.runtime.getURL('/pages/some-page.html').

[aklinker1]

Here's an example project demonstrating this behavior.

example.zip

Also note that you don't need to use browser.tabs.create for this. You can use a regular anchor element, or you can use the window.open API.

You only need to use the tabs API in the background script/service worker to open a new tab. Use regular JS APIs when possible.

[claudiojulioferraz]

It worked! Thank you so much. I'm sure that all this zeal and care for the project and the users will yield many opportunities in your career. Stay in peace!

Automatically translated!