In questo passaggio, imparerai:
- Come ottenere un riferimento a un file nel file system esterno.
- Come scrivere nel file system.
Tempo stimato per completare questo passaggio: 20 minuti.
Per visualizzare l'anteprima di ciò che completerai in questo passaggio, vai alla fine di questa pagina ↓.
Esporta promemoria
Questo passaggio aggiunge un pulsante di esportazione all'app. Se selezionato, gli elementi di promemoria correnti vengono salvati in un file di testo selezionato dall'utente. Se il file esiste già, viene sostituito. In caso contrario, viene creato un nuovo file.
Aggiorna autorizzazioni
Le autorizzazioni del file system possono essere richieste come stringa per l'accesso di sola lettura o come un oggetto con proprietà aggiuntive. Ad esempio:
// 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"]}]
Devi disporre dell'accesso in lettura e scrittura. In manifest.json, richiedi l'autorizzazione {fileSystem: [ "write" ] }
:
"permissions": [
"storage",
"alarms",
"notifications",
"webview",
"<all_urls>",
{ "fileSystem": ["write"] }
],
Aggiorna visualizzazione HTML
In index.html, aggiungi un pulsante Esporta su disco e un div
, in cui l'app mostra un messaggio di stato:
<footer id="info">
<button id="toggleAlarm">Activate alarm</button>
<button id="exportToDisk">Export to disk</button>
<div id="status"></div>
...
</footer>
Sempre in index.html, carica lo script export.js:
...
<script src="js/alarms.js"></script>
<script src="js/export.js"></script>
Crea script di esportazione
Crea un nuovo file JavaScript denominato export.js utilizzando il codice riportato di seguito. Salvalo nella cartella js.
(function() {
var dbName = 'todos-vanillajs';
var savedFileEntry, fileDisplayPath;
function getTodosAsText(callback) {
}
function exportToFileEntry(fileEntry) {
}
function doExportToDisk() {
}
document.getElementById('exportToDisk').addEventListener('click', doExportToDisk);
})();
Al momento, export.js contiene solo un listener di clic sul pulsante Esporta su disco e stub per
getTodosAsText()
, exportToFileEntry
e doExportToDisk()
.
Recupera elementi di promemoria sotto forma di testo
Aggiorna getTodosAsText()
in modo che legga le cose da fare da chrome.storage.local
e generi una rappresentazione testuale di queste attività:
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));
}
Scegli un file
Aggiorna doExportToDisk()
con chrome.fileSystem.chooseEntry()
per consentire all'utente di scegliere un
file:
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);
}
}
Il primo parametro di chrome.fileSystem.chooseEntry()
è un oggetto di opzioni. Il secondo parametro è il metodo di callback.
Se esiste già un FileEntry
salvato, utilizzalo quando chiami exportToFileEntry()
. Esistono riferimenti al file per la durata dell'oggetto che rappresenta FileEntry
. Questo esempio collega FileEntry
alla finestra dell'app in modo che il codice JavaScript possa scrivere nel file selezionato senza alcuna interazione dell'utente, purché la finestra dell'app rimanga aperta.
Utilizza FileEntry per scrivere elementi di promemoria su disco
Aggiorna exportToFileEntry()
per salvare i promemoria come testo tramite l'API web FileEntry
:
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()
ottiene un percorso file visualizzabile che restituisce lo stato div
.
Usa fileEntry.createWriter()
per creare un oggetto FileWriter
. fileWriter.write()
può quindi scrivere
un BLOB nel file system. Utilizza fileWriter.onwriteend()
e fileWriter.onerror()
per aggiornare
lo stato div
.
Per ulteriori informazioni su FileEntry
, consulta Esplorazione delle API FileSystem su HTML5Rocks o consulta la FileEntry docs
su MDN.
Mantieni oggetti FileEntry
Avanzata: gli oggetti FileEntry
non possono essere salvati in modo permanente a tempo indeterminato. L'app deve chiedere all'utente
di scegliere un file a ogni avvio. Se il riavvio dell'app è stato forzato a causa di un arresto anomalo o di un aggiornamento del runtime, restoreEntry() è un'opzione per ripristinare FileEntry
.
Se vuoi, puoi fare delle prove salvando l'ID restituito da retainEntry() e ripristinandolo al riavvio dell'app. Suggerimento: aggiungi un listener per l'evento onRestarted
nella pagina in background.
Avvia l'app Attività completata
Fatto! Passaggio 6. Ricarica l'app e aggiungi alcuni promemoria. Fai clic su Esporta su disco per esportare i promemoria in un file .txt.
Per maggiori informazioni
Per informazioni più dettagliate su alcune delle API introdotte in questo passaggio, fai riferimento a:
- Utilizzare l'API Chrome Filesystem ↑
- Dichiarare le autorizzazioni ↑
- chrome.storage.local.get() ↑
- chrome.fileSystem.chooseEntry() ↑
- chrome.fileSystem.getDisplayPath() ↑
- chrome.fileSystem.restoreEntry() ↑
- chrome.fileSystem.retainEntry() ↑
Vuoi continuare con il passaggio successivo? Vai al Passaggio 7: pubblica l'app »