“Extension Storage”, 크롬 확장 프로그램은 데이터를 어디에 저장할까?

들어가며

크롬을 사용하다 보면 정말 많은 확장 프로그램을 설치하게 됩니다.

광고를 차단하는 확장 프로그램부터 비밀번호 관리 도구, 번역 도구, 개발자를 위한 각종 편의 기능까지 종류도 상당히 많습니다.

그런데 한 가지 궁금한 점이 생깁니다.

크롬 확장 프로그램이 사용하는 설정이나 데이터는 어디에 저장될까요?

예를 들어 어떤 확장 프로그램에서 사용자가 설정한 옵션을 기억하고 있다면 브라우저 어딘가에는 그 정보가 저장되어 있어야 합니다.

이때 알아두면 좋은 것이 Extension Storage입니다.

크롬 개발자 도구를 사용하다 보면 Application 탭에서 다양한 저장 공간을 확인할 수 있는데, 확장 프로그램을 개발하거나 디버깅할 때는 Extension Storage도 중요한 확인 대상이 됩니다.

특히 Chrome Extension을 직접 만들어본다면 chrome.storage API와 함께 이해해두는 것이 좋습니다.

오늘은 개발자 도구에서 Extension Storage가 무엇인지, 어떤 데이터를 저장할 수 있는지, 그리고 확장 프로그램 개발에서 어떻게 활용되는지 자연스럽게 살펴보겠습니다.

Extension Storage란 무엇일까?

Extension Storage는 말 그대로 브라우저 확장 프로그램에서 사용하는 저장 공간이라고 이해하면 쉽습니다.

크롬 확장 프로그램은 일반적인 웹페이지와는 조금 다른 환경에서 동작합니다.

확장 프로그램에는 자체적으로 필요한 설정값이나 상태 정보가 있을 수 있습니다.

예를 들어 사용자가 확장 프로그램에서 다음과 같은 옵션을 선택했다고 해보겠습니다.

광고 차단 기능     : ON
자동 실행          : ON
테마               : Dark
언어               : 한국어

사용자가 브라우저를 다시 사용했을 때도 이런 설정을 기억하려면 데이터를 저장해야 합니다.

Chrome Extension에서는 이런 용도로 chrome.storage API를 사용할 수 있습니다.

기본적인 형태는 다음과 같습니다.

chrome.storage.local.set({
    theme: "dark"
});

저장한 데이터를 가져올 때는 다음과 같이 사용할 수 있습니다.

chrome.storage.local.get(["theme"], (result) => {
    console.log(result.theme);
});

확장 프로그램 개발에서는 이런 방식으로 사용자 설정이나 확장 프로그램의 상태를 관리할 수 있습니다.

개발자 도구에서 Extension Storage 확인하기

여기서 조금 헷갈리는 부분이 있습니다.

개발자 도구의 Application 탭을 열면 Cookies, Local Storage, Session Storage, IndexedDB, Cache Storage 같은 항목들이 보입니다.

그런데 Extension Storage는 일반 웹페이지의 저장소와 동일하게 생각하면 안 됩니다.

확장 프로그램 자체의 저장 데이터를 확인하려면 해당 확장 프로그램의 개발자 환경에서 확인해야 합니다.

크롬 확장 프로그램을 개발할 때는 확장 프로그램의 서비스 워커나 확장 프로그램 페이지를 대상으로 개발자 도구를 열어 확인하는 방식이 일반적입니다.

확장 프로그램의 내부 페이지나 Service Worker를 검사하면 해당 확장 프로그램의 저장 데이터와 동작 상태를 확인하는 데 도움이 됩니다.

즉, 일반 웹사이트를 검사하면서 그 사이트의 Extension Storage를 찾는 것과는 조금 다른 개념입니다.

이 차이를 처음에는 잘 모르고 지나가기 쉽습니다.

chrome.storage API란?

Extension Storage를 이해하려면 chrome.storage API를 알아야 합니다.

Chrome Extension에서는 저장소를 다루기 위해 Storage API를 사용할 수 있습니다.

대표적으로 다음과 같은 저장 공간이 있습니다.

chrome.storage.local
chrome.storage.sync
chrome.storage.session
chrome.storage.managed

각각 사용 목적이 조금씩 다릅니다.

그중에서도 확장 프로그램 개발에서 가장 자주 접하게 되는 것이 local과 sync입니다.

chrome.storage.local

chrome.storage.local은 확장 프로그램의 데이터를 로컬에 저장하는 방식입니다.

예를 들어 사용자가 선택한 설정값을 저장할 수 있습니다.

chrome.storage.local.set({
    autoStart: true,
    language: "ko"
});

나중에 필요한 값을 가져올 수도 있습니다.

chrome.storage.local.get(
    ["autoStart", "language"],
    (result) => {
        console.log(result.autoStart);
        console.log(result.language);
    }
);

확장 프로그램에서 사용자가 설정한 옵션을 저장하는 경우 상당히 유용합니다.

다만 저장 공간이 무한한 것은 아니기 때문에 대량의 데이터를 무작정 저장하는 용도로 사용하는 것은 적절하지 않습니다.

chrome.storage.sync는 무엇일까?

chrome.storage.sync는 이름 그대로 동기화 기능과 관련된 저장 방식입니다.

확장 프로그램에서 사용자의 설정값을 여러 Chrome 환경에서 동기화할 필요가 있을 때 사용할 수 있습니다.

예를 들어 사용자가 확장 프로그램에서 특정 옵션을 변경했다고 해보겠습니다.

Chrome 동기화 환경에서 조건이 충족된다면 해당 설정을 다른 환경에서도 사용할 수 있도록 구성할 수 있습니다.

그래서 다음과 같은 데이터는 sync와 잘 어울릴 수 있습니다.

자동 실행 여부
화면 테마
언어 설정
사용자가 선택한 옵션

반대로 용량이 큰 데이터나 동기화할 필요가 없는 데이터라면 local이 더 적절할 수 있습니다.

chrome.storage.session도 있다

여기서 앞서 살펴본 Session Storage와 이름이 비슷한 chrome.storage.session도 등장합니다.

둘을 같은 것으로 생각하면 안 됩니다.

chrome.storage.session은 확장 프로그램에서 현재 브라우저 세션 동안 유지되는 데이터를 저장하는 데 사용할 수 있습니다.

예를 들어 확장 프로그램이 현재 실행 중인 동안만 필요한 상태 정보를 저장할 수 있습니다.

chrome.storage.session.set({
    currentState: "running"
});

필요할 때 다시 가져올 수 있습니다.

chrome.storage.session.get(
    ["currentState"],
    (result) => {
        console.log(result.currentState);
    }
);

이처럼 Chrome Extension의 Storage API 안에서도 데이터의 유지 목적에 따라 저장 방식을 선택할 수 있습니다.

Extension Storage에는 어떤 데이터를 저장할까?

확장 프로그램에서는 생각보다 다양한 데이터를 저장할 수 있습니다.

가장 대표적인 것은 사용자 설정입니다.

예를 들어 확장 프로그램의 팝업 화면에서 체크박스를 하나 만들었다고 해보겠습니다.

☑ 페이지 자동 분석
☑ 알림 표시
☐ 다크 모드

사용자가 선택한 상태를 Storage에 저장해두면 다음에 팝업을 열었을 때 이전 설정을 불러와 화면에 반영할 수 있습니다.

또한 확장 프로그램에서 마지막으로 선택한 옵션이나 간단한 상태값 등을 저장할 수도 있습니다.

중요한 것은 무엇을 저장할지와 어디에 저장할지를 구분하는 것입니다.

단순한 설정값이라면 Storage API가 적합할 수 있지만 대량의 구조화된 데이터를 저장해야 한다면 IndexedDB 같은 다른 저장 기술을 고려하는 것이 좋습니다.

개발자 도구에서 직접 데이터를 확인하면 좋은 이유

확장 프로그램을 개발하다 보면 이런 문제가 발생할 수 있습니다.

“분명 설정을 저장했는데 다시 열어보면 값이 초기화된다.”

이런 경우 코드를 계속 수정하기 전에 실제 Storage에 값이 들어가 있는지 확인하는 것이 좋습니다.

저장 함수가 정상적으로 실행되었는지, Key 이름이 예상과 같은지, 가져오는 코드에서 동일한 Key를 사용하고 있는지 등을 확인할 수 있기 때문입니다.

특히 다음과 같은 상황에서 유용합니다.

설정값이 저장되지 않는다.
        ↓
chrome.storage.set() 실행 확인
        ↓
Storage 데이터 확인
        ↓
Key / Value 확인
        ↓
get()에서 같은 Key를 요청하는지 확인

이런 식으로 하나씩 확인하면 문제의 위치를 좁혀갈 수 있습니다.

웹사이트의 Local Storage와 혼동하지 않기

Extension Storage를 공부할 때 가장 주의해야 할 부분입니다.

웹사이트에서 사용하는 Local Storage와 확장 프로그램의 Storage API는 목적과 접근 방식이 다릅니다.

일반 웹사이트에서는 보통 다음과 같은 방식으로 데이터를 다룹니다.

localStorage.setItem("theme", "dark");

반면 Chrome Extension에서는 다음과 같은 Storage API를 사용할 수 있습니다.

chrome.storage.local.set({
    theme: "dark"
});

둘 다 데이터를 저장한다는 점에서는 비슷하지만 동일한 저장소라고 생각하면 안 됩니다.

특히 확장 프로그램의 권한과 실행 환경, Manifest 버전 등에 따라 접근 방식이 달라질 수 있습니다.

Chrome Extension 개발을 시작했다면 웹페이지의 Storage API와 Extension Storage API를 구분해서 이해하는 것이 좋습니다.

민감한 정보는 아무 곳에나 저장하지 말자

Storage를 사용할 때는 보안 문제도 생각해야 합니다.

사용자의 설정값이나 일반적인 상태 정보는 저장할 수 있지만, 비밀번호나 중요한 인증정보 같은 민감한 데이터를 단순히 Storage에 저장하는 방식은 신중하게 접근해야 합니다.

브라우저에서 사용할 수 있는 저장소라고 해서 안전한 금고라고 생각하면 안 됩니다.

특히 확장 프로그램은 일반 웹사이트보다 더 많은 권한을 가질 수 있기 때문에 어떤 데이터를 저장하고 어떤 권한을 요청하는지 더욱 주의해야 합니다.

확장 프로그램을 배포할 계획이라면 저장 데이터뿐만 아니라 Manifest 설정과 권한 범위도 함께 검토하는 것이 좋습니다.

Extension Storage를 직접 확인해보면 이해가 빠르다

Extension Storage는 글로만 읽는 것보다 직접 확장 프로그램 하나를 만들어 테스트해보는 것이 훨씬 빠르게 이해됩니다.

간단한 확장 프로그램을 만든 다음 버튼을 하나 추가하고 버튼을 클릭하면 Storage에 값을 저장하도록 만들어보면 됩니다.

예를 들어

chrome.storage.local.set({
    message: "Hello Extension"
});

를 실행한 다음 개발자 도구에서 저장된 값을 확인해보는 방식입니다.

그리고 값을 변경하거나 삭제한 후 다시 확장 프로그램을 실행해보면 Storage가 실제로 어떻게 동작하는지 쉽게 확인할 수 있습니다.

이런 작은 테스트를 몇 번 해보면 chrome.storage.local, chrome.storage.sync, chrome.storage.session의 차이도 자연스럽게 이해하게 됩니다.

마무리

Extension Storage는 Chrome Extension을 개발한다면 한 번쯤 반드시 만나게 되는 기능입니다.

처음에는 단순히 “확장 프로그램 설정을 저장하는 곳”이라고 생각해도 충분하지만, 실제 개발을 시작하면 어떤 데이터를 저장할 것인지, 얼마나 오래 유지할 것인지, 여러 환경에서 동기화할 필요가 있는지 등을 고민하게 됩니다.

특히 개발자 도구를 이용하면 확장 프로그램의 동작을 단순히 코드만 보고 추측하는 것이 아니라 실제로 저장된 데이터와 실행 상태를 확인하면서 디버깅할 수 있습니다.

앞에서 살펴본 Cookies, Local Storage, Session Storage, IndexedDB, Cache Storage와 마찬가지로 Extension Storage도 무조건 많이 알아야 하는 기능이라기보다는 각각 어떤 목적을 가지고 있는지를 구분하는 것이 중요합니다.

웹사이트를 개발할 때 사용하는 저장소와 Chrome Extension에서 사용하는 Storage API를 구분해두면 나중에 확장 프로그램을 직접 만들거나 기존 확장 프로그램을 분석할 때도 훨씬 수월합니다.

결국 중요한 것은 하나입니다.

데이터를 저장하는 것보다, 어떤 데이터를 어떤 저장소에 저장해야 하는지를 판단하는 것.

이 기준을 잡아두면 브라우저 저장소를 볼 때마다 “이건 왜 여기에 저장되어 있지?”라는 질문에 조금씩 답할 수 있게 됩니다.