React에서 Chrome API를 사용해보자. (with chrome.storage)

나중에는 서버와 통신하도록 할거지만, 우선 로컬로 돌아가게 하기 위해서 chrome.storage를 사용할 생각이다.

chrome.storage에 대한 자세한 사항은 다음의 사이트를 확인하자.

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

chrome.storage - Chrome Developers

유저의 정보를 크롬에 저장하는 API다.

---

@types/chrome 설치 (Typescript 사용시)

만약 본인이 프로젝트에서 Typescript를 사용하고 있다면,

다음의 명령어로 패키지를 설치하자

npm install @types/chrome

앞에 @types가 붙는 패키지들은 기존 노트 패키지들의 타입을 알려주는 패키지들이다.

예를 들어 Material-UI 패키지를 사용한다면, 그 패키지의 Type정보들은 @types/material-ui에 있다.

---

Chrome Storage get, set 해보기

chrome이 전역으로 되어있다고 생각하고 import하지 않고 바로 사용하면 된다.

function Index() {
  const [memoLlist, setMemoList] = useState([]); // memo list

  // load from chrome storage
  useEffect(() => {
    chrome.storage.sync.get("memos", ({ memos }) => {
      setMemoList(memos);
    });
  }, []);
 
  return ...
{

보다시피 chrome을 import하지 않고 chrome.storage.sync.get을 호출했다.

---

암튼 전체 코드

지금 불멍때리기 만드느라 신나서 글쓰고 있는걸 깜빡했다.

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

function Index() {
  const [newMemoText, setNewMemoText] = useState(""); // new memo input text
  const [memoLlist, setMemoList] = useState([]); // memo list

  // load from chrome storage
  useEffect(() => {
    chrome.storage.sync.get("memos", ({ memos }) => {
      setMemoList(memos);
    });
  }, []);

  // handle input text changed
  const handleChangeNewMemoText:React.ChangeEventHandler<HTMLInputElement> = (event) => {
    setNewMemoText(event.target.value);
  }

  // handle button clicked for add new memo
  const handleClickAddNewMemo:React.MouseEventHandler<HTMLButtonElement> = () => {
    // except 0 length 
    if (newMemoText.length <= 0) {
      return;
    }

    // load and add new text
    chrome.storage.sync.get("memos", ({ memos }) => {
      memos.push(newMemoText);
  
      chrome.storage.sync.set({ memos });

      setMemoList(memos);
    });

    // set input text to empty
    setNewMemoText("");
  }

  return (
    <div>
      {/* memo list */}
      <ul id="memoList">
        {memoLlist.map((memo, i) => (
          <li key={`popup-memo-list-${i}`}>{memo}</li>
        ))}
      </ul>
      {/* new memo button */}
      <div id="newMemo">
        <input type="text" id="newMemoText" value={newMemoText} onChange={handleChangeNewMemoText} />
        <button id="newMemoButton" onClick={handleClickAddNewMemo}>추가</button>
      </div>
    </div>
  );
}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
);