다음과 같이 다시 작성할 수 있습니다. Chrome 확장 프로그램에서 npm 모듈을 사용할 수 있습니까?

Question

시도했지만 "요구사항이 정의되지 않았습니다"라는 오류가 발생했습니다. 이 오류에 대한 정보를 찾을 수 없습니다. 누군가 제게 설명해 주실 수 있나요?

Answer 1

2022년 답변 업데이트

짧은 답변: 예, 패키지를 요구하거나 가져올 수 있습니다. Webpack과 같은 패키징 도구를 직접 설정하고 구성하는 대신(특히 사용하지 않은 경우) 이제 Chrome 확장 프로그램용 상용구 코드를 생성하는 데 사용할 수 있는 빌드 도구가 있습니다.

• Extension CLI - 이 도구는 잘 문서화되어 있으며 이 도구를 사용하는 일부 Chrome 확장 프로그램의 소스 코드를 참조할 수도 있습니다(읽기: 다른 사람들이 어떻게 설정하는지 알아보세요).
• Chrome 확장 CLI

사용 시 이점:

• 새 프로젝트는 기본 프로젝트 파일 구조를 초기화하므로 매우 유용합니다.
• 최신 JavaScript(ES6, ES2021)를 지원하므로 모듈이 제대로 작동합니다.
• 패키징 도구가 통합되어 사전 구성되어 있습니다(위의 두 경우 모두 Webpack이었던 것 같습니다). 따라서 도구를 직접 설치하고 구성할 필요가 없습니다.
• 평소와 같이 npm를 사용하여 필요한 패키지/종속성을 설치할 수 있습니다.

그럼 나머지는 Chrome 확장 프로그램 공식 문서를 참조하세요.

Answer 2

가능하지만 조심하셔야 합니다. 패키지를 로드하기 위해 require()를 사용하려고 시도한다는 것은 Node가 파일 시스템에서 해당 파일을 찾으려고 시도한다는 것을 의미합니다. Chrome 확장 프로그램은 파일 시스템이 아닌 매니페스트에 선언한 파일에만 액세스할 수 있습니다.

이 문제를 해결하려면 Webpack과 같은 모듈 번들링 도구를 사용하세요. 이 도구는 require()를 통해 도입된 모든 패키지에 대한 코드가 포함된 단일 JavaScript 파일을 생성합니다. 각 Chrome 확장 프로그램(예: 백그라운드 페이지, 콘텐츠 스크립트, 팝업)에 대해 별도의 모듈을 생성하고 매니페스트에서 생성된 각 모듈을 선언해야 합니다.

require()를 사용할 수 있도록 빌드 시스템을 설정하지 않으려면 보일러플레이트 프로젝트부터 시작하는 것이 좋습니다. 내 확장 프로그램을 확인하여 내가 어떻게 하는지 확인할 수 있습니다.