Revert "change script injection approach to use a temporary <script… (

#1169) * Revert "change script injection approach to use a temporary `<script` tag (#1164)" This reverts commit f57d124. * chore: add changeset
apollographql · Dec 20, 2023 · 5a36ab4 · 5a36ab4
1 parent a36115f
commit 5a36ab4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 27 deletions.
diff --git a/.changeset/little-apricots-refuse.md b/.changeset/little-apricots-refuse.md
@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Revert change to script injection approach
diff --git a/src/extension/tab/tab.ts b/src/extension/tab/tab.ts
@@ -2,33 +2,25 @@
 import "./tabRelay";
 import browser from "webextension-polyfill";
 
-injectScriptSync(browser.runtime.getURL("hook.js"));
-
-// In this content script we have access to DOM, but don't have access to the webpage's window,
-// so we inject this inline script tag into the webpage (allowed in Manifest V2).
-// In Manifest V3, we'll have to switch this approach for Chrome-based browsers.
-// This function is based on
-// https://github.com/facebook/react/blob/18a9dd1c60fdb711982f32ce5d91acfe8f158fe1/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js
-// which is released under a MIT license (Copyright (c) Meta Platforms, Inc. and affiliates.) that can be found here:
-// https://github.com/facebook/react/blob/18a9dd1c60fdb711982f32ce5d91acfe8f158fe1/LICENSE
-function injectScriptSync(src: string) {
-  let code = "";
-  const request = new XMLHttpRequest();
-  request.addEventListener("load", function () {
-    code = this.responseText;
-  });
-  request.open("GET", src, false);
-  request.send();
-
+/* 
+  Content scripts are unable to modify the window object directly. 
+  A common workaround for this issue is to inject an inlined function
+  into the inspected tab.
+*/
+if (typeof document === "object" && document instanceof HTMLDocument) {
   const script = document.createElement("script");
-  script.textContent = code;
-
-  // This script runs before the <head> element is created,
-  // so we add the script to <html> instead.
-  if (typeof document === "object" && document instanceof HTMLDocument) {
-    document.documentElement.appendChild(script);
-    if (script.parentNode) {
-      script.parentNode?.removeChild(script);
+  script.setAttribute("type", "module");
+  script.setAttribute("src", browser.runtime.getURL("hook.js"));
+  document.addEventListener("DOMContentLoaded", () => {
+    const importMap = document.querySelector('script[type="importmap"]');
+    if (importMap != null) {
+      importMap.parentNode?.insertBefore(script, importMap.nextSibling);
+    } else {
+      const head =
+        document.head ||
+        document.getElementsByTagName("head")[0] ||
+        document.documentElement;
+      head.insertBefore(script, head.lastChild);
     }
-  }
+  });
 }