Chrome Extension: Import ES6 modules in content scripts

Question

In Chrome 61, support for JavaScript modules was added. Now I'm running Chrome63. I'm trying to use import/export syntax in a Chrome extension content script to consume modules. In manifest.json: "content_scripts":[{"js":["content.js"],}] In my-script.js (with content

P粉739079318 · Answer

Use dynamic `import()< /code>` `function.`


 Unlike the unsafe workaround using

P粉797004644 · Answer

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

Chrome Extension: Import ES6 modules in content scripts

reply all(2)I'll reply

Use dynamic import()< /code> function.

Use dynamic `import()< /code>` `function.`