クックブック

このページには、よく要望されるものの、設計上の理由で UI には入れられない機能をまとめています。

ES6 モジュール

ルール同士で ES6 モジュールをインポート・エクスポートすることはできませんが、インターネット上のモジュールは、たとえば次のように利用できます。

js

;(async () => {
  const { module } = await import("https://...")
  // your code is here
})()

バージョン 2.x の方法でモジュールを読み込む

バージョン 3.x 以降では、モジュールは初回の読み込み後にキャッシュされ、モジュールの編集ウィンドウから手動でのみ更新されます。サイトの DOM ツリーから読み込まれることはなくなり、スクリプトに直接埋め込まれます。

DOM から読み込む必要がある場合や、外部スクリプトを頻繁に更新する必要がある場合は、拡張機能のモジュール機能を使わず、JS で直接読み込むほうが適しています。

js

Promise.allSettled([
  loadScript("https://...js"),
  loadScript("https://...js"),
]).then(() => {
  // your code is here
})

function loadScript(src) {
  return new Promise(function (resolve, reject) {
    const script = document.createElement("script")
    script.src = src
    script.onload = resolve
    script.onerror = reject
    document.head.append(script)
  })
}