Google Chrome 扩展程序中 Browserify 和 NodeJS 集成的问题答案

【问题标题】：Issues with Browserify and NodeJS Integration in Google Chrome ExtensionGoogle Chrome 扩展程序中 Browserify 和 NodeJS 集成的问题
【发布时间】：2017-01-20 08:13:47
【问题描述】：

我在开发 Google Chrome 扩展程序时遇到问题。我需要一些特定的 npm 模块来执行我的代码，所以我研究了 Browserify。我按照所有步骤都没有问题，但是代码在运行时仍然会产生错误。下面附上截图。

Error when Chrome extension is only loaded

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

document.addEventListener('DOMContentLoaded', function() {
	var convertMP3Button = document.getElementById("getLinkAndConvert");
	convertMP3Button.addEventListener("click", function() {
		chrome.tabs.getSelected(null, function(tab) { // 'tab' has all the info

			var fs = require('fs');
			var ytdl = require('ytdl-core');
			var ffmpeg = require('fluent-ffmpeg');
			var ffmetadata = require("ffmetadata");
			var request = require('request');

			console.log(tab.url);       //returns the url
			convertMP3Button.textContent = tab.url;

			var url = tab.url;

		  var stream = ytdl(url);
		    //.pipe(fs.createWriteStream('/Users/nishanth/Downloads/video.mp4'));

		  // Helper method for downloading
		  var download = function(uri, filename, callback){
		    request.head(uri, function(err, res, body){
		      request(uri).pipe(fs.createWriteStream(filename)).on('close', callback);
		    });
		  };

			ytdl.getInfo(url, function(err, info) {
		    console.log("INFO: " + JSON.stringify(info, null, 2));
		    var process = new ffmpeg({source:stream})
		    process.save('/Users/nishanth/Downloads/' + info.title + '.mp3').on('end', function() {
		      console.log("PROCESSING FINISHED!");
		      download(info.thumbnail_url, "/Users/nishanth/Downloads/image.jpg", function() {
		        console.log("DOWNLOADED IMAGE");
		        var options = {
		          artist: info.author,
		          attachments: ["/Users/nishanth/Downloads/image.jpg"]
		        };
		        ffmetadata.write('/Users/nishanth/Downloads/' + info.title + '.mp3', {}, options, function(err) {
		          if (err)
		            console.error("Error writing cover art: " + err);
		          else
		            console.log("Cover art added");
		        });
		      });
		    });
		  });

		});
	});
});

<!doctype html>
<html>
  <head>
    <title>Youtube Music</title>
    <script src="bundle.js"></script>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>Youtube Music</h1>
    <button id="getLinkAndConvert">Download Song Now!</button>
  </body>
</html>

如果我能找出我无法正确集成 browserify 以使用 npm 模块的原因，那就太好了。

【问题讨论】：

标签： javascript node.js google-chrome-extension npm browserify

【解决方案1】：

浏览器不允许您访问文件系统，相反，它们通常有一些自己的存储机制（cookie、localstorage 或特定于浏览器的系统，如 chrome.storage）。 Browserify 无法解决这个问题，也没有为require('fs') 提供垫片。您需要让您的应用程序提供文件的可下载版本，而不是直接写入磁盘，然后用户必须手动保存。如果您不需要在扩展程序之外访问文件，您可以使用我之前链接的 api，或者放入类似 browserify-fs 的东西，它会在浏览器的存储中创建一个虚拟文件系统。

【讨论】：

我用 browserify-fs 实现了你的修复，但我认为问题出在我的 ffmpeg 库上。显然，浏览器中的子进程存在问题，因此 ffmpeg 库中的 spawn 功能不起作用。我在这里找到它：github.com/babel/babelify/issues/175.
是的，实际上不可能在浏览器中生成子进程。最接近的是 WebWorker。请记住，browserify 实际上并不允许您在浏览器中运行 node.js 代码，它只是 commonjs 模块的预打包器，带有一些内置的垫片。