[Chrome Extension] 데이터 저장하기, storage api - 2

2023.11.26 - [WEB/Chrome Extension] - [Chrome Extension] popup 만들기, 로컬 테스트, 디버깅하기 - 1

[Chrome Extension] popup 만들기, 로컬 테스트, 디버깅하기 - 1

 

지난 글과 이어집니다.

 

이번 글에서는 유저가 extension에서 입력한 input, output을 저장하는 방법에 대해서 다룹니다.

 

chrome extension에서 데이터 저장을 위해 storage api를 제공하고 있습니다.

 

https://developer.chrome.com/docs/extensions/reference/storage/

chrome.storage - Chrome for Developers

 

음.. window.localStorage가 작동 하는곳이 있던데, 이걸 쓰면 안되나요?

 

popup 처럼 제한적인 곳에서만 사용할 수 있고, 사용자가 브라우저 히스토리를 지우면 날아갑니다. 따라서 항상 데이터가 저장되어 있다는 것을 보장할 수 없습니다.

 

chrome.storage는 목적에 적합한지 확인합니다.

 

특징

• 유저가 캐시를 지우거나 브라우저 히스토리를 지워도 계속 데이터가 유지됩니다.
• extension의 모든 곳에서 storage api에 접근이 가능합니다.
• 비동기로 작동합니다. (대량 읽기 쓰기)

 

Storage areas

벌써부터 현기증이 나려고 합니다.

local, sync, session 3가지가 있는데, 어떤것을 사용해야 할까요? 목적에 따라 다릅니다.

 

storage.local

• 가장 많은 데이터를 저장할 수 있습니다. (Chrome 114버전 부터는 10MB까지 가능합니다)
• 정보가 extension이 제거되기 전까지 저장됩니다. (최고 적합)

storage.sync

• chrome 브라우저에 로그인 한 경우 데이터가 동기화 됩니다. 하지만 로그인 하지 않으면 storage.local과 동일하게 작동합니다.
• local에 비해 저장할 수 있는 용량이 적습니다. item당 8KB 수준
• 로그인이 되었을때 브라우저간 데이터를 계속 동기화 하고 싶을때 사용하면 됩니다.

storage.session

• session storage의 사용처를 생각하면 이해하기 쉽습니다.
• 브라우저가 종료되면 데이터가 사라집니다. 

input, output을 최대한 많이 영구적으로 저장하고 싶으므로 storage.local을 사용하도록 하겠습니다.

 

storage api 적용하기

manifest.json 수정

{
  // 추가
    "permissions": ["storage"],
}

 

permission에 storage를 추가해야 합니다. permission 속성은 나중에도 많이 사용할 예정입니다.

 

값 저장하기

// key, value를 받아서 storage에 저장

const setChromeLocalStorage = (key, value, callback) => {
  return new Promise((resolve, reject) => {
    chrome.storage.local
      .set({ [key]: value })
      .then(() => {
        if (typeof callback === "function") {
          callback();
        }
        resolve(true);
      })
      .catch(() => reject(false));
    // exceed limit case
  });
};

 

setChromeLocalStorage라는 함수를 유틸로 만들어서 사용했습니다. 

중요한점은 비동기로 작동하기 때문에 실행 순서에 주의해야 합니다.

 

*10MB 이상을 저장할 경우 런타임 에러가 생기게 됩니다.

이 부분은 따로 catch로 받아서 적절한 notice를 줘야 합니다.

 

값 불러오기

chrome.storage.local.get("myKey", (result) => {

      Object.keys(result).forEach((key) => {
        $output.value += `key = ${key}` + "\n";
        $output.value += result[key] + "\n\n";
      });
      
});

 

get 함수는 특정 key를 넣으면 { key : value} 형태의 object를 비동기로 반환합니다.

 

storage의 전체 값을 불러오고 싶다면 key로 null을 넘기면 됩니다.

 

저장된 값 지우기

function clearStorage($input, $output) {
  chrome.storage.local.clear(() => {
    clearText([$input, $output]);
    blinkNotice("clear finished!");
  });
}

// remove
chrome.storage.local.remove(key, () => callback);
chrome.storage.local.remove([key, key2, key3], () => callback);

 

전체 값을 한번에 지우려면 clear, 특정 key를 지우려면 remove 함수를 사용할 수 있습니다.

 

마무리

 

 

위 방법을 이용해서 값을 저장하고 불러오는 기능을 만들 수 있습니다.

 

특정 값만 불러올 수 있고, 모든 리스트를 출력할 수 있습니다. 또한 clear() 함수를 사용해 리스트를 지울 수 있습니다

 

다음 작업은 chrome extension에서 브라우저에서 입력된 값을 감지하고 DOM을 조작하는 과정에 대해서 알아보겠습니다.

 

여기까지 하면 하나의 임시 기능이 완성됩니다. (예외 케이스들을 다듬는 작업들은 직접 해줘야 합니다..)