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に統合することができていない理由を見つけることができればそれは素晴らしいことです。
私はbrowserify-fsで修正プログラムを実装しましたが、問題は私のffmpegライブラリにあると思います。どうやら、ブラウザに子プロセスに関する問題があるので、ffmpegライブラリの生成関数は機能しません。私はそれをここで見つけました:https://github.com/babel/babelify/issues/175。 –
ええ、ブラウザで子プロセスを生成することは実際には不可能です。最も近いのはWebWorkerです。 browserifyは実際にブラウザでnode.jsコードを実行できるわけではないことを覚えておいてください。シムズを組み込んだcommonjsモジュールのプリパッケージャです。 – Grinde