크롬확장프로그램 (V3) content.js 에서 import 사용하기 > IT 기술백서

기본적으로 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") 라고 똑같이 적어줘야 한다.

무슨 말인지 모르겠으면 무조건 절대경로로 정의하고 사용하면 된다라고 이해하자.