Chrome擴展程序：如何將文件保存到磁盤上

Question

我目前正在爲Google Chrome創建一個擴展程序，可以將所有圖像或鏈接保存到硬盤上的圖像上。

問題是我不知道如何使用JS或Google Chrome擴展API在磁盤上保存文件。

你有想法嗎？

Answer 1

您可以使用HTML5 FileSystem features使用Download API寫入到磁盤。這是將文件下載到磁盤的唯一方式，且受到限制。

你可以看看NPAPI插件。另一種做你需要的方法是簡單地通過XHR POST向外部網站發送請求，然後通過另一個GET請求來檢索返回的文件，這將顯示爲保存文件對話框。

例如，對於我的瀏覽器擴展My Hangouts我創建了一個實用程序直接下載從HTML5畫布照片到磁盤。你可以看看這裏的代碼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(':'); 

如果你想轉換一個URI到HTML5的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 File API將BLOB URI下載到文件中。

Answer 2

由於Javascript搭便車連接到您的計算機的網頁從任何地方，讓它有能力寫入到您的磁盤是危險的。

這是不允許的。您是否認爲Chrome擴展程序需要用戶互動？否則它可能屬於同一類別。

Answer 3

有沒有辦法，我知道的默默的文件保存到用戶的驅動器，這是它看起來像你希望做的事。我想，你可以要求文件的同時要保存一個使用類似（提示用戶每次）：

function saveAsMe (filename) 
{ 
document.execCommand('SaveAs',null,filename) 
} 

如果你想僅提示用戶一次，你可以靜靜地抓住所有的圖像，將它們壓縮成一個包，然後讓用戶下載它。這可能意味着在所有文件上執行XmlHttpRequest，在Javascript中壓縮它們，將它們上傳到暫存區域，然後詢問用戶是否想下載zip文件。聽起來很荒唐，我知道。

有在瀏覽器本地存儲選項，但他們只對開發者的使用，在沙箱中，據我所知。 （例如Gmail離線緩存）。請參閱Google最近的公告，如this one。

Answer 4

考慮使用HTML5 FileSystem features使寫入使用Javascript可能文件。

Answer 5

Google Webstore
Github

我做了，做這樣的事情，如果有人在這裏仍有意擴展。 它使用XMLHTTPRequest獲取對象，在這種情況下，該對象被假定爲圖像，然後創建一個ObjectURL對象，指向該對象的鏈接，然後單擊想象的鏈接。

Answer 6

我一直希望爲自己製作一個擴展程序來批量下載圖像。然而，每次我都感到沮喪，因爲唯一看似適用的選擇是NPAPI，而鉻和Firefox似乎都不再需要支持。

我建議那些仍然希望實現'保存文件磁盤'功能的人看看這個Stackoverflow post，這篇文章下面的評論幫了我很多。

現在自鉻31+，chrome.downloads API變得穩定。我們可以使用它來以編程方式下載文件。如果用戶未在chrome設置中設置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); 
    }); 

雖然它是Chrome仍然會在下載完成時不提供Event可惜。當下載begin成功（沒有完成）chrome.downloads.download的回調函數被調用

官方文檔大約chrome.downloads是here。

這不是我最初的想法，但我在這裏張貼希望它可能對某人有用。