使用vite构建Web扩展的react项目时background.js和content.js在哪里

Question

我是 React 新手，我使用

vite

我想创建带有背景和内容脚本的 Web 扩展

background.jsx

现在是空的，这里是

content.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from "./App.jsx"

const root = document.createElement('div')
root.id = "react-root"

document.body.appendChild(root)

ReactDOM.createRoot(root).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

它只是将 root div 添加到主机站点并在其中渲染应用程序组件

（

App

是pupop的组件，需要添加到当前可见选项卡中）

问题是我无法访问

content.jsx

 中的 

manifest.json

如果我在构建后将

content.jsx

放入

/public

中，它仍然是

.jsx

并且我无法在网络扩展中使用它

如果我把它放在

/src

中，它会将它与所有

index.js

代码一起添加到

App

中，所以我也无法使用它

我的项目很失败，因为这是我第一个使用

react

和

vite

的项目，我知道如何制作 Web 扩展，但只能使用普通 javascript，所以解决起来可能很容易，但我观看的教程仅使用

index.html

作为弹出窗口或其他没有

background.js

或

content.js

的内容

Answer 1

我最终只是在“/public”文件夹中创建了一个普通的.js文件，并使用它，应用程序的其余部分是基于react的“.jsx”，当它构建时，它会创建一个我可以在弹出窗口中渲染的.js文件使用公开的“content.js”和“background.js”，我认为这就是我解决问题的方法，但我不确定在经历了一番挣扎后我是否离开了该项目