Javascript 无法调试扩展名中的单个浏览器操作js文件

我正在使用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 developer tools窗口的Source目录下的

src

目录下的js文件中设置断点来调试浏览器操作文件。我过去常常通过单击中的

background页面

链接来调试后台脚本chrome://extensions 页面，如下图所示

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

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

---

有没有办法让单个源文件显示在“开发人员工具”窗口的“源”选项卡中？

不要构建生产版本，请尝试“npm开始”查看这些文件。或者确保您的Web包已配置为生成源地图。@Vaibhav，我已将Web包配置为生成源地图，但仍然无法获取它

npm start

确实在单独的选项卡中显示了我的文件，但我无法调试它们，除非它们显示在扩展的“检查弹出窗口”中。@wOxxOm“browserAction”是指当右键单击扩展图标并单击“检查”时出现的browserAction弹出页面。谢谢你的链接。但是，我一直在检查正确的dev tools窗口，因此没有多大帮助。我已经更新了问题中的manifest.json，供您参考。请告诉我您的想法。您是如何使用CRA设置React应用程序的？如果是，则弹出，您需要手动配置webpack

npm start

应运行webpack dev server，以便在编辑代码时获得实时更新。虽然npm构建应该照常进行。@VaibhavVishal感谢您的建议，但不幸的是，这也不起作用。然后，我尝试在旧版本的Chrome（Chrome67）上运行我的扩展，我可以在那里看到我的js源文件。甚至在歌剧中也可以看到。最新版本的Chrome正在隐藏这些文件。