From 34bddb7dabb2c063023f589df279931f25b40ad5 Mon Sep 17 00:00:00 2001
From: Julien Deniau <julien@deniau.me>
Date: Wed, 26 Aug 2026 23:03:04 +0200
Subject: [PATCH] avoid conflict with importmaps

---
 CHANGELOG.md                                  |  8 ++++-
 packages/extension/babel.config.json          |  9 +++++-
 .../extension/extension/content-script.js     | 13 --------
 packages/extension/extension/manifest.json    | 31 +++++--------------
 packages/extension/index.js                   | 25 +++++++++++----
 packages/extension/rollup.config.js           |  5 ++-
 6 files changed, 45 insertions(+), 46 deletions(-)
 delete mode 100644 packages/extension/extension/content-script.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8464531..585f3eb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,11 +1,17 @@
 # CHANGELOG
 
-## Unreleased
+# Unreleased
 
 ### devtools
 
 - Use predicates instead of static methods [#3](https://github.com/immutable-js/immutable-devtools/pull/3) by [@jdeniau](https://github.com/jdeniau)
 
+## 2.1.1
+
+### extension
+
+- Run the formatter as a `world: "MAIN"` content script instead of injecting a `<script type="module">` into the page. The module load started before the page's own `<script type="importmap">` was parsed, which made the browser reject that import map and broke every module-based script on the page (GitHub, since they shipped an import map). The extension now adds no node to the DOM, needs no `web_accessible_resources`, and is no longer visible to the page. Requires Chrome 111+ / Firefox 128+.
+
 ## 2.1.0
 
 - Range formatter [#2](https://github.com/immutable-js/immutable-devtools/pull/2) by [@jdeniau](https://github.com/jdeniau)
diff --git a/packages/extension/babel.config.json b/packages/extension/babel.config.json
index 9375ee5..d872e8f 100644
--- a/packages/extension/babel.config.json
+++ b/packages/extension/babel.config.json
@@ -1,3 +1,10 @@
 {
-  "presets": [["@babel/preset-env", { "targets": "defaults" }]]
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": { "chrome": "111", "firefox": "128" }
+      }
+    ]
+  ]
 }
diff --git a/packages/extension/extension/content-script.js b/packages/extension/extension/content-script.js
deleted file mode 100644
index 611435a..0000000
--- a/packages/extension/extension/content-script.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const script = document.createElement('script');
-
-// type module to avoid altering current page
-script.type = 'module';
-
-// browser is for firefox, else fallback to chrome
-const target = typeof browser !== 'undefined' ? browser : chrome;
-
-script.src = target.runtime.getURL('immutable-object-formatter.js');
-script.onload = function () {
-  this.remove();
-};
-(document.head || document.documentElement).appendChild(script);
diff --git a/packages/extension/extension/manifest.json b/packages/extension/extension/manifest.json
index 2d8358c..2fb6989 100644
--- a/packages/extension/extension/manifest.json
+++ b/packages/extension/extension/manifest.json
@@ -4,42 +4,25 @@
   "description": "Makes Immutable JS objects more readable when they are logged to the console.",
   "version": "2.1.7",
   "manifest_version": 3,
-  "minimum_chrome_version": "88.0",
+  "minimum_chrome_version": "111.0",
   "content_scripts": [
     {
-      "matches": [
-        "http://*/*",
-        "https://*/*",
-        "file://*/*"
-      ],
-      "exclude_matches": [
-        "https://app.clickup.com/*"
-      ],
-      "js": [
-        "content-script.js"
-      ],
+      "matches": ["http://*/*", "https://*/*", "file://*/*"],
+      "exclude_matches": [],
+      "js": ["immutable-object-formatter.js"],
       "all_frames": true,
-      "run_at": "document_start"
+      "run_at": "document_start",
+      "world": "MAIN"
     }
   ],
   "devtools_page": "devtool.html",
   "icons": {
     "128": "icon-128.png"
   },
-  "web_accessible_resources": [
-    {
-      "resources": [
-        "immutable-object-formatter.js"
-      ],
-      "matches": [
-        "<all_urls>"
-      ]
-    }
-  ],
   "browser_specific_settings": {
     "gecko": {
       "id": "{57fd6ee5-fa63-4041-b537-49dcce2ed835}",
-      "strict_min_version": "116.0"
+      "strict_min_version": "128.0"
     }
   }
 }
diff --git a/packages/extension/index.js b/packages/extension/index.js
index 094cc4a..46e4cf0 100644
--- a/packages/extension/index.js
+++ b/packages/extension/index.js
@@ -1,11 +1,24 @@
 import installDevTools from '@immutable/devtools';
 import * as Immutable from 'immutable';
 
-// The code can be loaded and unloaded several times on the same page,
-// so we can't rely on variables inside the modules to detect if the formatters
-// have already been injected into the page.
-// Instead let's set a `window.__ImmutableJSDevToolsFormattersInstalled` property.
-if (window.__ImmutableJSDevToolsFormattersInstalled !== true) {
+// This runs in the page's own realm (content script `world: "MAIN"`), because
+// DevTools reads `window.devtoolsFormatters` from there. Everything else stays
+// inside this bundle: no DOM node is added and no other global is created.
+//
+// The code can be loaded several times on the same page (e.g. the extension
+// being reloaded), so we can't rely on variables inside the modules to detect
+// if the formatters have already been injected into the page.
+// Instead let's flag it on `window`, as a non-enumerable property so that page
+// code walking over `window` doesn't see it.
+const FLAG = '__ImmutableJSDevToolsFormattersInstalled';
+
+if (window[FLAG] !== true) {
   installDevTools(Immutable);
-  window.__ImmutableJSDevToolsFormattersInstalled = true;
+
+  Object.defineProperty(window, FLAG, {
+    value: true,
+    enumerable: false,
+    writable: true,
+    configurable: true,
+  });
 }
diff --git a/packages/extension/rollup.config.js b/packages/extension/rollup.config.js
index c81441b..4b1a75b 100644
--- a/packages/extension/rollup.config.js
+++ b/packages/extension/rollup.config.js
@@ -5,7 +5,10 @@ const config = {
   input: 'index.js',
   output: {
     file: 'extension/immutable-object-formatter.js',
-    format: 'es',
+    // The bundle is a content script running in the page's realm (`world: "MAIN"`),
+    // and content scripts are always classic scripts. `iife` keeps every top-level
+    // binding inside the bundle instead of leaking it into the page's global scope.
+    format: 'iife',
   },
   plugins: [nodeResolve(), babel({ babelHelpers: 'bundled' })],
 };