Using JavaScript ES6 import/export modules in Chrome Extensions

JavaScript in ECMAScript 6 supports modules which you may now use in Google Chrome since version 61.

How to use ES6 modules in your browser

You can include a module in your HTML by adding a script with type="module":

<script type=”module” src=”my-module.js”></script>

Then in your my-module.js you can start importing and exporting:

import {myFunction} from './modules/my-functions.js';
myFunction ();

myFunction would be exported in my-functions.js as:

const myFunction = () => console.log ('Hello World!');
export {
  myFunction
};

You should also know that you don’t need to use 'use strict'; syntax in your files anymore as in modules strict mode is always used.

How to use JavaScript modules in Chrome Extensions

It is easy to use when you want to use modules in Page action popup or Background script but it gets tricky when you want to use import/export modules in content script.

Page action popup

Popups are used for user interface in Google Chrome toolbar and you can easily create one by editing your manifest:

"page_action": {
  "default_popup": "popup.html"
}