Chrome 확장 기능 + Nextjs에서 "크롬"이 정의되지 않은 오류가 발생했을 때 테스트

개시하다

이 기사는 크롬을 Next로 확장합니다.js에서 제작된 사람들을 위한 기사이기 때문에 여러 가지 설정을 한 후에 추기가 필요한 곳에 집중해서 쓰고 싶습니다!
이번에 요약한 것은 로컬 환경에서 전방 동작 검증을 할 때'크롬'을 정의하지 않았기 때문에 검증을 하지 못했다는 것이다.
이것은 그 오류에 대응하는 내용의 비망록이다.

대응 내용

프런트엔드 검증 환경에서 LocalStorage로 전환하는 방법

수정 전

다음 코드의 경우yarn dev 등은 로컬에서 동작 검증을 할 때chrome.storage에 접근할 수 없기 때문에 전방만 검증하려고 할 때 오류가 발생합니다.

const setExtensionStorage = useCallback(async (key, value) => {
  await chrome.storage.local.set(
    {
      [key]: value,
    },
    () => {}
  );
}, []);

수정 후

따라서 아래와 같이 chrome 객체를 참조할 수 없을 경우 오류를 방지하기 위해 Local Storage로 전환합니다.
또한 크롬 형식을 확인하는 조건 지점이 추가되어 인코딩할 때의 오류를 피할 수 있습니다.

const setExtensionStorage = useCallback(async (key, value) => {
+  if (typeof chrome !== 'undefined') {
+    if (typeof chrome.storage !== 'undefined') {
      await chrome.storage.local.set(
        {
          [key]: value,
        },
        () => {}
      );
+    } else {
+      localStorage.setItem(key, value);
+    }
  }
}, []);

패키지 사용 방법

아래의 글을 참고하여 cherome 대상 앞에서 미리 유형을 정의하는 방법도 피할 수 있을 것 같지만 자동 조합청이기 때문에 같이 설치했습니다!
Anglar로 크롬 확장을 만들어 보도록 하겠습니다.
Chrome의 종류를 정의하는 포장 @types/chrome을 npm에 미리 설치합니다.이를 설치해 Visual Studio Code 등을 사용할 때 자동 보완이 효과적이어서 개발이 수월해졌다.

npm에 설치

npm install --save @types/chrome

yarn에 설치

yarn add @types/chrome

최후

Next.js에서 크롬 확장 기능을 제작할 때 확장 기능의 독특한 예의에 끌려 고전할 때가 있습니다. 이 기사가 여러분께 도움이 된다면 기쁘겠습니다!

문장을 인용하다

@types/chrome | Yarn - Package Manager
@types/chrome - npm
Anglar로 크롬 확장기 만들어주세요. - Qita.
TypeScript로 Chrome Extensions 개발