React Chrome扩展点击后弹出空白窗口，点击EXPAND按钮无法打开新标签页的问题求助

我最近在折腾一个简单的Chrome扩展，需求很简单：点击扩展图标会弹出一个带EXPAND按钮的小弹窗（对应Popup.js），点击这个按钮要能打开一个新标签页展示内容（对应Window.js）。结果现在完全没法正常工作，具体问题：

• 加载扩展后，点击图标弹出的是空白窗口
• 连弹窗都显示不出来，更别说点击按钮打开新标签页了

下面是我的项目代码和遇到的情况，求大佬帮忙排查问题！

项目文件代码 #

App.js #

import React from "react";
import Popup from "./Popup";

const App = () => {
  return (
      <div>
        <h1>React Chrome Extension</h1>
        <Popup />
      </div>
  );
};

export default App;

Popup.js #

/*global chrome*/
import React from "react";

const Popup = () => {
    const handleExpandClick = () => {
        chrome.tabs.create({
            url: chrome.runtime.getURL("window.html")
        });
    };

    return (
        <div style={{ width: "200px", height: "100px", padding: "20px" }}>
            <button onClick={handleExpandClick}>EXPAND</button>
        </div>
    );
};

export default Popup;

Window.js #

/*global chrome*/
import React from "react";

const Window = () => {
    return (
        <div>
            <h1>This is the new window opened by the extension!</h1>
        </div>
    );
};

export default Window;

background.js #

chrome.runtime.onInstalled.addListener(() => {
    console.log("Extension installed!");
});

package.json #

{
  "name": "react-chrome-extension",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cra-template": "1.2.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

manifest.json #

{
  "manifest_version": 3,
  "name": "React Chrome Extension",
  "version": "1.0",
  "description": "A simple React-based Chrome extension",
  "permissions": ["tabs"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "host_permissions": [
    "http://*/*",
    "https://*/*"
  ],
  "icons": {
    "16": "favicon.ico",
    "48": "favicon.ico",
    "128": "favicon.ico"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["background.js"]
    }
  ]
}

项目目录结构 #

我的项目目录是这样的：

• 根目录
  • src/
    • App.js
    • Popup.js
    • Window.js
  • public/
    • popup.html
    • window.html
    • favicon.ico
    • （其他从build文件夹复制来的静态文件）
  • package.json
  • manifest.json
  • background.js

Build与文件复制情况 #

我已经把npm run build生成的build文件夹内容全部复制到了public文件夹里，但发现一个关键问题：build文件夹及其子目录里根本找不到window.js和popup.js这两个文件！

实际运行现象 #

1. 在Chrome中加载扩展后，图标能正常显示在工具栏
2. 点击图标弹出的是完全空白的窗口，没有任何按钮
3. 查看public里的popup.html和window.html，内容如下：

popup.html #

<!-- public/popup.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Popup</title>
</head>
<body>
<div id="root"></div>
<script src="popup.js"></script>
</body>
</html>

window.html #

<!-- public/window.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Window</title>
</head>
<body>
<div id="root"></div>
<script src="window.js"></script>
</body>
</html>

我猜弹窗空白是因为这两个html引用的js文件根本不存在，但不知道怎么生成对应的js文件，也不确定还有没有其他配置错误导致按钮点击功能失效。有没有大佬能帮我指条明路，应该怎么修改才能让扩展正常工作？

备注：内容来源于stack exchange，提问作者parsecer