기본적으로 content.js 에서는 ES6 모듈 시스템을 사용하지 못한다.
즉, import 를 사용할 수가 없다.
하지만 동적으로 import 하면 가능하다. (이게 꼼수인지 정석인지는 알 수 없음)
/lib/lib.js
[code]
function hello() {
console.log(‘Hello!!!);
}
[/code]
/content/main.js
[code]
import lib from ‘/lib/lib.js’
lib.hello();
[/code]
/content/content.js
[code]
(async () => {
const src = chrome.runtime.getURL(“/content/main.js”);
const contentMain = await import(src);
const func = contentMain.default;
func();
})();
[/code]
코드설명
content.js 에서는 동적 import 를 사용하여 main.js 를 로딩한다.
main.js 에서는 lib.js 의 hello() 함수를 실행한다.
코딩은 이렇게 하면 되는데 한가지 추가해야 할 사항이 있다.
manifest.json 에 아래와 같이 import 할 항목들을 web_accessible_resources 항목에 추가해 줘야 한다.
mainfest.json (version 3)
[code]
{
…..,
“content_scripts”: [
{
“matches”: [ “https://test.test/*” ],
“js”: [ “./content/content.js” ]
}
],
“web_accessible_resources”: [
{
“matches”: [“https://test.test/*”],
“resources”: [ “/content/main.js”, “/lib/lib.js” ]
}
],
[/code]
주의해야 할 사항은 web_accessible_resources 의 resources 에 나열한 리소스 경로는 import 를 사용할때 그대로 적어줘야 한다.
즉 “/lib/lib.js” 라고 정의했으면 코드에서 import 를 사용할때도 import(“/lib/lib.js”) 라고 똑같이 적어줘야 한다.
무슨 말인지 모르겠으면 무조건 절대경로로 정의하고 사용하면 된다라고 이해하자.
