How to import ES6 modules in content script for Chrome Extension

As it’s already mentioned, for background script, it’s good idea to use background.page and use <script type="module"> to kick your JavaScript.

The problem is content script, and injecting <script> tag with type attribute can be a solution.

Another approach than injecting script tag is to use dynamic import function. By this approach, you don’t need to loose scope of chrome module and still can use chrome.runtime or other modules.

• Dynamic import()

In content_script.js, it looks like

(async () => {
  const src = chrome.runtime.getURL("your/content_main.js");
  const contentMain = await import(src);
  contentMain.main();
})();

You’ll also need to declare the imported scripts in manifest’s Web Accessible Resources:

// ManifestV3

  "web_accessible_resources": [{
     "matches": ["<all_urls>"],
     "resources": ["your/content_main.js"]
   }],

// ManifestV2

  "web_accessible_resources": [
     "your/content_main.js"
  ]

For more details:

• How to use ES6 “import” with Chrome Extension
• Working Example of ES6 import in Chrome Extension
• chrome.runtime.getURL

Hope it helps.