avoid conflict with importmaps

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)

packages/extension/babel.config.json

@@ -1,3 +1,10 @@
 {
-  "presets": [["@babel/preset-env", { "targets": "defaults" }]]
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": { "chrome": "111", "firefox": "128" }
+      }
+    ]
+  ]
 }

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"
     }
   }
 }

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,
+  });
 }

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' })],
 };