Improved json detection

src/content-script/json-detector/get-node-with-code.test.ts

@@ -3,24 +3,33 @@ import { edgeUserAgent } from '@testing/user-agents';
 import { getNodeWithCode } from './get-node-with-code';
 
 describe('getNodeWithCode', () => {
+  const addMarkup = (markup: string) => {
+    document.body.innerHTML = markup;
+    document.body.childNodes.forEach(node => {
+      if (node instanceof HTMLElement) {
+        node.innerText = node.innerHTML;
+      }
+    })
+  }
+
   describe('detects pre element in base chrome view', () => {
     const cases = [
       {
-        markup: `<pre>test</pre>`,
-        expected: 'test',
+        markup: `<pre>true</pre>`,
+        expected: 'true',
       },
       {
-        markup: `<div>toolbox</div><pre>some other text</pre>`,
-        expected: 'some other text',
+        markup: `<div>toolbox</div><pre>"some other text"</pre>`,
+        expected: '"some other text"',
       },
       {
-        markup: `<div>toolbox</div><pre>some text</pre><button>click me</button>`,
-        expected: 'some text',
+        markup: `<div>toolbox</div><pre>{"id": 123}</pre><button>click me</button>`,
+        expected: '{"id": 123}',
       },
     ];
 
     test.each(cases)('%p', ({ markup, expected }) => {
-      document.body.innerHTML = markup;
+      addMarkup(markup);
       const pre = getNodeWithCode(document.body.childNodes);
       expect(pre).not.toBeNull();
       expect(pre?.textContent).toBe(expected);
@@ -29,19 +38,16 @@ describe('getNodeWithCode', () => {
 
   describe('detects not find element in other locations', () => {
     const cases = [
-      {
-        markup: `<div>test</div>`,
-      },
-      {
-        markup: `<div> toolbox <pre>some other text</pre> </div>`,
-      },
-      {
-        markup: `<div>toolbox <pre>some text</pre><button>click me</button> </div>`,
-      },
+      { markup: `<div>test</div>` },
+      { markup: `<div> toolbox <pre>some other text</pre> </div>` },
+      { markup: `<div>toolbox <pre>some text</pre><button>click me</button> </div>` },
+      { markup: `<pre>test</pre>` },
+      { markup: `<div>toolbox</div><pre>some other text</pre>` },
+      { markup: `<div>toolbox</div><pre>some text</pre><button>click me</button>` },
     ];
 
     test.each(cases)('%p', ({ markup }) => {
-      document.body.innerHTML = markup;
+      addMarkup(markup);
       const pre = getNodeWithCode(document.body.childNodes);
       expect(pre).toBeNull();
     });
@@ -55,37 +61,37 @@ describe('getNodeWithCode', () => {
 
     const cases = [
       {
-        markup: `<pre>test</pre>`,
-        expected: 'test',
+        markup: `<pre>true</pre>`,
+        expected: 'true',
       },
       {
-        markup: `<div>toolbox</div><pre>some other text</pre>`,
-        expected: 'some other text',
+        markup: `<div>toolbox</div><pre>"some other text"</pre>`,
+        expected: '"some other text"',
       },
       {
-        markup: `<div>toolbox</div><pre>some text</pre><button>click me</button>`,
-        expected: 'some text',
+        markup: `<div>toolbox</div><pre>{"id":123}</pre><button>click me</button>`,
+        expected: '{"id":123}',
       },
       {
-        markup: `<div hidden>test</div>`,
-        expected: 'test',
+        markup: `<div hidden>false</div>`,
+        expected: 'false',
       },
       {
-        markup: `<div>toolbox</div><div hidden>some other text</div>`,
-        expected: 'some other text',
+        markup: `<div>toolbox</div><div hidden>\t"some other text"</div>`,
+        expected: '\t"some other text"',
       },
       {
-        markup: `<div>toolbox</div><div hidden>some text</div><button>click me</button>`,
-        expected: 'some text',
+        markup: `<div>toolbox</div><div hidden>123123</div><button>click me</button>`,
+        expected: '123123',
       },
       {
-        markup: `<pre>text</pre><div hidden>test 2</div>`,
-        expected: 'text',
+        markup: `<pre>["test 2"]</pre><div hidden>test 2</div>`,
+        expected: '["test 2"]',
       },
     ];
 
     test.each(cases)('%p', ({ markup, expected }) => {
-      document.body.innerHTML = markup;
+      addMarkup(markup)
       const div = getNodeWithCode(document.body.childNodes);
       expect(div).not.toBeNull();
       expect(div?.textContent).toBe(expected);
@@ -112,7 +118,7 @@ describe('getNodeWithCode', () => {
       ];
 
       test.each(cases)('%p', ({ markup }) => {
-        document.body.innerHTML = markup;
+        addMarkup(markup)
         const pre = getNodeWithCode(document.body.childNodes);
         expect(pre).toBeNull();
       });

src/content-script/json-detector/get-node-with-code.ts

@@ -1,19 +1,26 @@
+const testNode = <T extends HTMLElement>(node: T | null): T | null => {
+  return node && /(^\s*[{[\d"])|(^\s*true)|(^\s*false)/.test(node.innerText)
+    ? node
+    : null;
+};
+
 export const getNodeWithCode = (list: NodeListOf<ChildNode>): HTMLPreElement | HTMLDivElement | null => {
   const items = Array.from(list);
   const pre = items.find(node => node.nodeName === 'PRE') ?? null;
 
   if (!pre && navigator.userAgent.includes('Edg')) {
     const div = Array.from(list)
-      .find((node) => {
+      .find(node => {
         if (!(node instanceof HTMLDivElement)) {
           return false;
         }
         const attributes = node.getAttributeNames();
         return attributes.length === 1 && attributes[0] === 'hidden';
-      }) ?? null;
+      })
+      ?? null;
 
-    return div as HTMLDivElement | null;
+    return testNode(div as HTMLDivElement | null);
   }
 
-  return pre as HTMLPreElement | null;
+  return testNode(pre as HTMLPreElement | null);
 };