chrome.storage API 개요

• storage.sync를 사용하여(Veloighter에서는 browser.storage.sycn를 사용함) 크롬 동기화와 사용자 데이터가 자동적으로 동기화가 될 수 있습니다.
• 백그라운드 페이지를 사용 하지않고 익스텐션이 사용자의 데이터에 직접적으로 접근할 수 있습니다.
• 사용자 데이터를 객체로 저장할 수 있습니다.
• 이 API를 사용하기 위해서는 manifest의 permission 부분에 "storage"라고 선언을 해줘야 합니다.

사용법

chrome.storage.sync.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

chrome.storage.sync.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

Storage 코드

export class BrowserStorage {
  private static instance: BrowserStorage;

  public followers: Follower[];

  private id: number;

  constructor(followers: Follower[], id: number) {
    this.followers = followers;
    this.id = id;
  }

  static async getStorage(): Promise<BrowserStorage> {
    if (BrowserStorage.instance) {
      return BrowserStorage.instance;
    }

    let {followers} = await browser.storage.sync.get('followers');
    if (followers === undefined) {
      followers = [];
    }

    let {id} = await browser.storage.sync.get('id');
    if (id === undefined) {
      id = 0;
    }

    BrowserStorage.instance = new BrowserStorage(followers, id);
    return BrowserStorage.instance;
  }

  list(): Follower[] {
    return this.followers;
  }

  sync(): void {
    browser.storage.sync.get('followers').then((data: any) => {
      const {followers} = data;
      this.followers = followers;
    });
  }

  add(follower: Follower): void {
    this.followers.push(follower);
    browser.storage.sync.set({followers: this.followers});
  }

  remove(name: string): void {
    this.followers = this.followers.filter((candidate: Follower) => {
      return candidate.userName !== name;
    });
    browser.storage.sync.set({followers: this.followers});
  }

  getId(): number {
    return this.id;
  }
  
  plusId(): void {
    this.id += 1;
    browser.storage.sync.set({id: this.id});
  }
}

코드 설명

• 클래스 메서드 getStorage 실행 과정
  - 이미 BrowserStorage 클래스 객체에 인스턴스가 있다면 그 인스턴스를 반환합니다.
  - 그렇지 않다면, 스토리지 객체의 followers 키의 값을 followers 변수에 할당합니다. followers 변수의 값이 undefined라면 빈 배열을 할당합니다. 변수 id에 값을 할당하는 과정도 동일하게 작동됩니다. id 값이 undefined라면 0을 할당합니다. 두 변수를 인수 값으로 새로운 인스턴스를 생성합니다. 생성한 인스턴스를 반환합니다.
  - ContentScript에서 스토리지 객체의 follwers 키의 값을 활용 하기위해 사용됩니다.

• 프로토타입 메서드 list 실행 과정
  - 인스터스의 followers 프로퍼티의 값을 반환합니다.
  - Popup에서 state의 followers 키의 초기값을 설정하고, 스토리지 객체에 있는 값과 동기화 하는데 사용됩니다.

• 프로토타입 메서드 sync 실행 과정
  - 스토리지 객체의 'follwers 키의 값을 followers 변수에 할당합니다.
  - 인스터스의 followers 프로퍼티에 followers 변수의 값을 할당합니다.
  - ContentScript에서 스토리지 객체의 follwers 키의 값을 활용 하기위해 사용됩니다.

• 프로토타입 메서드 add 실행 과정
  - 인자로 받은 값(객체)을 인스턴스의 followers 프로퍼티에 추가합니다.
  - 스토리지 객체의 followers 키의 값을 인스턴스의 followers 프로퍼티의 값으로 설정 해줍니다.
  - Popup에서 팔로우한 사용자를 추가할 때 사용됩니다.

• 프로토타입 remove 메서드
  - 기존 인스턴스의 followers 프로퍼티에 할당된 배열에서 인자로 받은 사용자의 이름을 제외한 새로운 배열을 반환합니다. 그 값을 인스턴스 followers 프로퍼티에 할당합니다.

  • 스토리지 객체의 followers 키의 값을 인스턴스의 followers 프로퍼티의 값으로 설정 해줍니다.
    - Poup에서 팔로우한 사용자를 언팔로우할 때 사용됩니다.

• 프로토타입 getId 메서드
  - 인스턴스의 id 프로퍼티의 값을 반환합니다.
  - Popup에서 state의 id 키의 초기값을 설정하고, 스토리지에 있는 값과 동일화 시키는데 사용됩니다.

• 프로토타입 plusId 메서드
  - 인스턴스의 id 값에 1을 추가합니다.
  - 스토리지 객체의 id 키의 값을 인스터스의 id 프로퍼티의 값으로 설정 해줍니다.
  - Poup에서 사용자를 추가할 때 사용됩니다.

Github 링크

• Veloighter Github 링크
• Veloighter Storage 파일 링크