6. Adım: Yapılacakları Dosya Sistemine Dışa Aktar

Bu adımda şunları öğreneceksiniz:

  • Harici dosya sisteminde bir dosyanın referansı nasıl alınır?
  • Dosya sistemine nasıl yazılır?

Bu adımın tamamlanması için tahmini süre: 20 dakika.
. Bu adımda tamamlayacaklarınızı önizlemek için bu sayfanın en altına gidin ↓.

Yapılacak işleri dışa aktar

Bu adım, uygulamaya bir dışa aktarma düğmesi ekler. Tıklandığında mevcut yapılacaklar öğeleri bir metne kaydedilir dosyası. Dosya mevcutsa değiştirilir. Aksi takdirde yeni bir dosya oluşturulur.

İzinleri güncelle

Dosya sistemi izinleri salt okuma erişimi için bir dize veya ek özellikler. Örneğin:

// 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"]}]

Okuma ve yazma erişiminizin olması gerekir. manifest.json dosyasında, {fileSystem: [ "write" ] } dosyasını isteyin. izin:

"permissions": [
  "storage", 
  "alarms", 
  "notifications", 
  "webview",
  "<all_urls>", 
  { "fileSystem": ["write"] } 
],

HTML görünümünü güncelleme

index.html dosyasında, Diske aktar düğmesi ve uygulamanın durum mesajı gösterdiği bir div ekleyin:

<footer id="info">
  <button id="toggleAlarm">Activate alarm</button>
  <button id="exportToDisk">Export to disk</button>
  <div id="status"></div>
  ...
</footer>

Ayrıca, index.html'de export.js komut dosyasını yükleyin:

...
<script src="js/alarms.js"></script>
<script src="js/export.js"></script>

Dışa aktarma komut dosyası oluştur

Aşağıdaki kodu kullanarak export.js adında yeni bir JavaScript dosyası oluşturun. Bu kodu js klasörüne kaydedin.

(function() {

  var dbName = 'todos-vanillajs';

  var savedFileEntry, fileDisplayPath;

  function getTodosAsText(callback) {
  }

  function exportToFileEntry(fileEntry) {
  }

  function doExportToDisk() {
  }

  document.getElementById('exportToDisk').addEventListener('click', doExportToDisk);

})();

export.js şu anda yalnızca Diske aktar düğmesinde bir tıklama işleyici ve getTodosAsText(), exportToFileEntry ve doExportToDisk().

Yapılacaklar listesi öğelerini metin olarak al

getTodosAsText() uygulamasını, chrome.storage.local uygulamasındaki yapılacak işleri okuyacak ve metin biçiminde oluşturacak şekilde güncelleyin temsil eder:

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));
}

Dosya seçin

Kullanıcının bir seçim yapmasına izin vermek için doExportToDisk() öğesini chrome.fileSystem.chooseEntry() ile güncelleyin dosya:

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);

  }
}

chrome.fileSystem.chooseEntry() işlevinin ilk parametresi, seçenekler nesnesidir. İkinci parametresi bir geri çağırma yöntemidir.

Zaten kayıtlı bir FileEntry varsa exportToFileEntry() çağrısı yaparken bunun yerine bunu kullanın. Dosya referanslar, FileEntry öğesini temsil eden nesnenin ömrü boyunca mevcuttur. Bu örnek, JavaScript kodunun seçilen dosyaya herhangi bir kullanıcı olmadan yazabilmesi için uygulama penceresine FileEntry uygulama penceresi açık kaldığı sürece etkileşimi etkilemez.

Yapılacaklar öğelerini diske yazmak için Dosya Girişi'ni kullanın

Yapılacak yapılacakları FileEntry Web API'si aracılığıyla metin olarak kaydetmek için exportToFileEntry() uygulamasını güncelleyin:

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(), durum çıktısını veren görüntülenebilir bir dosya yolu alır div.

FileWriter nesnesi oluşturmak için fileEntry.createWriter() öğesini kullanın. Ardından fileWriter.write() yazabilir dosya sistemine bir Blob ekleyin. Güncellemek için fileWriter.onwriteend() ve fileWriter.onerror() tuşlarını kullanın div durumu.

FileEntry hakkında daha fazla bilgi için HTML5Rocks'taki Dosya Sistemi API'larını Keşfetme bölümünü okuyun veya MDN'deki FileEntry docs bölümüne bakın.

Dosya Girişi nesnelerini kalıcı olarak kaydetme

Gelişmiş: FileEntry nesne süresiz olarak saklanamaz. Uygulamanızın kullanıcıya sorması gerekiyor uygulama her başlatıldığında bir dosya seçmek için. Uygulamanız, bir çalışma zamanı nedeniyle yeniden başlatılmaya zorlandıysa restoreEntry(), bir FileEntry öğesini geri yükleme seçeneğidir.

İsterseniz retainEntry() tarafından döndürülen kimliği kaydedip uygulamaya geri yükleyerek deneme yapabilirsiniz. yeniden başlat. (İpucu: Arka plan sayfasında onRestarted etkinliğine bir işleyici ekleyin.)

Tamamlanmış Todo uygulamanızı başlatın

6. adımı tamamladınız! Uygulamanızı yeniden yükleyin ve yapılacak işler ekleyin. bir .txt dosyasına yükleyin.

Dışa aktarılan yapılacaklar listelerini içeren Todo uygulaması

Daha fazla bilgi için

Bu adımda tanıtılan API'lerin bazıları hakkında daha ayrıntılı bilgi için aşağıdaki konulara bakın:

Bir sonraki adıma geçmeye hazır mısınız? 7. Adım - Uygulamanızı yayınlayın » seçeneğine gidin