Chrome 확장 : 디스크에 파일을 저장하는 방법
현재 모든 이미지 또는 이미지 링크를 하드 드라이브에 저장할 수있는 Google 크롬 확장 프로그램을 만들고 있습니다.
문제는 JS 또는 Google Chrome Extension API를 사용하여 디스크에 파일을 저장하는 방법을 모른다는 것입니다.
아이디어가 있습니까?
HTML5 FileSystem 기능 을 사용하여 Download API를 사용하여 디스크에 쓸 수 있습니다 . 이것이 디스크에 파일을 다운로드하는 유일한 방법이며 제한적입니다.
NPAPI 플러그인을 살펴볼 수 있습니다. 필요한 작업을 수행하는 또 다른 방법은 XHR POST를 통해 외부 웹 사이트에 요청을 보낸 다음 파일 저장 대화 상자로 표시되는 파일을 다시 검색하는 또 다른 GET 요청을 보내는 것입니다.
예를 들어 브라우저 확장 프로그램 인 내 행 아웃의 경우 HTML5 Canvas에서 직접 디스크로 사진을 다운로드하는 유틸리티를 만들었습니다. 여기에서 코드를 살펴볼 수 있습니다. capture_gallery_downloader.js 코드는 다음과 같습니다.
var url = window.webkitURL || window.URL || window.mozURL || window.msURL;
var a = document.createElement('a');
a.download = 'MyHangouts-MomentCapture.jpg';
a.href = url.createObjectURL(dataURIToBlob(data.active, 'jpg'));
a.textContent = 'Click here to download!';
a.dataset.downloadurl = ['jpg', a.download, a.href].join(':');
HTML5에서 URI를 Blob으로 변환하는 구현을 원한다면 여기에 내가 한 방법이 있습니다.
/**
* Converts the Data Image URI to a Blob.
*
* @param {string} dataURI base64 data image URI.
* @param {string} mimetype the image mimetype.
*/
var dataURIToBlob = function(dataURI, mimetype) {
var BASE64_MARKER = ';base64,';
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
var bb = new this.BlobBuilder();
bb.append(uInt8Array.buffer);
return bb.getBlob(mimetype);
};
그런 다음 사용자가 다운로드 버튼을 클릭하면 "다운로드"HTML5 파일 API를 사용하여 blob URI를 파일로 다운로드합니다.
나는 오랫동안 이미지를 일괄 다운로드하기 위해 크롬 확장을 만들고 싶었습니다. 그러나 겉보기에 적용 가능한 유일한 옵션은 크롬과 파이어 폭스 모두 더 이상 지원을 원하지 않는 것처럼 보이는 NPAPI이기 때문에 매번 실망했습니다.
이 Stackoverflow 게시물을 살펴보기 위해 '디스크에 파일 저장'기능을 구현하고 싶은 사람들 에게이 게시물 아래의 의견이 많은 도움이됩니다.
이제 크롬 31+ 이후로 chrome.downloads
API가 안정되었습니다. 프로그래밍 방식으로 파일을 다운로드하는 데 사용할 수 있습니다. 사용자가 ask me before every download
크롬 설정에서 고급 옵션을 설정하지 않은 경우 사용자에게 확인 메시지를 표시하지 않고 파일을 저장할 수 있습니다!
다음은 내가 사용하는 것입니다 (확장 프로그램의 배경 페이지에서).
// remember to add "permissions": ["downloads"] to manifest.json
// this snippet is inside a onMessage() listener function
var imgurl = "https://www.google.com.hk/images/srpr/logo11w.png";
chrome.downloads.download({url:imgurl},function(downloadId){
console.log("download begin, the downId is:" + downloadId);
});
Event
다운로드가 완료되면 크롬이 여전히 제공하지 않는 것이 유감입니다 . chrome.downloads.download
다운로드가 begin
성공적으로 완료되면 의 콜백 함수가 호출됩니다 (완료되지 않음).
에 대한 공식 문서 chrome.downloads
는 여기에 있습니다 .
It's not my original idea about the solution, but I posted here hoping that it may be of some use to someone.
There's no way that I know of to silently save files to the user's drive, which is what it seems like you're hoping to do. I think you can ASK for files to be saved one at a time (prompting the user each time) using something like:
function saveAsMe (filename)
{
document.execCommand('SaveAs',null,filename)
}
If you wanted to only prompt the user once, you could grab all the images silently, zip them up in a bundle, then have the user download that. This might mean doing XmlHttpRequest on all the files, zipping them in Javascript, UPLOADING them to a staging area, and then asking the user if they would like to download the zip file. Sounds absurd, I know.
There are local storage options in the browser, but they are only for the developer's use, within the sandbox, as far as I know. (e.g. Gmail offline caching.) See recent announcements from Google like this one.
Consider using the HTML5 FileSystem features that make writing to files possible using Javascript.
I made an extension that does something like this, if anyone here is still interested. It uses an XMLHTTPRequest to grab the object, which in this case is presumed to be an image, then makes an ObjectURL to it, a link to that ObjectUrl, and clicks on the imaginary link.
Since Javascript hitch-hikes to your computer with webpages from just about anywhere, it would be dangerous to give it the ability to write to your disk.
It's not allowed. Are you thinking that the Chrome extension will require user interaction? Otherwise it might fall into the same category.
참고URL : https://stackoverflow.com/questions/2153979/chrome-extension-how-to-save-a-file-on-disk
'IT박스' 카테고리의 다른 글
Angular : 라이프 사이클 후크가 컴포넌트에 사용할 수있는 입력 데이터입니다. (0) | 2020.12.02 |
---|---|
Javascript에서 인쇄 미리보기를 어떻게 호출 할 수 있습니까? (0) | 2020.12.02 |
새로운 배열 배치는 버퍼에 지정되지 않은 오버 헤드가 필요합니까? (0) | 2020.12.02 |
유니온과 타입 -punning (0) | 2020.12.02 |
ASP.NET MVC 모달 대화 상자 / 팝업 모범 사례 (0) | 2020.12.02 |