내 Chrome 확장 프로그램의 콘텐츠 스크립트로 ES6 모듈을 어떻게 가져올 수 있나요?

Chrome 확장 프로그램용 콘텐츠 스크립트에서 ES6 모듈 가져오기

문제:

Chrome에서 ES6 모듈을 가져오려고 할 때 표준 가져오기/내보내기 구문을 사용하는 확장 콘텐츠 스크립트, 오류 메시지는 다음과 같습니다.

컨텍스트:

Chrome 61에서는 JavaScript 모듈에 대한 지원을 도입했지만 가져오기 구문은 Chrome 확장 프로그램의 콘텐츠 스크립트에서 인식되지 않습니다.

해결책: 비동기식 동적 import() 함수

ES6을 가져오려면 Chrome 확장 프로그램 콘텐츠 스크립트의 모듈에서는 비동기 동적 import() 함수를 사용합니다.

(async () => {
  const src = chrome.runtime.getURL("your/content_main.js");
  const contentMain = await import(src);
  contentMain.main();
})();

추가 고려 사항:

• 확장 프로그램 매니페스트에서 가져온 스크립트 선언 웹에서 접근 가능한 리소스로 사용됩니다.
• 이 접근 방식은 비동기식 기능에 의존하며, 이는 잠재적으로 웹사이트의 서비스 워커.

동기식 "가져오기" 해결 방법

대안으로, 모듈이 아닌 일반 스크립트를 사용하고 해당 이름을 "js"에 추가하세요. 기본 콘텐츠 스크립트 앞의 "content_scripts"에 배열합니다. 스크립트의 전역 변수와 함수에 직접 접근할 수 있습니다.

위 내용은 내 Chrome 확장 프로그램의 콘텐츠 스크립트로 ES6 모듈을 어떻게 가져올 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!