如何为 Chrome DevTools 扩展项目配置 ParcelJS

Question

我维护一个 Chrome DevTools 扩展，我利用 Gulp 来捆绑我的代码。由于 Gulp 不再维护，我希望迁移到另一个捆绑器。我开始了一个测试项目来尝试 Parcel，因为它具有 web 扩展支持。

• .parcelrc 放置在根目录中的文件告诉 Parcel 这是一个 Web 扩展项目。

{
  "extends": "@parcel/config-webextension"
}

• 应用程序入口点可以在

  src/manifest.json

  找到。

{
  "action": {
    "default_popup": "popup/popup.html"
  },
  "description": "Training Parcel Web Extension",
  "devtools_page": "devtools/devtools.html",
  "icons": {
    "128": "images/logo.png"
  },
  "manifest_version": 3,
  "name": "Training Parcel Web Extension",
  "version": "1.0.0"
}

• 包裹好像可以参考

  devtools/devtools.html

  。该文件加载

  devtools/devtools.js

  并执行以下操作：

chrome.devtools.panels.create(
  'Training Parcel Web Extension',
  '../images/logo.png',
  './panel/index.html'
)

• 一切似乎都正常，除了 Parcel 无法解决

  panel/index.html

  。有没有一种干净的方法来实现这一目标？
• 我遇到的第二个问题是由于某种原因我无法让 Parcel 监视更改并重建应用程序。我尝试了以下命令：

parcel watch src/manifest.json --host localhost --config @parcel/config-webextension

parcel serve src/manifest.json

Answer 1

为什么会发生这种情况： 包裹捆绑程序没有看到

./panel/index.html

，因为没有任何内容链接或引用它。因此它会被忽略，并且永远不会捆绑到您的

/dist

文件夹中。

解决问题 1： 更新

manifest.json

并将其作为网络资源引用

// manifest.json
...
"web_accessible_resources": [
    {
      "resources": ["devtools/panel/index.html"],
      "matches": ["<all_urls>"]
    }
  ],
"content_scripts": [],

然后将

devtool.js

中的路径更新为与清单 Web 资源相同。

chrome.devtools.panels.create(
  'Training Parcel Web Extension',
  '../images/logo.png',
  'devtools/panel/index.html'
)

这应该将

panel/index.html

与它可能调用的任何内容捆绑在一起。您的开发工具应该在弹出检查中正确加载。

关于问题2：您没有发布您遇到的错误（如果有的话），但我猜是这个错误？

Server running at http://localhost:1234
🚨 Build failed.

@parcel/transformer-webextension: Cannot read properties of undefined (reading 'flatMap')

如果是这样，修复方法是将

"content_scripts": []

添加到您的 manifest.json （这是 @parcel/config-webextension 中的一个错误，当缺少此字段时，该错误会破坏 Mv3 🤷🏽u200d♂️

之后

parcel serve src/manifest.json

应该可以工作