diff --git a/app/services/adapters/web-extension.js b/app/services/adapters/web-extension.js
index 2ba55dc801..c82e3a1dd5 100644
--- a/app/services/adapters/web-extension.js
+++ b/app/services/adapters/web-extension.js
@@ -20,7 +20,8 @@ export default class WebExtension extends BasicAdapter {
     this._connect();
     this._handleReload();
     this._setThemeColors();
-    this._sendEmberDebug();
+
+    Promise.resolve().then(() => this._sendEmberDebug());
 
     return super.init(...arguments);
   }
@@ -31,25 +32,25 @@ export default class WebExtension extends BasicAdapter {
   }
 
   _sendEmberDebug() {
-    loadEmberDebug().then((emberDebug) => {
-      // first send to all frames in current tab
-      this.sendMessage({
-        from: 'devtools',
-        tabId: chrome.devtools.inspectedWindow.tabId,
-        type: 'inject-ember-debug',
-        value: emberDebug,
-      });
-      this.onMessageReceived((message, sender) => {
-        if (message === 'ember-content-script-ready') {
-          this.sendMessage({
-            from: 'devtools',
-            type: 'inject-ember-debug',
-            value: emberDebug,
-            tabId: chrome.devtools.inspectedWindow.tabId,
-            frameId: sender.frameId,
-          });
-        }
-      });
+    let minimumVersion = config.emberVersionsSupported[0].replace(/\./g, '-');
+    let url = chrome.runtime.getURL(`/panes-${minimumVersion}/ember_debug.js`);
+    // first send to all frames in current tab
+    this.sendMessage({
+      from: 'devtools',
+      tabId: chrome.devtools.inspectedWindow.tabId,
+      type: 'inject-ember-debug',
+      value: url,
+    });
+    this.onMessageReceived((message, sender) => {
+      if (message === 'ember-content-script-ready') {
+        this.sendMessage({
+          from: 'devtools',
+          type: 'inject-ember-debug',
+          value: url,
+          tabId: chrome.devtools.inspectedWindow.tabId,
+          frameId: sender.frameId,
+        });
+      }
     });
   }
 
@@ -141,37 +142,6 @@ function loadEmberDebug() {
   let minimumVersion = config.emberVersionsSupported[0].replace(/\./g, '-');
   let xhr;
 
-  /* istanbul ignore next */
-  function loadEmberDebugInWebpage() {
-    const waitForEmberLoad = new Promise((resolve) => {
-      if (window.requireModule) {
-        const has =
-          window.requireModule.has ||
-          function has(id) {
-            return !!(
-              window.requireModule.entries[id] ||
-              window.requireModule.entries[id + '/index']
-            );
-          };
-        if (has('ember')) {
-          return resolve();
-        }
-      }
-
-      /**
-       * NOTE: if the above (for some reason) fails and the consuming app has
-       *       deprecation-workflow's throwOnUnhandled: true
-       *         or set `ember-global`'s handler to 'throw'
-       *       and is using at least `ember-source@3.27`
-       *
-       *       this will throw an exception in the consuming project
-       */
-      if (window.Ember) return resolve();
-
-      window.addEventListener('Ember', resolve, { once: true });
-    });
-    waitForEmberLoad.then(() => 'replace-with-ember-debug');
-  }
   return new Promise((resolve) => {
     if (!emberDebug) {
       xhr = new XMLHttpRequest();
@@ -183,16 +153,6 @@ function loadEmberDebug() {
         if (xhr.readyState === 4) {
           if (xhr.status === 200) {
             emberDebug = xhr.responseText;
-            // prepare for usage in replace, dollar signs are part of special replacement patterns...
-            // wrap in curly braces to be usable in arrow function
-            emberDebug = '{' + emberDebug.replace(/\$/g, '$$$$') + '}';
-            emberDebug =
-              '(' +
-              loadEmberDebugInWebpage
-                .toString()
-                // Use regex to support different cases in dev and prod builds
-                .replace(/['"]replace-with-ember-debug['"];*/, emberDebug) +
-              ')()';
             resolve(emberDebug);
           }
         }
diff --git a/ember-cli-build.js b/ember-cli-build.js
index 1171478434..c4fbcf8d85 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -172,12 +172,48 @@ module.exports = function (defaults) {
     sourceMapConfig: { enabled: false },
   });
 
+  function wrapWithLoader(content) {
+    return `(function loadEmberDebugInWebpage() {
+    const waitForEmberLoad = new Promise((resolve) => {
+      if (window.requireModule) {
+        const has =
+          window.requireModule.has ||
+          function has(id) {
+            return !!(
+              window.requireModule.entries[id] ||
+              window.requireModule.entries[id + '/index']
+            );
+          };
+        if (has('ember')) {
+          return resolve();
+        }
+      }
+
+      /**
+       * NOTE: if the above (for some reason) fails and the consuming app has
+       *       deprecation-workflow's throwOnUnhandled: true
+       *         or set \`ember-global\`'s handler to 'throw'
+       *       and is using at least \`ember-source@3.27\`
+       *
+       *       this will throw an exception in the consuming project
+       */
+      if (window.Ember) return resolve();
+
+      window.addEventListener('Ember', resolve, { once: true });
+    });
+    waitForEmberLoad.then(() => ${content});
+  })()
+  `;
+  }
+
   const emberDebugs = [];
   ['basic', 'chrome', 'firefox', 'bookmarklet', 'websocket'].forEach(function (
     dist
   ) {
     emberDebugs[dist] = map(emberDebug, '**/*.js', function (content) {
-      return `(function(adapter, env) {\n${content}\n}('${dist}', '${env}'));`;
+      return wrapWithLoader(
+        `(function(adapter, env) {\n${content}\n}('${dist}', '${env}'))`
+      );
     });
   });
 
diff --git a/skeletons/web-extension/boot.js b/skeletons/web-extension/boot.js
index 42b649129c..dd68c71483 100644
--- a/skeletons/web-extension/boot.js
+++ b/skeletons/web-extension/boot.js
@@ -3,16 +3,9 @@
 // TODO: make this conditional, only do it when requested.
 // only inject boot script when on an HTML page
 if (document.contentType === 'text/html') {
-  let id = `ember-inspector-boot-${(Math.random() * 100000000).toFixed(0)}`;
-
   let script = document.createElement('script');
 
-  script.setAttribute('id', id);
-
-  script.appendChild(document.createTextNode(`
-  window.EmberENV = { _DEBUG_RENDER_TREE: true };
-  document.getElementById(${JSON.stringify(id)}).remove();
-`));
+  script.src = chrome.runtime.getURL('scripts/boot.js');
 
   document.documentElement.appendChild(script);
 }
diff --git a/skeletons/web-extension/content-script.js b/skeletons/web-extension/content-script.js
index c95c4d114e..70ccdbb8dc 100644
--- a/skeletons/web-extension/content-script.js
+++ b/skeletons/web-extension/content-script.js
@@ -90,7 +90,7 @@
       if (!injected) {
         // cannot use eval here, as the context is limited to the content script-
         const elem = document.createElement('script') ;
-        elem.textContent = message.value;
+        elem.src = message.value;
         document.head.appendChild(elem) ;
         injected = true;
       }
diff --git a/skeletons/web-extension/manifest.json b/skeletons/web-extension/manifest.json
index c219c1ad42..db6861eef2 100644
--- a/skeletons/web-extension/manifest.json
+++ b/skeletons/web-extension/manifest.json
@@ -55,7 +55,14 @@
 
   "web_accessible_resources": [
     {
-      "resources": ["scripts/in-page-script.js"]
+      "resources": [
+        "scripts/in-page-script.js",        
+        "scripts/boot.js",
+        "panes-3-16-0/ember_debug.js"
+      ],
+      "matches": [
+        "*://*/*"
+      ]
     }
   ]
 }
diff --git a/skeletons/web-extension/scripts/init.js b/skeletons/web-extension/scripts/init.js
new file mode 100644
index 0000000000..a46b88ecba
--- /dev/null
+++ b/skeletons/web-extension/scripts/init.js
@@ -0,0 +1,2 @@
+window.EmberENV = { _DEBUG_RENDER_TREE: true };
+document.currentScript.remove();