Google Chrome拡張機能でBrowserifyとNodeJSの統合に関する問題

Google Chrome拡張機能の開発に問題があります。私はコードを実行するためにいくつかの特定のnpmモジュールが必要なので、私はBrowserifyを調べました。私は問題なくすべての手順を踏んだが、コードは実行時にエラーを生成する。スクリーンショットは以下に添付されています。Google Chrome拡張機能でBrowserifyとNodeJSの統合に関する問題

Error when Chrome extension is only loaded

すべての私のファイルは、同じプロジェクトフォルダ（popup.html、popup.js、bundle.js、など）に位置しています。私は1つのhtmlファイルと1つのjavascriptファイル（bundle.jsを除く）しか持っていません。は、ここに私のpopup.htmlコードです：

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

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

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

 
\t \t \t var url = tab.url; 
 

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

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

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

 
\t \t }); 
 
\t }); 
 
});

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

私はきちんとNPMモジュールを使用するためにbrowserifyに統合することができていない理由を見つけることができればそれは素晴らしいことです。

出典

2017-01-20 Nishanth Salinamakki

ブラウザでは、ファイルシステムにアクセスすることはできません。通常、ブラウザには独自のストレージメカニズム（Cookie、localstorage、またはブラウザ固有のシステムchrome.storageなど）があります。 Browserifyはこれを回避する方法がなく、require('fs')のシムを提供しません。ディスクに直接書き込むのではなく、アプリにダウンロード可能なバージョンのファイルを提供させる必要があります。その場合、ユーザーは手動で保存する必要があります。拡張機能の外でファイルにアクセスする必要がない場合は、前にリンクしたapiを使用するか、ブラウザのストレージに仮想ファイルシステムを作成するbrowserify-fsのようなファイルを置くことができます。

出典

2017-01-20 08:52:41 Grinde

私はbrowserify-fsで修正プログラムを実装しましたが、問題は私のffmpegライブラリにあると思います。どうやら、ブラウザに子プロセスに関する問題があるので、ffmpegライブラリの生成関数は機能しません。私はそれをここで見つけました：https://github.com/babel/babelify/issues/175。 –

ええ、ブラウザで子プロセスを生成することは実際には不可能です。最も近いのはWebWorkerです。 browserifyは実際にブラウザでnode.jsコードを実行できるわけではないことを覚えておいてください。シムズを組み込んだcommonjsモジュールのプリパッケージャです。 – Grinde

Google Chrome拡張機能でBrowserifyとNodeJSの統合に関する問題

答えて

関連する問題