How to use ES6 import” with Chrome Extension


The minimum example is working here.

Table of Contents

  1. Why?
  2. Background Script
  3. Content Script
  4. Conclusion


Static files like CSS and JavaScript always have a specific problem to deliver themselves: “How to bundle bunch of dependencies to one file”.

<script type="module" src="your-script.js"></script>

Background Script

Since background script of Chrome Extension is loaded by background.scripts field of manifest.json , it’s not possible to add “module” attribute as <script> tag. So just let’s use field instead, as an entrypoint of your JavaScript files.

"background": {
"page": "src/html/background.html"
<script type="module" src="src/js/background.js"></script>

Content Script

Content Script, on the other hand, must be loaded automatically when content_scripts are specified in manifest.json, kind of hacks are needed.

Uncaught SyntaxError: Unexpected identifier
(async () => {
const src = chrome.extension.getURL('src/js/main.js');
const contentScript = await import(src);
import User from "./my-models/User";export function main() {
// Do what you want
const user = new User({name: "otiai10"});


Thus, it’s not so hard work to use import for your Chrome Extension. But still we have problems which are usually solved by kind of Webpack.

  1. Minifying / Uglifying / Transpiling AltJS are still needed in some cases.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store