How to use ES6 import” with Chrome Extension

tl;dr

The minimum example is working here.

Table of Contents

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

Why?

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 background.page 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);
contentScript.main();
})();
import User from "./my-models/User";export function main() {
// Do what you want
const user = new User({name: "otiai10"});
console.log(user);
}

Conclusion

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