모듈로 사용할 helper.js 라는 파일이 있고 func1() 이라는 함수를 export 한다고 가정하자.


helper.js




PageAction (popup)

브라우저 탭에 붙는 popup의 경우 기본적으로 manifest.json에 html 파일을 지정하도록 되어있으므로 간단함.


manifest.json


popup.html


popup.js





background script

manifest.json에서 일반적으로 background에 script: [ "background.js" ] 같은 형태로 js 파일을 지정하는데,

page를 지정하는 방식으로 html 파일을 지정할 수 있다.

나머진 해당 html 파일 안에서 <script> 태그 안에 type="module" 을 넣어주면 해결됨.


manifest.json


background.html


background.js





content script

content script의 경우 html을 지정하는 방법도 없고,

삽입되는 html의 head에 <script type="module" src="./helper.js"> 형태로 태그를 만들어 넣는 방법은 scope가 완전히 분리되는 바람에 chrome.runtime 등을 사용하지 못하는 치명적인 단점이 있다.

그래서 나온 해결책이 dynamic import를 사용하는 방법.


우선 manifest.json 에서 import 할 js 들을 리스팅 해줘야 함.

귀찮으면 그냥 * 하거나 모듈들이 모여있는 디렉토리를 지정하거나. ex) "src/modules/*"


manifest.json


content_script.js


main.js







Posted by bloodguy

댓글을 달아 주세요