Cookbook

This page collects frequently requested features that can't make it to the UI for conceptual reasons.

ES6 Modules

You cannot import or export ES6 modules between rules, but you can use modules from the Internet, for example in this way:

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

Loading modules from version 2.x

In version 3.x+, modules are cached after the first load and are only updated manually from the module edit window. They are no longer loaded from the site DOM tree, but are embedded directly into the script.

If you need to load from the DOM or an external script requires frequent updates, it is better not to use the modules functionality in the extension, but to load it directly via 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)
  })
}