diff --git a/browser/components/extensions/ext-devtools-inspectedWindow.js b/browser/components/extensions/ext-devtools-inspectedWindow.js
index a24a7203e771..7e52a6b387d9 100644
--- a/browser/components/extensions/ext-devtools-inspectedWindow.js
+++ b/browser/components/extensions/ext-devtools-inspectedWindow.js
@@ -4,16 +4,15 @@
 
 /* global getDevToolsTargetForContext */
 
+XPCOMUtils.defineLazyModuleGetter(this, "DevToolsShim",
+                                  "chrome://devtools-shim/content/DevToolsShim.jsm");
+
 var {
   SpreadArgs,
 } = ExtensionCommon;
 
 this.devtools_inspectedWindow = class extends ExtensionAPI {
   getAPI(context) {
-    const {
-      WebExtensionInspectedWindowFront,
-    } = require("devtools/shared/fronts/webextension-inspected-window");
-
     // Lazily retrieve and store an inspectedWindow actor front per child context.
     let waitForInspectedWindowFront;
     async function getInspectedWindowFront() {
@@ -22,7 +21,7 @@ this.devtools_inspectedWindow = class extends ExtensionAPI {
       // because the first time that the target has been cloned, it is not ready to be used to create
       // the front instance until it is connected to the remote debugger successfully).
       const clonedTarget = await getDevToolsTargetForContext(context);
-      return new WebExtensionInspectedWindowFront(clonedTarget.client, clonedTarget.form);
+      return DevToolsShim.createWebExtensionInspectedWindowFront(clonedTarget);
     }
 
     function getToolboxOptions() {
diff --git a/devtools/client/framework/devtools.js b/devtools/client/framework/devtools.js
index 40abbd2a8ac6..03629444a062 100644
--- a/devtools/client/framework/devtools.js
+++ b/devtools/client/framework/devtools.js
@@ -22,6 +22,9 @@ loader.lazyRequireGetter(this, "DebuggerServer", "devtools/server/main", true);
 loader.lazyRequireGetter(this, "DebuggerClient", "devtools/shared/client/main", true);
 loader.lazyImporter(this, "BrowserToolboxProcess", "resource://devtools/client/framework/ToolboxProcess.jsm");
 
+loader.lazyRequireGetter(this, "WebExtensionInspectedWindowFront",
+      "devtools/shared/fronts/webextension-inspected-window", true);
+
 const {defaultTools: DefaultTools, defaultThemes: DefaultThemes} =
   require("devtools/client/definitions");
 const EventEmitter = require("devtools/shared/old-event-emitter");
@@ -579,6 +582,14 @@ DevTools.prototype = {
     BrowserToolboxProcess.init({ addonID });
   },
 
+  /**
+   * Compatibility layer for web-extensions. Used by DevToolsShim for
+   * browser/components/extensions/ext-devtools-inspectedWindow.js
+   */
+  createWebExtensionInspectedWindowFront: function (tabTarget) {
+    return new WebExtensionInspectedWindowFront(tabTarget.client, tabTarget.form);
+  },
+
   /**
    * Called from the DevToolsShim, used by nsContextMenu.js.
    *
diff --git a/devtools/shim/DevToolsShim.jsm b/devtools/shim/DevToolsShim.jsm
index a505f706fcfd..f761492f944b 100644
--- a/devtools/shim/DevToolsShim.jsm
+++ b/devtools/shim/DevToolsShim.jsm
@@ -300,6 +300,7 @@ let addonSdkMethods = [
 let webExtensionsMethods = [
   "getTargetForTab",
   "getTheme",
+  "createWebExtensionInspectedWindowFront",
 ];
 
 for (let method of [...addonSdkMethods, ...webExtensionsMethods]) {