개요

ebsi에서 자막 크기를 제한없이 변경하게 해주는 익스텐션을 개발하고 있었다.
내가 설정해놓은 자막 크기를 기억해놓고, 다음 번에 자동으로 설정해주면 좋을 것 같아
chrome.storage을 사용해보기로 했다.

// manifest.json
{
  ...
  "permissions": ["storage"]
  ...
}

ebsi는 일반 화면일때의 자막과 풀스크린일 때의 자막 크기를 따로 설정해줄 수 있기 때문에
이 두 개의 값을 스토리지에 저장하기로 하였다.

문제

그런데 문제가 있었다.
일반적으로 개발자도구의 Application에서는 익스텐션의 스토리지를 볼 수 없었다.
그래서 익스텐션의 스토리지를 보기 위해서는 다음과 같은 코드를 통해 로그로 출력해주어야 했다.

chrome.storage.local.get((result) => console.log(result));
/*
간단하게 다음과 같이 쓸 수도 있다
chrome.storage.local.get(console.log);
*/

그런데 스토리지 값의 변화를 보기 위해선 매번 로그를 출력해줘야 한다는 점이 너무 번거로웠다.
그래서 더 나은 방법을 찾아보기로 하였다.

해결

내가 찾은 방법은 이렇다.
Storage Area Explorer라는 익스텐션을 설치한다.

// manifest.json
{
  ...
  "options_page": "options.html"
}

options_page를 메니페스트에 추가한다. options.html은 빈 파일이어도 상관없다.

그러면 세부정보에 확장 프로그램 옵션이 생겼을 텐데, 눌러서 들어가준다.

여기서 개발자도구를 열어보면 Storage Explorer라는 게 있다.

눌러보면 다음과 같이 스토리지를 GUI로 확인할 수 있다.

질문

혹자는 다음과 같은 생각을 할 수도 있다.

'옵션 페이지를 추가하지 말고, 그냥 바로 ebsi에서 확인하면 안 되나?'

위와 같이 ebsi에서 바로 확인해보면 익스텐션의 스토리지를 확인할 수 없었다.
그래서 옵션 페이지를 거쳐서 익스텐션의 스토리지를 확인하는 것이다.

후기

솔직히 나도 아는 게 많이 없고 이것이 최선의 방법인지도 모르겠다,
하지만 이런 글이라도 누군가에게는 도움이 될 수 있을 지도 모르니 최선을 다해 적어보았다.
예상보다 글 적는 것이 힘들었다.
혹시라도 더 좋은 방법을 찾았다면 알려주시면 감사하겠다.

추가

// manifest.json
{
  ...
   "action": {
    "default_popup": "popup.html"
  }
  ...
}

options_page를 추가하는 방법 대신, action에서 default_popup을 추가하는 방법도 있다.

주소창 오른쪽에 있는 확장 프로그램 아이콘을 우클릭하면 팝업 검사가 뜨는데
눌러주면 똑같이 Storage Explorer을 확인할 수 있다.
개인적으로는 이 방법이 더 편한 것 같았다.