diff --git a/docs/how-to-create-new-effects.md b/docs/how-to-create-new-effects.md
index 9a17254..fe5960e 100644
--- a/docs/how-to-create-new-effects.md
+++ b/docs/how-to-create-new-effects.md
@@ -185,7 +185,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // Store uniform locations of newly created shaders.
       shader._uFadeWidth = shader.get_uniform_location("uFadeWidth");
 
@@ -201,7 +201,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // The effect is available on all GNOME Shell versions supported by this extension.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 36];
   }
 
@@ -210,13 +210,13 @@ export default class Effect {
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time'). Also, the shader file and the settings UI files should be
   // named likes this.
-  getNick() {
+  static getNick() {
     return "simple-fade";
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _("Simple Fade Effect");
   }
 
@@ -224,7 +224,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     // Empty for now... Code is added here later in the tutorial!
   }
 
@@ -233,7 +233,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return { x: 1.0, y: 1.0 };
   }
 }
@@ -370,7 +370,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
 In order to load the above `*.ui` file, add the following code to your effect's `bindPreferences()` method.
 
 ```javascript
-bindPreferences(dialog) {
+static bindPreferences(dialog) {
   // These connect the settings to the UI elements. Have a look at prefs.js
   // on how to bind other types of UI elements.
   dialog.bindAdjustment('simple-fade-animation-time');
diff --git a/extension.js b/extension.js
index c1e52da..fdf4d22 100644
--- a/extension.js
+++ b/extension.js
@@ -437,7 +437,8 @@ export default class BurnMyWindows extends Extension {
 
     if (previewNick != '') {
       const activeProfile = this._settings.get_string('active-profile');
-      effect  = this._ALL_EFFECTS.find(effect => effect.getNick() == previewNick);
+      effect =
+        this._ALL_EFFECTS.find(effect => effect.constructor.getNick() == previewNick);
       profile = this._profiles.find(p => p.path == activeProfile);
 
       // Only preview the effect until the preview window is closed.
@@ -520,7 +521,8 @@ export default class BurnMyWindows extends Extension {
 
         // Create a list of all enabled effects of this profile.
         const enabled = this._ALL_EFFECTS.filter(effect => {
-          return profile.settings.get_boolean(`${effect.getNick()}-enable-effect`);
+          return profile.settings.get_boolean(
+            `${effect.constructor.getNick()}-enable-effect`);
         });
 
         // And then choose a random effect.
@@ -558,7 +560,8 @@ export default class BurnMyWindows extends Extension {
     // windows are faded in / out scaled up / down slightly by GNOME Shell. Here, we tweak
     // the transitions so that nothing changes. The window stays opaque and is scaled to
     // actorScale.
-    const actorScale = effect.getActorScale(profile.settings, forOpening, actor);
+    const actorScale =
+      effect.constructor.getActorScale(profile.settings, forOpening, actor);
 
     // All scaling is relative to the window's center.
     actor.set_pivot_point(0.5, 0.5);
@@ -609,8 +612,9 @@ export default class BurnMyWindows extends Extension {
 
     // To make things deterministic during testing, we set the effect duration to 5
     // seconds.
-    const duration =
-      testMode ? 5000 : profile.settings.get_int(effect.getNick() + '-animation-time');
+    const duration = testMode ?
+      5000 :
+      profile.settings.get_int(effect.constructor.getNick() + '-animation-time');
 
     // Finally start the animation!
     shader.beginAnimation(profile.settings, forOpening, testMode, duration, actor);
diff --git a/prefs.js b/prefs.js
index d2a9c94..cba7d03 100644
--- a/prefs.js
+++ b/prefs.js
@@ -101,27 +101,27 @@ export default class BurnMyWindowsPreferences extends ExtensionPreferences {
 
     // New effects must be registered here and in extension.js.
     this._ALL_EFFECTS = [
-      new Apparition(),
-      new BrokenGlass(),
-      new Doom(),
-      new EnergizeA(),
-      new EnergizeB(),
-      new Fire(),
-      new Glide(),
-      new Glitch(),
-      new Hexagon(),
-      new Incinerate(),
-      new Matrix(),
-      new PaintBrush(),
-      new Pixelate(),
-      new PixelWheel(),
-      new PixelWipe(),
-      new Portal(),
-      new SnapOfDisintegration(),
-      new TRexAttack(),
-      new TVEffect(),
-      new TVGlitch(),
-      new Wisps(),
+      Apparition,
+      BrokenGlass,
+      Doom,
+      EnergizeA,
+      EnergizeB,
+      Fire,
+      Glide,
+      Glitch,
+      Hexagon,
+      Incinerate,
+      Matrix,
+      PaintBrush,
+      Pixelate,
+      PixelWheel,
+      PixelWipe,
+      Portal,
+      SnapOfDisintegration,
+      TRexAttack,
+      TVEffect,
+      TVGlitch,
+      Wisps,
     ];
 
     // Load all of our resources.
diff --git a/src/ShaderFactory.js b/src/ShaderFactory.js
index cac8e98..c73e2fe 100644
--- a/src/ShaderFactory.js
+++ b/src/ShaderFactory.js
@@ -24,7 +24,7 @@ import {Shader} from './Shader.js';
 // possible in order to avoid memory leaks.                                             //
 //////////////////////////////////////////////////////////////////////////////////////////
 
-export class ShaderFactory {
+export default class ShaderFactory {
 
   // Creates a new ShaderFactory. Requires the nick of the effect and a callback function
   // which will be called whenever a new shader is created.
diff --git a/src/effects/Apparition.js b/src/effects/Apparition.js
index 4ecb6b0..dc678ad 100644
--- a/src/effects/Apparition.js
+++ b/src/effects/Apparition.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect hides the actor by violently sucking it into the void of magic.          //
@@ -32,7 +33,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // Store uniform locations of newly created shaders.
       shader._uSeed       = shader.get_uniform_location('uSeed');
       shader._uShake      = shader.get_uniform_location('uShake');
@@ -57,7 +58,7 @@ export default class Effect {
 
   // The effect is not available on GNOME Shell 3.36 as it requires scaling of the window
   // actor.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 38];
   }
 
@@ -65,13 +66,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'apparition';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Apparition');
   }
 
@@ -79,7 +80,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('apparition-randomness');
     dialog.bindAdjustment('apparition-animation-time');
     dialog.bindAdjustment('apparition-twirl-intensity');
@@ -92,7 +93,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 2.0, y: 2.0};
   }
 }
diff --git a/src/effects/BrokenGlass.js b/src/effects/BrokenGlass.js
index 67fc988..8e453f8 100644
--- a/src/effects/BrokenGlass.js
+++ b/src/effects/BrokenGlass.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect shatters the window into pieces. For an explanation how this works, look //
@@ -44,7 +45,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // We import these modules in this function as they are not available in the
       // preferences process. This callback is only called within GNOME Shell's process.
       const {Clutter, GdkPixbuf, Cogl} = imports.gi;
@@ -115,7 +116,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // This effect is only available on GNOME Shell 40+.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [40, 0];
   }
 
@@ -124,13 +125,13 @@ export default class Effect {
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time'). Also, the shader file and the settings UI files should be
   // named likes this.
-  getNick() {
+  static getNick() {
     return 'broken-glass';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Broken Glass');
   }
 
@@ -138,7 +139,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('broken-glass-animation-time');
     dialog.bindAdjustment('broken-glass-scale');
     dialog.bindAdjustment('broken-glass-gravity');
@@ -151,7 +152,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 2.0, y: 2.0};
   }
 }
diff --git a/src/effects/Doom.js b/src/effects/Doom.js
index 51b2d64..bbe7088 100644
--- a/src/effects/Doom.js
+++ b/src/effects/Doom.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect melts your windows. Inspired by the legendary screen transitions of the  //
@@ -33,7 +34,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // Store uniform locations of newly created shaders.
       shader._uActorScale      = shader.get_uniform_location('uActorScale');
       shader._uHorizontalScale = shader.get_uniform_location('uHorizontalScale');
@@ -65,7 +66,7 @@ export default class Effect {
 
   // The effect is not available on GNOME Shell 3.36 as it requires scaling of the window
   // actor.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 38];
   }
 
@@ -73,13 +74,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'doom';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Doom');
   }
 
@@ -87,7 +88,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('doom-animation-time');
     dialog.bindAdjustment('doom-horizontal-scale');
     dialog.bindAdjustment('doom-vertical-scale');
diff --git a/src/effects/EnergizeA.js b/src/effects/EnergizeA.js
index 28cde65..1b0523c 100644
--- a/src/effects/EnergizeA.js
+++ b/src/effects/EnergizeA.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect looks a bit like the transporter effect from TOS.                        //
@@ -32,7 +33,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // We import Clutter in this function as it is not available in the preferences
       // process. This creator function of the ShaderFactory is only called within GNOME
       // Shell's process.
@@ -57,7 +58,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // The effect is available on all GNOME Shell versions supported by this extension.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 36];
   }
 
@@ -65,13 +66,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'energize-a';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Energize A');
   }
 
@@ -79,7 +80,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('energize-a-animation-time');
     dialog.bindAdjustment('energize-a-scale');
     dialog.bindColorButton('energize-a-color');
@@ -90,7 +91,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.0, y: 1.0};
   }
 }
\ No newline at end of file
diff --git a/src/effects/EnergizeB.js b/src/effects/EnergizeB.js
index bcb4dd7..04e5ac7 100644
--- a/src/effects/EnergizeB.js
+++ b/src/effects/EnergizeB.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect looks a bit like the transporter effect from TNG.                        //
@@ -32,7 +33,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // We import Clutter in this function as it is not available in the preferences
       // process. This creator function of the ShaderFactory is only called within GNOME
       // Shell's process.
@@ -58,7 +59,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // The effect is available on all GNOME Shell versions supported by this extension.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 36];
   }
 
@@ -66,13 +67,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'energize-b';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Energize B');
   }
 
@@ -80,7 +81,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('energize-b-animation-time');
     dialog.bindAdjustment('energize-b-scale');
     dialog.bindColorButton('energize-b-color');
@@ -91,7 +92,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.0, y: 1.0};
   }
 }
diff --git a/src/effects/Fire.js b/src/effects/Fire.js
index 5237f2f..819de64 100644
--- a/src/effects/Fire.js
+++ b/src/effects/Fire.js
@@ -18,7 +18,8 @@ import Gio from 'gi://Gio';
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect is a homage to the good old Compiz days. However, it is implemented      //
@@ -38,7 +39,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // We import Clutter in this function as it is not available in the preferences
       // process. This creator function of the ShaderFactory is only called within GNOME
       // Shell's process.
@@ -78,7 +79,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // The effect is available on all GNOME Shell versions supported by this extension.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 36];
   }
 
@@ -86,13 +87,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'fire';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Fire');
   }
 
@@ -100,7 +101,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
 
     // Bind all properties.
     dialog.bindAdjustment('fire-animation-time');
@@ -136,7 +137,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.0, y: 1.0};
   }
 
diff --git a/src/effects/Glide.js b/src/effects/Glide.js
index 91165bd..61950b0 100644
--- a/src/effects/Glide.js
+++ b/src/effects/Glide.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This very simple effect fades the window to transparency with subtle 3D effects.     //
@@ -32,7 +33,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // Store uniform locations of newly created shaders.
       shader._uScale  = shader.get_uniform_location('uScale');
       shader._uSquish = shader.get_uniform_location('uSquish');
@@ -55,7 +56,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // The effect is available on all GNOME Shell versions supported by this extension.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 36];
   }
 
@@ -63,13 +64,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'glide';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Glide');
   }
 
@@ -77,7 +78,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('glide-animation-time');
     dialog.bindAdjustment('glide-scale');
     dialog.bindAdjustment('glide-squish');
@@ -90,7 +91,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.0, y: 1.0};
   }
 }
diff --git a/src/effects/Glitch.js b/src/effects/Glitch.js
index d060302..a194385 100644
--- a/src/effects/Glitch.js
+++ b/src/effects/Glitch.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect applies some intentional graphics issues to your windows.                //
@@ -32,7 +33,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // We import Clutter in this function as it is not available in the preferences
       // process. This creator function of the ShaderFactory is only called within GNOME
       // Shell's process.
@@ -63,7 +64,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // The effect is available on all GNOME Shell versions supported by this extension.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 36];
   }
 
@@ -71,13 +72,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'glitch';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Glitch');
   }
 
@@ -85,7 +86,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('glitch-animation-time');
     dialog.bindAdjustment('glitch-scale');
     dialog.bindAdjustment('glitch-speed');
@@ -98,7 +99,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.0, y: 1.0};
   }
 }
\ No newline at end of file
diff --git a/src/effects/Hexagon.js b/src/effects/Hexagon.js
index 0286530..44d4f60 100644
--- a/src/effects/Hexagon.js
+++ b/src/effects/Hexagon.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect overlays a glowing hexagonal grid over the window. The grid cells then   //
@@ -33,7 +34,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // We import Clutter in this function as it is not available in the preferences
       // process. This creator function of the ShaderFactory is only called within GNOME
       // Shell's process.
@@ -71,7 +72,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // The effect is available on all GNOME Shell versions supported by this extension.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 36];
   }
 
@@ -79,13 +80,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'hexagon';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Hexagon');
   }
 
@@ -93,7 +94,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('hexagon-animation-time');
     dialog.bindAdjustment('hexagon-scale');
     dialog.bindAdjustment('hexagon-line-width');
@@ -107,7 +108,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.0, y: 1.0};
   }
 }
diff --git a/src/effects/Incinerate.js b/src/effects/Incinerate.js
index 5dbcead..df1554a 100644
--- a/src/effects/Incinerate.js
+++ b/src/effects/Incinerate.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect burns windows to ashes. The fire starts at a random position at the      //
@@ -33,7 +34,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // We import these modules in this function as they are not available in the
       // preferences process. This callback is only called within GNOME Shell's process.
       const {Clutter} = imports.gi;
@@ -108,7 +109,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // This effect is available on all supported GNOME Shell versions.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 36];
   }
 
@@ -116,13 +117,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'incinerate';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Incinerate');
   }
 
@@ -130,7 +131,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('incinerate-animation-time');
     dialog.bindAdjustment('incinerate-scale');
     dialog.bindAdjustment('incinerate-turbulence');
@@ -143,7 +144,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.0, y: 1.0};
   }
 }
\ No newline at end of file
diff --git a/src/effects/Matrix.js b/src/effects/Matrix.js
index 6cb17d5..b007142 100644
--- a/src/effects/Matrix.js
+++ b/src/effects/Matrix.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // The Matrix shader multiplies a grid of random letters with some gradients which are  //
@@ -36,7 +37,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // We import these modules in this function as they are not available in the
       // preferences process. This callback is only called within GNOME Shell's process.
       const {Clutter, GdkPixbuf, Cogl} = imports.gi;
@@ -91,7 +92,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // This effect is only available on GNOME Shell 40+.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [40, 0];
   }
 
@@ -99,13 +100,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'matrix';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Matrix');
   }
 
@@ -113,7 +114,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('matrix-animation-time');
     dialog.bindAdjustment('matrix-scale');
     dialog.bindAdjustment('matrix-randomness');
@@ -127,7 +128,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.0, y: 1.0 + settings.get_double('matrix-overshoot')};
   }
 }
diff --git a/src/effects/PaintBrush.js b/src/effects/PaintBrush.js
index 2f66a96..fa8f46f 100644
--- a/src/effects/PaintBrush.js
+++ b/src/effects/PaintBrush.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect paints your windows with a thick paint brush.                            //
@@ -34,7 +35,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // We import these modules in this function as they are not available in the
       // preferences process. This callback is only called within GNOME Shell's process.
       const {Clutter, GdkPixbuf, Cogl} = imports.gi;
@@ -79,7 +80,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // This effect is only available on GNOME Shell 40+.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [40, 0];
   }
 
@@ -87,13 +88,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'paint-brush';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Paint Brush');
   }
 
@@ -101,7 +102,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('paint-brush-animation-time');
     dialog.bindAdjustment('paint-brush-size');
   }
@@ -111,7 +112,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.0, y: 1.0};
   }
 }
diff --git a/src/effects/PixelWheel.js b/src/effects/PixelWheel.js
index 5f30210..3147e96 100644
--- a/src/effects/PixelWheel.js
+++ b/src/effects/PixelWheel.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This simple effect pixelates the window texture and hides the pixels in a wheel-like //
@@ -33,7 +34,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // Store uniform locations of newly created shaders.
       shader._uPixelSize  = shader.get_uniform_location('uPixelSize');
       shader._uSpokeCount = shader.get_uniform_location('uSpokeCount');
@@ -51,7 +52,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // The effect is available on all GNOME Shell versions supported by this extension.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 36];
   }
 
@@ -59,13 +60,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'pixel-wheel';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Pixel Wheel');
   }
 
@@ -73,7 +74,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('pixel-wheel-animation-time');
     dialog.bindAdjustment('pixel-wheel-pixel-size');
     dialog.bindAdjustment('pixel-wheel-spoke-count');
@@ -84,7 +85,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.0, y: 1.0};
   }
 }
diff --git a/src/effects/PixelWipe.js b/src/effects/PixelWipe.js
index c683ef2..3e46689 100644
--- a/src/effects/PixelWipe.js
+++ b/src/effects/PixelWipe.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect pixelates the window texture and hides the pixels radially, starting     //
@@ -33,7 +34,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // Store uniform locations of newly created shaders.
       shader._uPixelSize = shader.get_uniform_location('uPixelSize');
       shader._uStartPos  = shader.get_uniform_location('uStartPos');
@@ -78,7 +79,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // The effect is available on all GNOME Shell versions supported by this extension.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 36];
   }
 
@@ -86,13 +87,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'pixel-wipe';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Pixel Wipe');
   }
 
@@ -100,7 +101,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('pixel-wipe-animation-time');
     dialog.bindAdjustment('pixel-wipe-pixel-size');
   }
@@ -110,7 +111,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.0, y: 1.0};
   }
 }
diff --git a/src/effects/Pixelate.js b/src/effects/Pixelate.js
index 33554a3..f1971f5 100644
--- a/src/effects/Pixelate.js
+++ b/src/effects/Pixelate.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This very simple effect pixelates the window texture and randomly hides pixels until //
@@ -33,7 +34,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // Store uniform locations of newly created shaders.
       shader._uNoise     = shader.get_uniform_location('uNoise');
       shader._uPixelSize = shader.get_uniform_location('uPixelSize');
@@ -51,7 +52,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // The effect is available on all GNOME Shell versions supported by this extension.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 36];
   }
 
@@ -59,13 +60,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'pixelate';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Pixelate');
   }
 
@@ -73,7 +74,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('pixelate-animation-time');
     dialog.bindAdjustment('pixelate-noise');
     dialog.bindAdjustment('pixelate-pixel-size');
@@ -84,7 +85,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.0, y: 1.0};
   }
 }
diff --git a/src/effects/Portal.js b/src/effects/Portal.js
index 8ce59a8..9662274 100644
--- a/src/effects/Portal.js
+++ b/src/effects/Portal.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This ridiculous effect teleports your windows from and to alternative dimensions.    //
@@ -33,7 +34,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // We import Clutter in this function as it is not available in the preferences
       // process. This creator function of the ShaderFactory is only called within GNOME
       // Shell's process.
@@ -65,7 +66,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // The effect is available on all GNOME Shell versions supported by this extension.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 36];
   }
 
@@ -73,13 +74,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'portal';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Portal');
   }
 
@@ -87,7 +88,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('portal-animation-time');
     dialog.bindAdjustment('portal-rotation-speed');
     dialog.bindAdjustment('portal-whirling');
@@ -100,7 +101,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.0, y: 1.0};
   }
 }
diff --git a/src/effects/SnapOfDisintegration.js b/src/effects/SnapOfDisintegration.js
index ac41568..a5f771a 100644
--- a/src/effects/SnapOfDisintegration.js
+++ b/src/effects/SnapOfDisintegration.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effects dissolves your windows into a cloud of dust. For this, it uses an       //
@@ -38,7 +39,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // We import these modules in this function as they are not available in the
       // preferences process. This callback is only called within GNOME Shell's process.
       const {Clutter, GdkPixbuf, Cogl} = imports.gi;
@@ -91,7 +92,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // This effect is only available on GNOME Shell 40+.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [40, 0];
   }
 
@@ -99,13 +100,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'snap';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Snap of Disintegration');
   }
 
@@ -113,7 +114,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('snap-animation-time');
     dialog.bindAdjustment('snap-scale');
     dialog.bindColorButton('snap-color');
@@ -124,7 +125,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.2, y: 1.2};
   }
 }
diff --git a/src/effects/TRexAttack.js b/src/effects/TRexAttack.js
index 02df7c1..3d6dbe7 100644
--- a/src/effects/TRexAttack.js
+++ b/src/effects/TRexAttack.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect tears your windows apart with a series of violent scratches!             //
@@ -34,7 +35,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // We import these modules in this function as they are not available in the
       // preferences process. This callback is only called within GNOME Shell's process.
       const {Clutter, GdkPixbuf, Cogl} = imports.gi;
@@ -89,7 +90,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // This effect is only available on GNOME Shell 40+.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [40, 0];
   }
 
@@ -97,13 +98,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'trex';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('T-Rex Attack');
   }
 
@@ -111,7 +112,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('trex-animation-time');
     dialog.bindColorButton('trex-scratch-color');
     dialog.bindAdjustment('trex-scratch-scale');
@@ -124,7 +125,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     const scale = 1.0 + 0.5 * settings.get_double('trex-scratch-warp');
     return {x: scale, y: scale};
   }
diff --git a/src/effects/TVEffect.js b/src/effects/TVEffect.js
index 52dd25a..41e2d0d 100644
--- a/src/effects/TVEffect.js
+++ b/src/effects/TVEffect.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect hides the actor by making it first transparent from top and bottom       //
@@ -34,7 +35,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // We import Clutter in this function as it is not available in the preferences
       // process. This creator function of the ShaderFactory is only called within GNOME
       // Shell's process.
@@ -55,7 +56,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // The effect is available on all GNOME Shell versions supported by this extension.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 36];
   }
 
@@ -63,13 +64,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'tv';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('TV Effect');
   }
 
@@ -77,7 +78,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('tv-animation-time');
     dialog.bindColorButton('tv-effect-color');
   }
@@ -87,7 +88,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.0, y: 1.0};
   }
 }
diff --git a/src/effects/TVGlitch.js b/src/effects/TVGlitch.js
index f1c944d..d9bf0ed 100644
--- a/src/effects/TVGlitch.js
+++ b/src/effects/TVGlitch.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect combines the Glitch and the TV Effect. Credits go to Kurt Wilson         //
@@ -33,7 +34,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // We import Clutter in this function as it is not available in the preferences
       // process. This creator function of the ShaderFactory is only called within GNOME
       // Shell's process.
@@ -64,7 +65,7 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // The effect is available on all GNOME Shell versions supported by this extension.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 36];
   }
 
@@ -72,13 +73,13 @@ export default class Effect {
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-close-effect'), and its animation time
   // (e.g. '*-animation-time').
-  getNick() {
+  static getNick() {
     return 'tv-glitch';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('TV Glitch');
   }
 
@@ -86,7 +87,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('tv-glitch-animation-time');
     dialog.bindAdjustment('tv-glitch-scale');
     dialog.bindAdjustment('tv-glitch-speed');
@@ -99,7 +100,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.0, y: 1.0};
   }
 }
diff --git a/src/effects/Wisps.js b/src/effects/Wisps.js
index 1ebf887..98ab12d 100644
--- a/src/effects/Wisps.js
+++ b/src/effects/Wisps.js
@@ -16,7 +16,8 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-import {ShaderFactory} from '../ShaderFactory.js';
+const ShaderFactory =
+  typeof global !== 'undefined' ? (await import('../ShaderFactory.js'))?.default : null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect lets your windows be carried to the realm of dreams by some little       //
@@ -33,7 +34,7 @@ export default class Effect {
   // GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
   // newly created shader instance.
   constructor() {
-    this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
+    this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
       // We import Clutter in this function as it is not available in the preferences
       // process. This creator function of the ShaderFactory is only called within GNOME
       // Shell's process.
@@ -67,20 +68,20 @@ export default class Effect {
   // ---------------------------------------------------------------------------- metadata
 
   // The effect is available on all GNOME Shell versions supported by this extension.
-  getMinShellVersion() {
+  static getMinShellVersion() {
     return [3, 36];
   }
 
   // This will be called in various places where a unique identifier for this effect is
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. the '*-enable-effect').
-  getNick() {
+  static getNick() {
     return 'wisps';
   }
 
   // This will be shown in the sidebar of the preferences dialog as well as in the
   // drop-down menus where the user can choose the effect.
-  getLabel() {
+  static getLabel() {
     return _('Wisps');
   }
 
@@ -88,7 +89,7 @@ export default class Effect {
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
-  bindPreferences(dialog) {
+  static bindPreferences(dialog) {
     dialog.bindAdjustment('wisps-animation-time');
     dialog.bindAdjustment('wisps-scale');
     dialog.bindColorButton('wisps-color-1');
@@ -113,7 +114,7 @@ export default class Effect {
   // The getActorScale() is called from extension.js to adjust the actor's size during the
   // animation. This is useful if the effect requires drawing something beyond the usual
   // bounds of the actor. This only works for GNOME 3.38+.
-  getActorScale(settings) {
+  static getActorScale(settings) {
     return {x: 1.0, y: 1.0};
   }
 }