Restore json global for devtools console (#291)

Author: callumlocke

README.md

@@ -12,13 +12,7 @@ Chrome extension that auto-formats JSON when you view it in a browser tab.
 - Negligible performance impact on non-JSON pages (less than 1 millisecond)
 - Works on any valid JSON page – URL doesn't matter
 - Buttons for toggling between raw and parsed JSON
-- ~~Parsed JSON is exported as a global variable, `json`, so you can inspect it in the console~~*
-
-> *Typing `json` in the console is not working since Manifest v3. If you need a workaround, paste this snippet into the console:
->
-> ```js
-> json = JSON.parse(document.getElementById("jsonFormatterRaw").querySelector("pre").innerText)
-> ```
+- Parsed JSON is exported as a global variable, `json`, so you can inspect it in the console (now working again!)
 
 **Some JSON documents for testing it on:**
 https://callumlocke.github.io/json-formatter/

src/content.entry.ts

@@ -19,10 +19,13 @@ const css = `body {
 }
 #optionBar {
   user-select: none;
-  display: block;
   position: absolute;
-  top: 13px;
-  right: 15px;
+  z-index: 10;
+  top: 8px;
+  right: 10px;
+  background: #fff;
+  box-shadow: 0px 0px 3px 3px #fff;
+  padding: 5px;
 }
 #buttonFormatted,
 #buttonPlain {
@@ -78,6 +81,7 @@ const css = `body {
   padding-left: 20px;
   margin-left: -20px;
   position: relative;
+  content-visibility: auto;
 }
 #jsonFormatterParsed {
   padding-left: 28px;
@@ -226,6 +230,9 @@ a:active {
 
 #optionBar {
   -webkit-font-smoothing: subpixel-antialiased;
+
+  background: #1a1a1a;
+  box-shadow: 0px 0px 3px 3px #1a1a1a;
 }
 
 #jsonFormatterParsed {
@@ -466,17 +473,6 @@ const resultPromise = (async (): Promise<{
     const rootEntry = buildDom(parsedJsonRootStruct, false)
     await Promise.resolve()
     parsedJsonContainer.append(rootEntry)
-
-    // Export parsed JSON for easy access in console - DISABLED; doesn't work with manifest v3 - maybe re-enable later via background worker somehow
-    // @ts-ignore
-    // window.json = parsedJsonValue
-    // Object.defineProperty(window, 'json', {
-    //   value: parsedJsonValue,
-    //   configurable: true,
-    //   enumerable: false, // keep it tidy in console auto-complete
-    //   writable: false,
-    // })
-    // console.log('JSON Formatter: Type "json" to inspect.')
   }
 
   // hide the pretty-print bar
@@ -493,28 +489,9 @@ const resultPromise = (async (): Promise<{
   }
 
   function collapse(elements: HTMLElement[] | HTMLCollection) {
-    let el, i, blockInner
-
-    for (i = elements.length - 1; i >= 0; i--) {
-      el = elements[i]
-      el.classList.add('collapsed')
-
-      // (CSS hides the contents and shows an ellipsis.)
-
-      // Add a count of the number of child properties/items
-      // if (!el.id) {
-      //   // TODO why is this id check needed?
-      //   // Find the blockInner
-      //   blockInner = el.firstElementChild
-      //   while (blockInner && !blockInner.classList.contains('blockInner')) {
-      //     blockInner = blockInner.nextElementSibling
-      //   }
-      //   if (!blockInner) continue // ???
-      //   // ??? this continue has no effect, as the for-loop conitinues after this anyway, right?
-      //   // >>> so what is the point of this entire `if (!el.id)` block?
-      //   // original comment says "Add a count of the number of child properties/items"
-      //   // but that feature seems to be working fine, despite this block doing nothing
-      // }
+    for (let i = elements.length - 1; i >= 0; i--) {
+      const el = elements[i]
+      el.classList.add('collapsed') // hides contents and shows an ellipsis
     }
   }
 

src/manifest.json

@@ -14,6 +14,12 @@
       "matches": ["<all_urls>"],
       "js": ["content.js"],
       "run_at": "document_end"
+    },
+    {
+      "matches": ["<all_urls>"],
+      "js": ["set-json-global.js"],
+      "run_at": "document_idle",
+      "world": "MAIN"
     }
   ],
   "permissions": ["storage"],

src/set-json-global.entry.ts

@@ -0,0 +1,24 @@
+/**
+ * This extra content script exposes the parsed JSON data as a global variable `json` for easy inspection in the devtools console. Runs after the main content has loaded and parsed the JSON. Exits fast on non-JSON pages.
+ */
+;(() => {
+  const pre = document.getElementById('jsonFormatterRaw')?.querySelector('pre')
+  if (!pre) return // not a formatted JSON page
+
+  // timeout to give time for the UI to settle
+  setTimeout(() => {
+    try {
+      const data = JSON.parse(pre.innerText)
+      Object.defineProperty(window, 'json', {
+        value: data,
+        configurable: true,
+        enumerable: false,
+        writable: false,
+      })
+
+      console.log('JSON Formatter: Type "json" to inspect')
+    } catch (error) {
+      console.error('JSON Formatter: Failed to expose JSON global', error)
+    }
+  }, 120)
+})()