Wie kann eine Chrome-Erweiterung viele Dateien in einem benutzerdefinierten Verzeichnis speichern?

Ich arbeite an einer Chrome-Erweiterung, die als internes Tool verwendet werden soll. Das erforderliche Verhalten ist:

1. Aktivieren Sie als Seitenaktion ein Adressleistensymbol, wenn Sie bestimmte Intranetseiten anzeigen.
2. Wenn der Benutzer auf das Symbol klickt, identifizieren Sie alle Dateien eines bestimmten Medientyps (z. B. .jpg) auf der Seite und
3. Speichern Sie sie alle stillschweigend in einem Verzeichnis auf dem lokalen Laufwerk des Benutzers.

Diese Frage wurde bereits gestellt , aber die Antwort lautete damals " NPAPI verwenden ", und NPAPI ist jetzt verfallen .

Was ist der derzeit verfügbare Weg, um dies zu erreichen? Die, die ich mir angesehen habe, sind:

• Die chrome.FileSystem- API --- speichert jedoch keine Dateien an einem für Benutzer zugänglichen Ort. Stattdessen werden die gespeicherten Dateien hinter verschleierten Namen in einem undokumentierten Verzeichnis versteckt . Der Benutzer verlangt, dass die Dateien unter ihrem ursprünglichen Namen in einem zugänglichen Verzeichnis gespeichert werden.
• Das HTML5-Download-Attribut , indem Sie eine Daten-URL erstellen und programmgesteuert darauf klicken. Daraufhin wird für jede Datei ein Dialogfeld "Speichern unter ..." angezeigt, das nicht akzeptabel ist, wenn sich auf einer Seite hundert Assets befinden. Der Benutzer verlangt, dass die Dateien ohne weitere Interaktion über den einzelnen Symbolklick hinaus heruntergeladen werden.
• Die Chrome Download API , die jedoch nur in den Beta- und Entwicklerkanälen verfügbar ist. Benutzer benötigt diese Erweiterungsarbeit mit Mainstream-Chrome.
• Verwenden Sie die native Messaging-API, indem Sie eine kleine EXE-Datei erstellen, die einfach eine Datei auf der Festplatte speichert, und die JPG-Datei dann als Blob an diese übergeben. Dies scheint sehr umständlich zu sein und ich bin mir nicht einmal sicher, wie ich große Blobs zuverlässig an solche EXEs weitergeben kann.

Gibt es einen anderen Ansatz, den ich ausprobieren kann?

Sie haben ziemlich viel recherchiert. In der Tat können normale Webseiten ohne Plugins oder Erweiterungen nicht in das Dateisystem des Benutzers schreiben. Wie bereits erwähnt, bietet die HTML5-Dateisystem-API nur Zugriff auf ein virtuelles Dateisystem.

Sie verwechseln jedoch die chrome.fileSystemAPI mit der HTML5-Dateisystem-API. Im Gegensatz zur HTML -Dateisystem- fileSystemAPI kann die Chrome- App (App-API) direkt in das vom Benutzer angegebene Dateisystem (z. B. ~/Documentsoder %USERPROFILE%\Documents) des Benutzers schreiben .

Diese API ist nur für Chrome- Apps verfügbar , nicht für Erweiterungen. Dies ist kein Problem, insbesondere da Sie ein internes Tool entwickeln, da Sie die App und die Erweiterung installieren und mithilfe der Nachrichtenübermittlung zwischen der Erweiterung (Seitenaktion) und der App (Dateisystemzugriff) kommunizieren können ( Beispiel ).

Info chrome.downloads: Da Ihre Erweiterung intern ist, können Sie Benutzer wahrscheinlich zwingen, auf den Beta / Dev-Kanal zuzugreifen, um diese API zu verwenden. Die einzige Einschränkung dieser API besteht darin, dass die Dateien im benutzerdefinierten Download-Ordner (einem Unterverzeichnis von) gespeichert werden.

BEARBEITEN: Die chrome.downloadsAPI ist jetzt in allen Kanälen verfügbar, einschließlich des stabilen Zweigs (seit Chrome 31).

Ich befürchte, dass Sie Ihre Hausaufgaben gemacht haben, was bedeutet, dass Sie alle möglichen Alternativen geprüft haben.

Der beste Weg, um genau das zu erreichen, was Sie wollen, ist (wie bereits erwähnt) die Verwendung einer unterstützenden nativen App und die Kommunikation über Native Messaging. Übrigens, da Bandbreite in Intranets selten ein Problem darstellt, ist es möglicherweise einfacher, die URLs der Ressourcen (z. B. Bilder) zu übergeben und die App herunterladen und speichern zu lassen.
(Ja, es wird umständlicher sein, als nur eine Erweiterung zu entwickeln, aber man muss tun, was er tun muss, oder?)

Wenn Sie jedoch bereit sind, ein wenig Benutzererfahrung in Bezug auf die Einfachheit der Entwicklung zu opfern, empfehle ich, die HTML5-Extras (mit denen Sie eine Datei lokal erstellen und herunterladen können) mit einer JS-Zipping-Bibliothek (z. B. JSZip ) zu kombinieren . Der Benutzer muss also nur eine einzige Zip-Datei herunterladen (und wird nur einmal dazu aufgefordert). Übrigens, wenn der Benutzer dies wünscht, kann er die Dateien immer ohne Aufforderung herunterladen (aber das wussten Sie bereits).

Verwenden Sie die Native Messaging App-Idee.

Die native App ist umständlich und schwierig zu schreiben, da die Dokumentation schlecht ist. Wenn Sie die JSON-Formatierung nicht an beiden Enden genau korrekt erhalten, wird in einer Konsole nichts angezeigt, da stdin und stdout übernommen werden.

Sie sind jedoch glücklicher, wenn Sie fertig sind, da Sie Standardtools (z. B. Windows Explorer, Hex-Editor, TeamViewer ...) verwenden können, um Dateien anzuzeigen, zu verschieben und zu löschen und ansonsten zu sehen, was gerade passiert. Das Sandbox-Dateisystem von Chrome funktioniert, scheint aber jetzt eine Sackgasse zu sein (kein anderer Browser hat es erkannt). Es ist wahrscheinlich, dass niemand Tools von Drittanbietern dafür entwickelt. Natürlich brauchen Sie wahrscheinlich keine Tools, wenn alles funktioniert, aber bis dahin ist das Debuggen ein Albtraum, da Sie Code (und ziemlich viel Code) schreiben müssen, um zu verfolgen, welche Dateien sich in welchen Verzeichnissen befinden, welche Dateiversionen noch vorhanden sind Festplattenplatz...

Eine andere Lösung für die interne (oder möglicherweise nicht interne) Verwendung besteht darin, eine Verbindung zu einem lokalen oder Remote-Websocket-Server herzustellen.

Sie können es sowohl in background.js als auch in content.js einfügen (verwenden wss://für https://)

var ws = new WebSocket('ws://echo.websocket.org');
// var ws = new WebSocket('ws://127.0.0.1:9000');
ws.onmessage = function(res) {
    console.log('received data:', res.data);
};
ws.onopen = function() {
    ws.send('hello');
};