Question

我在开发Google Chrome扩展程序时遇到问题。我需要一些特定的npm模块才能执行我的代码，所以我查看了Browserify。我没有问题地遵循所有步骤但是代码在运行时仍然会产生错误。截图附于下方。

Error when Chrome extension is only loaded

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

＆＃13;

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");
		        });
		      });
		    });
		  });

		});
	});
});

＆＃13;

<!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>

＆＃13;

如果我能找到为什么我无法正确集成browserify以便使用npm模块，那将是很棒的。

Answer 1

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

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

1 个答案: