In diesem Schritt lernen Sie:
- So erhalten Sie einen Verweis auf eine Datei im externen Dateisystem.
- Wie in das Dateisystem geschrieben wird.
Geschätzte Zeit für diesen Schritt: 20 Minuten
Wenn Sie eine Vorschau der Schritte in diesem Schritt sehen möchten, springen Sie zum Ende der Seite ↓.
Aufgaben exportieren
In diesem Schritt wird der App eine Exportschaltfläche hinzugefügt. Wenn diese angeklickt werden, werden die aktuellen Aufgaben in einer Textdatei gespeichert, die der Nutzer ausgewählt hat. Wenn die Datei vorhanden ist, wird sie ersetzt. Andernfalls wird eine neue Datei erstellt.
Berechtigungen aktualisieren
Dateisystemberechtigungen können als String für den Lesezugriff oder als Objekt mit zusätzlichen Attributen angefordert werden. Beispiel:
// Read only
"permissions": ["fileSystem"]
// Read and write
"permissions": [{"fileSystem": ["write"]}]
// Read, write, autocomplate previous input, and select folder directories instead of files
"permissions": [{"fileSystem": ["write", "retainEntries", "directory"]}]
Sie benötigen Lese- und Schreibzugriff. Fordern Sie in manifest.json die Berechtigung {fileSystem: [ "write" ] }
an:
"permissions": [
"storage",
"alarms",
"notifications",
"webview",
"<all_urls>",
{ "fileSystem": ["write"] }
],
HTML-Ansicht aktualisieren
Fügen Sie in der Datei index.html die Schaltfläche Auf Festplatte exportieren und div
ein, wo die App eine Statusmeldung anzeigt:
<footer id="info">
<button id="toggleAlarm">Activate alarm</button>
<button id="exportToDisk">Export to disk</button>
<div id="status"></div>
...
</footer>
Laden Sie auch in index.html das Skript export.js:
...
<script src="js/alarms.js"></script>
<script src="js/export.js"></script>
Exportskript erstellen
Erstellen Sie mit dem folgenden Code eine neue JavaScript-Datei namens export.js. Speichern Sie sie im Ordner js.
(function() {
var dbName = 'todos-vanillajs';
var savedFileEntry, fileDisplayPath;
function getTodosAsText(callback) {
}
function exportToFileEntry(fileEntry) {
}
function doExportToDisk() {
}
document.getElementById('exportToDisk').addEventListener('click', doExportToDisk);
})();
Derzeit enthält export.js nur einen Klick-Listener für die Schaltfläche Auf Datenträger exportieren sowie Stubs für getTodosAsText()
, exportToFileEntry
und doExportToDisk()
.
Aufgaben als Text abrufen
Aktualisieren Sie getTodosAsText()
so, dass Aufgaben aus chrome.storage.local
vorgelesen und in Textform dargestellt werden:
function getTodosAsText(callback) {
chrome.storage.local.get(dbName, function(storedData) {
var text = '';
if ( storedData[dbName].todos ) {
storedData[dbName].todos.forEach(function(todo) {
text += '- ';
if ( todo.completed ) {
text += '[DONE] ';
}
text += todo.title;
text += '\n';
}, '');
}
callback(text);
}.bind(this));
}
Datei auswählen
Aktualisieren Sie doExportToDisk()
mit chrome.fileSystem.chooseEntry()
, damit der Nutzer eine Datei auswählen kann:
function doExportToDisk() {
if (savedFileEntry) {
exportToFileEntry(savedFileEntry);
} else {
chrome.fileSystem.chooseEntry( {
type: 'saveFile',
suggestedName: 'todos.txt',
accepts: [ { description: 'Text files (*.txt)',
extensions: ['txt']} ],
acceptsAllTypes: true
}, exportToFileEntry);
}
}
Der erste Parameter von chrome.fileSystem.chooseEntry()
ist ein Objekt mit Optionen. Der zweite Parameter ist eine Callback-Methode.
Wenn bereits ein gespeichertes FileEntry
vorhanden ist, verwende stattdessen dieses beim Aufrufen von exportToFileEntry()
. Dateiverweise sind für die Lebensdauer des Objekts vorhanden, das die FileEntry
darstellt. In diesem Beispiel wird FileEntry
mit dem App-Fenster verknüpft, sodass der JavaScript-Code ohne Nutzerinteraktion in die ausgewählte Datei schreiben kann, solange das App-Fenster geöffnet bleibt.
Mit „FileEntry“ Aufgabenelemente auf das Laufwerk schreiben
Aktualisieren Sie exportToFileEntry()
, um die Aufgaben über die FileEntry
Web API als Text zu speichern:
function exportToFileEntry(fileEntry) {
savedFileEntry = fileEntry;
var status = document.getElementById('status');
// Use this to get a file path appropriate for displaying
chrome.fileSystem.getDisplayPath(fileEntry, function(path) {
fileDisplayPath = path;
status.innerText = 'Exporting to '+path;
});
getTodosAsText( function(contents) {
fileEntry.createWriter(function(fileWriter) {
var truncated = false;
var blob = new Blob([contents]);
fileWriter.onwriteend = function(e) {
if (!truncated) {
truncated = true;
// You need to explicitly set the file size to truncate
// any content that might have been there before
this.truncate(blob.size);
return;
}
status.innerText = 'Export to '+fileDisplayPath+' completed';
};
fileWriter.onerror = function(e) {
status.innerText = 'Export failed: '+e.toString();
};
fileWriter.write(blob);
});
});
}
chrome.fileSystem.getDisplayPath()
ruft einen anzeigbaren Dateipfad ab, der den Status div
zurückgibt.
Verwenden Sie fileEntry.createWriter()
, um ein FileWriter
-Objekt zu erstellen. fileWriter.write()
kann dann ein Blob in das Dateisystem schreiben. Verwenden Sie fileWriter.onwriteend()
und fileWriter.onerror()
, um den Status div
zu aktualisieren.
Weitere Informationen zu FileEntry
finden Sie unter FileSystem APIs erkunden auf HTML5Rocks oder auf der MDN-Seite FileEntry docs
.
FileEntry-Objekte beibehalten
Erweitert: FileEntry
-Objekte können nicht unbegrenzt gespeichert werden. Ihre App muss den Nutzer bei jedem Start der App zur Auswahl einer Datei auffordern. Wenn Ihre Anwendung aufgrund eines Laufzeitabsturzes oder eines Updates neu gestartet wurde, ist restoreEntry() eine Option zum Wiederherstellen eines FileEntry
.
Sie können experimentieren, indem Sie die von retainEntry() zurückgegebene ID speichern und beim Neustart der App wiederherstellen. Tipp: Fügen Sie dem onRestarted
-Ereignis auf der Hintergrundseite einen Listener hinzu.
Fertige Todo-App starten
Sie haben Schritt 6 abgeschlossen! Aktualisieren Sie die App und fügen Sie einige Aufgaben hinzu. Klicken Sie auf Auf Laufwerk exportieren, um Ihre Todos in eine TXT-Datei zu exportieren.
Weitere Informationen
Detailliertere Informationen zu einigen der in diesem Schritt vorgestellten APIs finden Sie unter:
- Chrome Filesystem API verwenden ↑
- Erklärung von Berechtigungen ↑
- chrome.storage.local.get() ↑
- chrome.fileSystem.chooseEntry() ↑
- chrome.fileSystem.getDisplayPath() ↑
- chrome.fileSystem.restoreEntry() ↑
- chrome.fileSystem.retainEntry() ↑
Sind Sie bereit, mit dem nächsten Schritt fortzufahren? Gehen Sie zu Schritt 7 – App veröffentlichen.