브라우저 확장 프로그램 - 저장소 사용

오늘 기사에서는 이미 뛰어난 팝업 브라우저 확장 기능을 좀 더 개인화하도록 변형할 것입니다.

사용자에게 팝업을 색상화할 수 있는 옵션을 제공할 것입니다.
사용자가 선택한 것을 유지하기 위해 chrome's storage capabilities을 활용합니다.

이 문서를 실험하려면 다음GitHub branch을 시작점으로 사용하십시오.

오늘의 결과는 로컬 저장소의 색상을 유지하는 이 색상 변경 팝업입니다.

브라우저 확장에 스토리지 추가

가장 먼저 해야 할 일은 매니페스트 파일에 저장소 권한을 추가하는 것입니다.manifest.json 파일을 열고 권한 배열에 storage를 추가합니다.

{
  "permissions": [
    "alarms",
    "notifications",
    "storage"
  ]
}

이렇게 하면 스토리지를 사용할 준비가 된 것입니다.

이제 App.jsx 파일을 엽니다. 이 파일이 나머지 문서의 주요 초점이 될 것입니다.

먼저 사용자를 위한 몇 가지 색상 옵션이 있는 선택 목록을 추가하고 싶습니다.

export function App() {
  return (
    <div
      className={`flex flex-col items-center justify-center w-screen h-auto bg-indigo-400 p-4`}
    >
      <select>
        <option>Pick a color</option>
        <option value='indigo'>Indigo</option>
        <option value='pink'>Pink</option>
        <option value='purple'>Purple</option>
      </select>
    </div>
  );
}

Note: I've added some Tailwind classes to the select list, which you can find here.

그런 다음 사용 가능한 모든 색상의 배열을 정의해야 합니다.

const colorMatch = {
  indigo: 'bg-indigo-400',
  pink: 'bg-pink-400',
  purple: 'bg-purple-400',
};

그런 다음 색상 변수를 보유할 상태를 추가할 수 있습니다. 기본적으로 남색을 사용합니다.

const [color, setColor] = useState('indigo');

이제 이 동적 색상을 유지하도록 포장 div 요소를 변경할 수 있습니다.

<div className={`flex flex-col items-center justify-center w-screen h-auto ${colorMatch[color]} p-4`}>

좋아, 이것은 우리의 색상을 역동적으로 만들었지 만 지금은 항상 남색이 될 것입니다.

select 요소에 change catch를 추가하고 select 요소의 값을 설정하는 것으로 시작하겠습니다.

<select onChange={(event) => pickColor(event.target.value)} value={color}>
  <option>Pick a color</option>
  <option value='indigo'>Indigo</option>
  <option value='pink'>Pink</option>
  <option value='purple'>Purple</option>
</select>

좋습니다. 이제 계속해서 이pickColor 함수를 만들어 보겠습니다.

const pickColor = (pickedValue) => {
  setColor(pickedValue);
  chrome.storage.sync.set({ color: pickedValue });
};

먼저 상태 색상 변수를 선택한 색상으로 변경한 다음 color 키를 사용하여 저장소에 설정합니다.

지금 바로 사용해 볼 수 있지만 팝업을 열 때마다 재설정됩니다.

스토리지를 읽고 기본 색상을 변경하는 방법이 필요합니다.

chrome.storage.sync.get('color', (storedColor) => {
  setColor(storedColor.color);
});

그러면 저장소가 로드되고 저장된 색상이 있는 경우 색상이 설정됩니다.

그리고 그게 다야!
이제 사용자는 원하는 확장 색상을 결정할 수 있으며 저장소에 저장됩니다.

여기에서 전체 소스 코드를 찾을 수 있습니다GitHub repo.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나