无法在React Chrome扩展程序中调试单个浏览器操作js文件

Question

我正在使用react开发一个chrome扩展，它具有一个后台脚本和多个浏览器操作js文件。这是我的项目结构

MyExtension
|__build
|__public
|    |__images
|    |__scripts
|    |__index.html
|    |__manifest.json
|
|__src
    | 
    |___browser action js files...

这是我的manifest.json

    {
      "name": "MyExtension",
      "version": "0.0.1",
      "manifest_version": 2,
      "description": "MyExtension",
      "icons": {
        "16": "images/icon-16.png",
        "128": "images/icon-128.png"
      },
      "default_locale": "en",
      "background": {
        "scripts": [
          "scripts/background.js"
        ],
        "persistent": false
      },
      "permissions": [
        "background",
        "notifications",
        "tabs",
        "storage",
        "alarms",
        "webNavigation",
        "*://*/"
      ],
      "browser_action": {
        "default_icon": {
          "16": "images/icon-16.png",
          "19": "images/icon-19.png",
          "38": "images/icon-38.png",
          "128": "images/icon-128.png"
        },
        "default_title": "MyExtension",
        "default_popup": "index.html"
      },
      "web_accessible_resources": [
        "images/icon-48.png"
      ],
      "content_security_policy": "script-src 'self' 'sha256- 
    5As4+3YpY62+l38PsxCEkjB1R4YtyktBtRScTJ3fyLU='; object-src 'self'"

}

我使用命令npm run build来构建将build设置为react-scripts build的项目。之前，我曾经通过检查扩展程序弹出窗口并在chrome开发人员工具窗口的 Source 目录的src目录下的js文件中设置断点来调试浏览器操作文件。我曾经通过点击chrome：// extensions页面中的background page链接来调试后台脚本，如下图所示。

但是最近，我注意到浏览器操作源文件不显示在“源”选项卡下，如下图所示。

我只得到了两个chunk.js文件，它们似乎是src目录中所有文件的捆绑版本。他们有很多自动生成的代码，因此我无法在所需的文件中设置断点。

我有什么办法让单个源文件出现在“开发人员工具”窗口的“ 源”标签中？