Schritt 6: Aufgaben in das Dateisystem exportieren

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.

Die Todo App mit exportierten Aufgaben

Weitere Informationen

Detailliertere Informationen zu einigen der in diesem Schritt vorgestellten APIs finden Sie unter:

Sind Sie bereit, mit dem nächsten Schritt fortzufahren? Gehen Sie zu Schritt 7 – App veröffentlichen.