Usedynamicimport()function.

Unlike the unsafe workaround usingelements, this workaround runs in the same secure JS environment (isolated world of content scripts) and your imported modules can still access global variables As well as functions for the initial content script, including the built-inchromeAPI, such aschrome.runtime.sendMessage.

Incontent_script.jsit looks like

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

You also need to declare the imported script in the manifest'sWeb Accessible Resources:

// ManifestV3

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

// ManifestV2

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

Learn more details:

• How to use ES6 "import" with a Chrome extension
• Working example of ES6 import in Chrome extension
• chrome.runtime.getURL李>

Hope it helps.

Disclaimer

First, it’s important to note that as of January 2018, content scripts do not support modules. This workaround works around the restriction to your extension by embedding the modulescripttag into the returned page.

This is an unsafe solution!

Web scripts (or other extensions) can exploit your code and extract/spoof data by using setters/getters, proxies onObject.prototypeand other prototypesfunctions and /or the global object, because the code inside thescriptelement runs in the JS context of the page, rather than in the secure isolated JS environment that runs content scripts by default.

A safe workaround isthe dynamicimport()shown in another answerhere.

Solution

This is mymanifest.json:

"content_scripts": [ { "js": [ "content.js" ] }], "web_accessible_resources": [ "main.js", "my-script.js" ]

Please note that I have two scripts inweb_accessible_resources.

This is mycontent.js:

'use strict'; const script = document.createElement('script'); script.setAttribute("type", "module"); script.setAttribute("src", chrome.extension.getURL('main.js')); const head = document.head || document.getElementsByTagName("head")[0] || document.documentElement; head.insertBefore(script, head.lastChild);

This will insertmain.jsas a module script into the web page.

All my business logic is now inmain.js.

For this method to work,main.js(and all the scripts Iimportinto)mustbe located in web_accessible_resources in themanifest.

Usage example:my-script.js

'use strict'; const injectFunction = () => window.alert('hello world'); export {injectFunction};

Inmain.js, this is an example of the import script:

'use strict'; import {injectFunction} from './my-script.js'; injectFunction();

This works! No errors were thrown and I was happy. :)