Google 크롬 확장 프로그램에서 Browserify 및 NodeJS 통합 관련 문제

Google 크롬 확장 프로그램을 개발하는 데 문제가 있습니다. 내 특정 코드를 실행하기 위해 특정 npm 모듈이 필요하므로 Browserify를 살펴 보았습니다. 문제없이 모든 단계를 따라 갔지만 코드를 실행하면 오류가 발생합니다. 스크린 샷은 아래에 첨부되어 있습니다.Google 크롬 확장 프로그램에서 Browserify 및 NodeJS 통합 관련 문제

Error when Chrome extension is only loaded

내 모든 파일은 동일한 프로젝트 폴더 (popup.html, popup.js, bundle.js 등)에 있습니다. 나는 하나의 html 파일과 하나의 자바 스크립트 파일 (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

브라우저는 사용자가 파일 시스템에 액세스하는 것을 허용하지 않으며 대개 고유 한 저장소 메커니즘 (쿠키, 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 코드를 실행할 수는 없으며, shim을 내장 한 commonjs 모듈의 사전 패키지 도구 일 뿐이라는 것을 기억하십시오. – Grinde

Google 크롬 확장 프로그램에서 Browserify 및 NodeJS 통합 관련 문제

답변

관련 문제