How Can I Import ES6 Modules into a Chrome Extension Content Script?

How to import ES6 modules in content script for Chrome Extension

Background

In Chrome 61, support for JavaScript modules was introduced. Since this question was asked in 2018, the current version of Chrome is much newer, rendering its suggestions potentially outdated. So this article explores contemporary solutions to the issue at hand.

Current Approaches

Asynchronous dynamic import() function for ES modules

This method enables the importing of modules from a trusted source and maintains access to global variables and functions of the initial content script. However, it can be blocked by the website's service worker due to a known issue in Chrome.

Synchronous "import" workaround for normal non-module scripts

This method utilizes non-module scripts, adds their names to the "js" array in "content_scripts," and then references the global variables/functions directly.

Further Information

• How to use ES6 "import" with Chrome Extension: https://stackoverflow.com/questions/48277565/how-to-import-es6-modules-in-content-script-for-chrome-extension
• Working Example of ES6 import in Chrome Extension: https://github.com/TheSavior/chrome-extension-es6-tips
• chrome.runtime.getURL: https://developer.chrome.com/docs/extensions/reference/runtime/#method-getURL

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