Проблемы с Browserify и NodeJS Integration в Google Chrome Extension

У меня возникли проблемы с разработкой расширения Google Chrome. Мне нужны некоторые конкретные модули npm для выполнения моего кода, поэтому я посмотрел в Browserify. Я выполнил все шаги без проблем, но при запуске кода все еще возникают ошибки. Снимок экрана приведен ниже.Проблемы с Browserify и NodeJS Integration в Google Chrome Extension

Error when Chrome extension is only loaded

Все мои файлы находятся в одной и той же папке проекта (popup.html, popup.js, bundle.js и т.д.). У меня есть только один html-файл и один файл 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>

Было бы замечательно, если бы я мог выяснить причину, почему я не был в состоянии должным образом интегрировать browserify для того, чтобы использовать модули НПМ ,

источник

2017-01-20 Nishanth Salinamakki

Браузеры не позволяют получить доступ к файловой системе, вместо этого у них обычно есть свои собственные механизмы хранения (файлы cookie, localstorage или система, специфичная для браузера, такая как chrome.storage). Browserify не имеет возможности обойти это и не предоставляет прокладки для require('fs'). Вместо того чтобы писать прямо на диск, вам нужно, чтобы ваше приложение обеспечивало загружаемую версию ваших файлов, которую пользователь должен будет вручную сохранить. Если вам не нужны файлы, которые будут доступны за пределами расширения, вы можете использовать api, который я связал ранее, или добавить что-то вроде browserify-fs, которое создает виртуальную файловую систему в хранилище браузера.

источник

2017-01-20 08:52:41 Grinde

Я применил ваше исправление с помощью браузера-fs, но я думаю, что проблема связана с моей библиотекой ffmpeg. По-видимому, в браузере есть проблемы с дочерними процессами, поэтому функция spawn в библиотеке ffmpeg не работает. Я нашел его здесь: https://github.com/babel/babelify/issues/175. –

Да, на самом деле невозможно запустить дочерние процессы в браузере. Самое близкое - это WebWorker. Помните, что браузер не позволяет запустить код node.js в браузере, это просто предварительный пакет для модулей commonjs с некоторыми встроенными прокладками. – Grinde

Проблемы с Browserify и NodeJS Integration в Google Chrome Extension

ответ

Смежные вопросы