크롬 익스텐션 Storage API 정리

크롬 익스텐션 환경에서 사용할 수 있는 Storage API에 대해서 정리를 해본다.

 

chrome.storage

https://developer.chrome.com/docs/extensions/reference/api/storage?hl=en

 

- 익스텐션 서비스 워커, 컨텐트 스크립트는 스토리지 API에 접근 가능

- 모든 json 직렬화 가능한 객체는 object 속성으로 저장된다.

- bulk read, write에 대하여 비동기적으로 처리된다.

- 캐시와 브라우저 히스토리를 지워도 데이터가 유지된다.

- split incognito를 사용하는 경우에도 저장된 설정은 영속된다.

- 기업 정책을 위한 read only managed storage area를 제공한다. (익스텐션의 셋팅에서 사용한다.)

 

manifest.json 파일에 펄미션을 추가한 이후에 사용할 수 있다.

{

  "name": "My extension",

  ...

  "permissions": [

    "storage"

  ],

  ...

}

 

크롬 익스텐션 환경에서 Web Storage API를 사용할 수 있는가?

추천하지 않는다. 

 

- Extension service workers can't use the Web Storage API.

- Content scripts share storage with the host page.

- Data saved using the Web Storage API is lost when the user clears their browsing history.

 

Storage areas

- storage.local

Data is stored locally and cleared when the extension is removed. The storage limit is 10 MB (5 MB in Chrome 113 and earlier), but can be increased by requesting the "unlimitedStorage" permission. We recommend using storage.local to store larger amounts of data.

 

- storage.sync

If syncing is enabled, the data is synced to any Chrome browser that the user is logged into. If disabled, it behaves like storage.local. Chrome stores the data locally when the browser is offline and resumes syncing when it's back online. The quota limitation is approximately 100 KB, 8 KB per item. We recommend using storage.sync to preserve user settings across synced browsers. If you're working with sensitive user data, instead use storage.session.

 

- storage.session

Holds data in memory for the duration of a browser session. By default, it's not exposed to content scripts, but this behavior can be changed by setting chrome.storage.session.setAccessLevel(). The storage limit is 10 MB (1 MB in Chrome 111 and earlier). Thestorage.session interface is one of several we recommend for service workers.

 

- storage.managed

Administrators can use a schema and enterprise policies to configure a supporting extension's settings in a managed environment. This storage area is read-only.

 

The following samples demonstrate the local, sync, and session storage areas:

 

  chrome.storage.local.set({ key: value }).then(() => {

    console.log("Value is set");

  });

 

  chrome.storage.local.get(["key"]).then((result) => {

    console.log("Value currently is " + result.key);

  });

 

  chrome.storage.sync.set({ key: value }).then(() => {

    console.log("Value is set");

  });

 

  chrome.storage.sync.get(["key"]).then((result) => {

    console.log("Value currently is " + result.key);

  });

 

  chrome.storage.session.set({ key: value }).then(() => {

    console.log("Value was set");

  });

 

  chrome.storage.session.get(["key"]).then((result) => {

    console.log("Value currently is " + result.key);

  });

 

Storage and throttling limits

The Storage API has the following usage limitations:

 

Storing data often comes with performance costs, and the API includes storage quotas. We recommend being careful about what data you store so that you don't lose the ability to store data.

Storage can take time to complete. Make sure to structure your code to account for that time.

 

Synchronous response to storage updates

To track changes made to storage, add a listener to its onChanged event. When anything changes in storage, that event fires. The sample code listens for these changes:

 

background.js:

chrome.storage.onChanged.addListener((changes, namespace) => {

  for (let [key, { oldValue, newValue }] of Object.entries(changes)) {

    console.log(

      `Storage key "${key}" in namespace "${namespace}" changed.`,

      `Old value was "${oldValue}", new value is "${newValue}".`

    );

  }

});

 

clear, get, set, remove 같은 메서드를 제공한다.