New Tab on Chrome Extension using Vite+React

Im building a chrome extension using Vite + React and everything is working fine until I got to a problem I had no idea I would face. Ideally I would like for the user to click on a button at the popup and then that button would open a new tab that would render another page with react.
I just realized the whole Vite structure builds a single index.html that is now my popup for the extension.
So does anyone know how can I make Vite build another page, lets say detailedView.html, on a completely different “instance” of react and them creating a new tab for that?

This is what I’m trying so far:

manifest.json:

{
  "manifest_version": 3,
  "name": "Price Tracker",
  "version": "1.0.0",
  "description": "Tracks price changes for your favorite products.",
  "permissions": ["storage", "bookmarks", "tabs", "<all_urls>"],
  "host_permissions": ["*://*/*"],
  "background": {
    "service_worker": "service_worker.js"
  },
  "action": {
    "default_popup": "index.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "detailed_page": "detailedView.html"
}

vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
        tab: resolve(__dirname, "detailedView.html"),
      },
    },
  },
});

and this is my folder structure:

└── detailedView.html
└── index.html
└── package-lock.json
└── package.json
└── postcss.config.js
└── public/
    └── images/
        └── icon128.png
        └── icon16.png
        └── icon48.png
    └── manifest.json
    └── service_worker.ts
└── README.md
└── src/
    └── components/
        └── ...
    └── detailed/
        └── App.css
        └── App.tsx
        └── index.css
        └── main.tsx
    └── hooks/
        └── ...
    └── popup/
        └── App.css
        └── App.tsx
        └── index.css
        └── main.tsx
    └── utils/
        └── ...
    └── vite-env.d.ts
└── tailwind.config.js
└── tsconfig.json
└── tsconfig.node.json
└── vite.config.ts

The build in completing ok, but when I try to reload the extension on chrome it says It cant load service_worker.js and It cant load the manifest.

Is this even possible, and if so, what am I doing wrong?

After hours trying to find the issue, I found out the problem was just that for some reason my manifest.json had “service_worker.js” instead of “.ts”, and that was the problem…