提问人：temelm 提问时间：10/16/2023 更新时间：10/28/2023 访问量：160
如何为 Chrome DevTools 扩展项目配置 ParcelJS
How to configure ParcelJS for Chrome DevTools extension project
问：
我维护着一个 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.htmldevtools/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
答：
1赞
MimiEAM
10/19/2023
#1
改用CRXJS更新：它抱怨相对路径 - 在第26行删除使其工作./
原始答案
为什么会这样：包裹捆绑器看不到，因为没有链接或引用它。因此，它将被忽略，并且永远不会捆绑到您的文件夹中。./panel/index.html/dist
要修复问题 1，请执行以下操作：
更新时将其引用为 Web 资源manifest.json
// manifest.json
...
"web_accessible_resources": [
{
"resources": ["devtools/panel/index.html"],
"matches": ["<all_urls>"]
}
],
"content_scripts": [],
然后，将路径更新为与清单 Web 资源相同。devtool.js
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')
如果是这样，修复程序正在添加到您的manifest.json（这是 @parcel/config-webextension 中的一个错误，当缺少此字段🤷🏽 ♂️时，该错误会与 Mv3 中断"content_scripts": []
在那之后应该可以工作parcel serve src/manifest.json
评论
1赞
temelm
10/19/2023
应用修复程序后，这两个问题都得到了解决。谢谢！
0赞
MimiEAM
10/20/2023
我很高兴这很有帮助！
1赞
wOxxOm
10/20/2023
由于 API 设计不需要使用 devtools 面板，因此它一定是 Parcel 中的错误。请注意，使用此功能可使网站检测到扩展。web_accessible_resources
0赞
temelm
10/25/2023
@MimiEAM - 我可以厚颜无耻地问CRXJS的等效问题吗？您为 Parcel 建议的解决方案似乎不适用于 Vite+CRXJS。我为此创建了一个新的测试项目。github.com/temelm/training-crx-vanilla
1赞
temelm
10/31/2023
@MimiEAM 谢谢你！它现在正在部分工作。 加载自身，但无法加载其任何资源（样式、脚本等）。我同意你的看法;我认为我需要用CRX以不同的方式处理这个问题。我有时间后会调查。另外，如果你对浏览器扩展开发感兴趣，我遇到了 PlasmoJS，它看起来很有前途:)devtools/panel/index.html
评论