How Can I Successfully Import ES6 Modules into My Chrome Extension\'s Content Scripts?

Importing ES6 Modules in Chrome Extension Content Scripts

Issue: In Chrome 63, importing ES6 modules using the import/export syntax in a content script results in syntax errors.

Solution:

Chrome extensions support ES6 modules through an asynchronous dynamic import() function:

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

However, this method has limitations:

• It can be blocked by the website's service worker.
• Declaring the imported scripts in manifest's Web Accessible Resources is required.

For non-module scripts, consider:

• Using a normal non-module script.
• Adding its name to "js" in "content_scripts" before your main content script.
• Using the global variables/functions directly.

Additional Information:

• [How to use ES6 “import” with Chrome Extension](https://stackoverflow.com/a/50132415)
• [Working Example of ES6 import in Chrome Extension](https://github.com/browsers-toolbox/es-import-in-extension)
• [chrome.runtime.getURL](https://developer.chrome.com/extensions/runtime#method-getURL)

The above is the detailed content of How Can I Successfully Import ES6 Modules into My Chrome Extension\'s Content Scripts?. For more information, please follow other related articles on the PHP Chinese website!