[ChromeExtension] ES6 모듈 사용하기 (ES6 module)

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

helper.js

function func1(msg)
{
    console.log(msg);
}

export { func1 };

PageAction (popup)

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

manifest.json

"browser_action": {
    "default_popup": "popup.html"
}

popup.html

<!-- 이렇게 모듈 타입으로 호출 -->
<script type="module" src="popup.js"></script>

popup.js

// 이런식으로 사용
import { func1 } from './helper.js';

func1('from popup');

background script

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

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

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

manifest.json

"background": {
    "page": "background.html"
}

background.html

<script type="module" src="background.js"></script>

background.js

import { func1 } from './helper.js';

func1('from background');

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

"web_accessible_resources": [
    "main.js",
    "helper.js"
]

content_script.js

// 실제 로딩될 main.js 파일을 dynamic import
(async()=>{
    const src = chrome.extension.getURL('main.js');
    const contentScript = await import(src);
    contentScript.main();
})();

main.js

import { func1 } from './helper.js';

export function main()
{
    // 메인 프로세스를 여기서 실행하면 됨...

    // chrome.runtime이 사용가능한지 체크
    console.log('typeof chrome.runtime = '+(typeof chrome.runtime));

    // 물론 func1() 도 사용가능
    func1('from dynamic imported main.js');
}