Chrome Extension: Import ES6 modules in content scripts

Question

In Chrome 61, support for JavaScript modules was added. Now I'm running Chrome 63.

I'm trying to use a module in a Chrome extension content script using the import/export syntax.

Inmanifest.json:

"content_scripts": [
    {
        "js": [
            "content.js"
        ],
    }
]

Inmy-script.js (with content.js same directory):

'use strict';

const injectFunction = () => window.alert('hello world');

export default injectFunction;

Incontent.js:

'use strict';

import injectFunction from './my-script.js';
injectFunction();

I get this error:Uncaught syntax error: Unexpected identifier

If I change the import syntax to import {injectFunction} from './my-script.js'; I get this error: Uncaught SyntaxError: Unexpected token {< /p>

Is there a problem using this syntax in content.js in the Chrome extension (because in HTML you have to use < ;code>

Answer 1

Use dynamic import() function.

Unlike the unsafe workaround using elements, 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-in chrome API, such as chrome.runtime.sendMessage.

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 also need to declare the imported script in the 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"
  ]

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.

Answer 2

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 module script tag 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 on Object.prototype and other prototypes functions and /or the global object, because the code inside the script element 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 is the dynamic import() shown in another answer here.

Solution

This is my manifest.json:

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

Please note that I have two scripts in web_accessible_resources.

This is my content.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 insert main.js as a module script into the web page.

All my business logic is now in main.js.

For this method to work, main.js (and all the scripts I import into) must be located in web_accessible_resources in the manifest .

Usage example: my-script.js

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

In main.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. :)