Javascript Google Chrome扩展中的Browserify和NodeJS集成问题

我在开发Google Chrome扩展时遇到了问题。我需要一些特定的npm模块来执行我的代码，所以我研究了Browserify。我毫无疑问地遵循了所有步骤，但代码在运行时仍会产生错误。截图附在下面

所有我的文件都位于同一个项目文件夹中（popup.html、popup.js、bundle.js等）。我只有一个html文件和一个javascript文件（不包括bundle.js）。 以下是我的popup.html代码：

document.addEventListener（'DOMContentLoaded'，function（）{
var convertMP3Button=document.getElementById（“getLinkAndConvert”）；
convertMP3Button.addEventListener（“单击”，函数（）{
getSelected（null，函数（tab）{/'tab'包含所有信息
var fs=需要（'fs'）；
var ytdl=需要（'ytdl-core'）；
var ffmpeg=require（'fluent-ffmpeg'）；
var ffmetadata=require（“ffmetadata”）；
var请求=要求（“请求”）；
console.log（tab.url）；//返回url
convertMP3Button.textContent=tab.url；
var url=tab.url；
var-stream=ytdl（url）；
//.pipe（fs.createWriteStream（'/Users/nishanth/Downloads/video.mp4'）；
//下载的助手方法
var download=函数（uri、文件名、回调）{
head（uri，函数（err，res，body）{
请求（uri）.pipe（fs.createWriteStream（filename））.on（'close'，callback）；
});
};
ytdl.getInfo（url，函数（err，info）{
log（“INFO:+JSON.stringify（INFO，null，2））；
var进程=新的ffmpeg（{source:stream}）
process.save（'/Users/nishanth/Downloads/'+info.title+'.mp3'）。在（'end'，function（）上）{
log（“处理完成！”）；
下载（info.thumbnail_url，“/Users/nishanth/Downloads/image.jpg”，函数（）{
console.log（“下载的图像”）；
变量选项={
艺术家：info.author，
附件：[“/Users/nishanth/Downloads/image.jpg”]
};
ffmetadata.write（'/Users/nishanth/Downloads/'+info.title+'.mp3'，{}，选项，函数（err）{
如果（错误）
控制台错误（“错误写入封面艺术：“+err”）；
其他的
控制台日志（“添加封面艺术”）；
});
});
});
});
});
});
});

Youtube音乐
Youtube音乐
现在下载歌曲！
浏览器不允许您访问文件系统，相反，它们通常有自己的一些存储机制（cookie，或类似浏览器的特定系统）。Browserify没有办法解决这个问题，也没有为
require（'fs'）
提供垫片。您需要让应用程序提供文件的可下载版本，然后用户必须手动保存，而不是直接写入磁盘。如果您不需要在扩展之外访问文件，您可以使用我之前链接的api，或者在浏览器的存储中插入类似的东西来创建虚拟文件系统。
我用browserify fs实现了您的修复，但我认为问题在于我的ffmpeg库。显然，浏览器中的子进程存在问题，因此ffmpeg库中的spawn函数无法工作。我在这里找到了：。是的，在浏览器中不可能生成子进程。最接近的是WebWorker。记住，browserify实际上不允许您在浏览器中运行node.js代码，它只是带有一些内置垫片的commonjs模块的预打包程序。