How to create new tab to display contents

[realrecordzLab]

How this boilerplate can be used to create an extension that will use an entire tab to show contents?

[mubaidr]

Yes, why not! Infact all the apps (popup, options, setup etc) routes can be accessed anywhere.

• Create page in common/pages
• open a new tab using chrome api
• load the URL defined in first step

[realrecordzLab]

Yes, why not! Infact all the apps (popup, options, setup etc) routes can be accessed anywhere.

• Create page in common/pages
• open a new tab using chrome api
• load the URL defined in first step

I've solved in a simple way that I think needs to be implemented as part of the extension. I've copied the popup folder and after this renamed it in new-tab, then modified the route to reflect the name I want to assign to the new tab and used the chrome.action.onClicked.addListener to listen when the extension icon is clicked. This will work only if the popup is not set into the manifest. Anyway I will try the suggested solution with the page inside the common folder.

Thank you for the reply

[mubaidr]

This is hacky stuff! Might run into issues when scaling your extension.

[realrecordzLab]

This is hacky stuff! Might run into issues when scaling your extension.

I'm trying to follow your suggestion, but not sure to understand needed steps.
Inside the pages folder I need to create a component or an html page?

This is not clear for me at the moment because I see that each predefined folder have inside js, html and scss files. This is why I've opted for the hacky solution.

[mubaidr]

This is hacky stuff! Might run into issues when scaling your extension.

I'm trying to follow your suggestion, but not sure to understand needed steps. Inside the pages folder I need to create a component or an html page?

This is not clear for me at the moment because I see that each predefined folder have inside js, html and scss files. This is why I've opted for the hacky solution.

Both will work fine, I mean, it depends on the suage here. If you want to overried chrome new tab then you need to use html page (complete vue app). For this you need to add chrome_url_overrides section to manifest file.

If you just want to open an extension link in new tab you can just do it by adding new page to /pages directory. (can even load any page from options/ popup etc too)

[realrecordzLab]

This is hacky stuff! Might run into issues when scaling your extension.

I'm trying to follow your suggestion, but not sure to understand needed steps. Inside the pages folder I need to create a component or an html page?
This is not clear for me at the moment because I see that each predefined folder have inside js, html and scss files. This is why I've opted for the hacky solution.

Both will work fine, I mean, it depends on the suage here. If you want to overried chrome new tab then you need to use html page (complete vue app). For this you need to add chrome_url_overrides section to manifest file.

If you just want to open an extension link in new tab you can just do it by adding new page to /pages directory. (can even load any page from options/ popup etc too)

I will need to open a new tab not override the new tab default page. Into the pages folder I will need to create a vue file right?Then call it from what entry point?

[mubaidr]

In short, yes!

I will try to add an example here, when I have time.

[mubaidr]

@realrecordzLab You can show/ load any existing app in new tab, like popup, setup etc But for separation of concern:

• clone popup vue app
• rename it to new-tab
• If you are using older version of this template, you have to add new-tab to vite config too. Just look at example of setup page and copy it. In recent version, it will be automatically registered.
• open a new tab
• load url using chrome.runtime.getURL("src/ui/new-tab/index.html#/")

If you have any questions, feel free to contact.