A SystemJS loader for Web Extension content script

Usage no npm install needed!

<script type="module">
  import magicWorksWebextensionSystemjs from 'https://cdn.skypack.dev/@magic-works/webextension-systemjs';


Use SystemJS in content script of Web Extension


To use ES Module in Web Extension.

But it is blocked by Firefox Bug 1536094: Dynamic module import doesn't work in webextension content scripts


If not running on the Firefox, you have to include a polyfill: webextension-polyfill.

  • Build all your code into ESModule format and SystemJS format.


  1. Install @magic-works/webextension-systemjs
  2. Load @magic-works/webextension-systemjs/background-script.js in the background script
  3. Load @magic-works/webextension-systemjs/content-script.js before your code.
  4. Transpile all your code into SystemJS format.
  5. Run you content script by
// Chrome support native ES Module in content script
import(browser.runtime.getURL("./es/content-script.js")).catch(() => {
    // Firefox fallback to SystemJS

An example repo