6단계: 파일 시스템으로 할 일 내보내기

이 단계에서 학습할 내용은 다음과 같습니다.

  • 외부 파일 시스템의 파일에 대한 참조를 가져오는 방법
  • 파일 시스템에 쓰는 방법

이 단계를 완료하는 데 필요한 예상 시간: 20분
이 단계에서 완료할 작업을 미리 보려면 이 페이지 하단으로 이동 ↓하세요.

할 일 내보내기

이 단계에서는 앱에 내보내기 버튼을 추가합니다. 클릭하면 현재 할 일 항목이 텍스트에 저장됩니다. 파일을 업로드할 수 있습니다. 파일이 이미 있으면 대체됩니다. 그렇지 않으면 새 파일이 생성됩니다.

권한 업데이트

파일 시스템 권한은 읽기 전용 액세스를 위한 문자열 또는 추가 속성입니다. 예를 들면 다음과 같습니다.

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

읽기 및 쓰기 액세스 권한이 필요합니다. manifest.json에서 {fileSystem: [ "write" ] }를 요청합니다. 권한:

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

HTML 보기 업데이트

index.html에서 앱에 상태 메시지를 표시하는 디스크로 내보내기 버튼과 div를 추가합니다.

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

또한 index.html에서 export.js 스크립트를 로드합니다.

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

내보내기 스크립트 만들기

아래 코드를 사용하여 export.js라는 이름의 새 자바스크립트 파일을 만듭니다. js 폴더에 저장합니다.

(function() {

  var dbName = 'todos-vanillajs';

  var savedFileEntry, fileDisplayPath;

  function getTodosAsText(callback) {
  }

  function exportToFileEntry(fileEntry) {
  }

  function doExportToDisk() {
  }

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

})();

현재 export.js에는 디스크로 내보내기 버튼의 클릭 리스너와 getTodosAsText(), exportToFileEntry, doExportToDisk()

할 일 항목을 텍스트로 가져오기

chrome.storage.local에서 todos를 읽고 텍스트를 생성하도록 getTodosAsText()를 업데이트합니다. 나타냅니다.

function getTodosAsText(callback) {
  chrome.storage.local.get(dbName, function(storedData) {
    var text = '';

    if ( storedData[dbName].todos ) {
      storedData[dbName].todos.forEach(function(todo) {
          text