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

Chrome 확장 콘텐츠 스크립트에서 ES6 모듈 가져오기

문제:

Chrome 63에서 import/를 사용하여 ES6 모듈 가져오기 콘텐츠 스크립트의 구문을 내보내면 다음이 발생합니다. 구문 오류.

원인:

HTML 스크립트와 달리 콘텐츠 스크립트는 기본적으로 모듈 로딩을 지원하지 않습니다.

해결책: 비동기 동적 가져오기( ) 기능

이 문제를 해결하려면 다음을 사용하세요. 해결 방법:

1. manifest.json에서 모듈 스크립트를 웹 액세스 가능 리소스로 선언합니다.
2. content_script.js에서 다음을 사용합니다. import() 함수를 사용하여 모듈을 비동기적으로 로드합니다.
3. 가져오기를 기다리고 다음의 주요 기능을 실행합니다. 당신의 module.

예:

manifest.json:

{
  "web_accessible_resources": [
    {
      "matches": ["<all_urls>"],
      "resources": ["my-module.js"]
    }
  ],
  ...
}

content_script.js:

(async () => {
  const src = chrome.runtime.getURL("my-module.js");
  const module = await import(src);
  module.main();
})();

동기식 가져오기 해결 방법

또는 모듈이 아닌 스크립트에 대해 동기식 가져오기 해결 방법을 사용할 수 있습니다.

1. 매니페스트의 "js" 배열에 스크립트를 추가합니다. json.
2. 기본 콘텐츠에서 스크립트의 전역 변수와 함수를 직접 참조하세요. 스크립트.

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