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

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

배경:
Chrome 61에서는 다음에 대한 지원을 도입했습니다. 자바스크립트 모듈. 그러나 콘텐츠 스크립트 환경의 제한으로 인해 Chrome 확장 프로그램용 콘텐츠 스크립트에서 모듈을 로드하는 것이 어려울 수 있습니다.

문제:
가져오기/내보내기 구문을 사용하려고 합니다. 콘텐츠 스크립트에 있지만 구문 오류가 발생했습니다.

해결책:
두 가지가 있습니다. 콘텐츠 스크립트에서 모듈을 로드하는 방법:

ES 모듈을 위한 비동기 동적 import() 함수:

• 확장 프로그램의 매니페스트에 로드할 스크립트 선언 웹 액세스 가능 리소스로 사용됩니다.
• 콘텐츠 스크립트 내에서 import() 함수를 사용하여 작업 중에 모듈을 동적으로 가져옵니다. 런타임.

예:

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

일반적인 비모듈 스크립트에 대한 동기식 "가져오기" 해결 방법:

• 쓰기 모듈을 일반적인 비모듈 스크립트로 사용하세요.
• 추가 기본 콘텐츠 스크립트 앞에 있는 매니페스트의 "content_scripts" 섹션에 있는 "js" 배열에 이름을 지정하세요.
• 콘텐츠 스크립트에서 모듈의 변수와 함수에 직접 액세스하세요.

참고:
비동기 동적 가져오기 방식은 더 안전하고 유연하지만 웹사이트의 서비스 워커에 의해 차단될 수 있습니다. 동기식 "가져오기" 해결 방법은 덜 강력하지만 더 안정적일 수 있습니다.

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