使用 Vite+React 在 Chrome 扩展上创建新标签

Question

我正在使用 Vite + React 构建一个 chrome 扩展，一切都工作正常，直到我遇到了一个我不知道会遇到的问题。理想情况下，我希望用户单击弹出窗口中的按钮，然后该按钮将打开一个新选项卡，该选项卡将通过反应呈现另一个页面。 我刚刚意识到整个 Vite 结构构建了一个单独的 index.html，它现在是我的扩展弹出窗口。 那么有谁知道我怎样才能让 Vite 在完全不同的 React “实例”上构建另一个页面，比如说DetailedView.html，并为此创建一个新选项卡？

这就是我到目前为止正在尝试的：

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"),
      },
    },
  },
});

这是我的文件夹结构：

└── 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

构建完成正常，但是当我尝试在 chrome 上重新加载扩展时，它说它无法加载 service_worker.js 并且无法加载清单。

这可能吗？如果是的话，我做错了什么？

Answer 1

经过几个小时试图找到问题后，我发现问题只是由于某种原因我的manifest.json有“service_worker.js”而不是“.ts”，这就是问题...