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

Question

<p><strong>Chrome 61</strong>에는 JavaScript 모듈에 대한 지원이 추가되었습니다. 이제 Chrome 63을 실행하고 있습니다. </p> <p><code>import</code>/<code>export</code> 구문을 사용하여 Chrome 확장 프로그램 콘텐츠 스크립트에서 모듈을 사용하려고 합니다. </p> <p>In<strong><code>manifest.json</code></strong>:</p> <pre class="brush:php;toolbar:false;">"content_scripts": [ { "js": [ "content.js" ], } ]</pre>

my-script.js(content.js 동일한 디렉토리 사용) ): </p> <pre class="brush:php;toolbar:false;">'엄격한 사용'; const injectFunction = () => window.alert('hello world'); 기본 injectFunction;</pre> 내보내기 <p>In<strong><code>content.js</code></strong>: </p> <pre class="brush:php;toolbar:false;">'엄격한 사용'; './my-script.js'에서 injectFunction을 가져옵니다. injectFunction();</pre> <p>다음 오류가 발생합니다:<strong><code>잡히지 않은 구문 오류: 예기치 않은 식별자</code></strong></p> <p>가져오기 구문을 './my-script.js';</code>에서 <code>import {injectFunction}으로 변경하면 다음 오류가 발생합니다. <strong><code>Uncaught SyntaxError : 예상치 못한 토큰 {</code></strong>< /p> </p><p>Chrome 확장 프로그램의 <strong><code>content.js</code></strong>에서 이 구문을 사용하는 데 문제가 있나요? (HTML에서는 < ;코드> <script type="module" src="script.js "></code> 구문), 아니면 제가 뭔가 잘못하고 있는 걸까요? Google이 확장 프로그램 지원을 무시하는 것이 이상해 보입니다.

</code></p>

Answer 1

dynamic import() 기능을 사용하세요.

元素的不安全解决方法不同，此解决方法在相同的安全 JS 环境（内容脚本的隔离世界）中运行，您导入的模块仍然可以访问全局变量以及初始内容脚本的函数，包括内置的 chrome API，例如 chrome.runtime.sendMessage

chrome.runtime.sendMessage와 같은 내장

chrome API를 포함한 함수. content_script.js

content_script.js에서는 다음과 같습니다 으아악 또한 매니페스트의

웹 접근 가능 리소스

에서 가져온 스크립트를 선언해야 합니다.

// 매니페스트V3

으아악

// 매니페스트V2

으아악

자세한 내용 알아보기:
Chrome 확장 프로그램으로 ES6 "가져오기"를 사용하는 방법
Chrome 확장 프로그램에서 ES6 가져오기 작업 예시
• chrome.runtime.getURL李>chrome.runtime.getURL

🎜도움이 되길 바랍니다. 🎜

Answer 2

면책조항

우선, 2018년 1월 현재 콘텐츠 스크립트는 모듈을 지원하지 않는다는 점에 유의하는 것이 중요합니다. 이 해결 방법은 반환된 페이지에 모듈 script 태그를 삽입하여 확장 프로그램에 대한 제한을 우회합니다.

이것은 안전하지 않은 솔루션입니다!

웹 스크립트(또는 기타 확장)는 Object.prototype의 setter/getter, 프록시 및 기타 프로토타입 Object.prototype 和其他原型上使用 setter/getter、代理来利用您的代码并提取/欺骗数据函数和/或全局对象，因为 script함수 및/또는 전역 개체를 사용하여 코드를 활용하고 데이터를 추출/스푸핑할 수 있습니다.

요소 내부는 기본적으로 콘텐츠 스크립트를 실행하는 안전하고 격리된 JS 환경이 아닌 페이지의 JS 컨텍스트에서 실행됩니다.

안전한 해결 방법은 여기의 다른 답변 에 표시된 import()동적

입니다.

솔루션

이건 내 꺼야manifest.json

:

으아악 web_accessible_resources

에는 두 개의 스크립트가 있습니다.

이건 내 꺼야content.js

:

으아악 main.js이렇게 하면

가 모듈 스크립트로 웹 페이지에 삽입됩니다.

main.js내 모든 비즈니스 로직은 이제

에 있습니다.

main.js（以及我将导入的所有脚本）必须位于中清单中的 web_accessible_resources이 방법이 작동하려면

(및 가져오는 모든 스크립트))

반드시 의 매니페스트에 있는 web_accessible_resources에 있어야 합니다. my-script.js 사용 예:

main.js 으아악 In

다음은 가져오기 스크립트의 예입니다. 🎜 으아악 🎜이거 효과가 있어요! 오류도 발생하지 않았고 기뻤습니다. :)🎜