Using manifest for chrome & edge

content.js

@@ -67,7 +67,12 @@ function addToggleButton() {
   const rows = document.querySelectorAll('tr');
   rows.forEach(row => {
     const titleCell = row.querySelector('td.attributeTitleColumn > span[style*="padding:5px"]');
-    if (titleCell && titleCell.textContent.trim() === 'Structured Data') {
+    if (!titleCell) {
+      console.error('titleCell not found in row:', row);
+      return;
+    }
+
+    if (titleCell.textContent.trim() === 'Structured Data') {
       console.log('Found Structured Data row');
       let toggleButton = row.querySelector('.toggle-button');
       if (!toggleButton) {
@@ -77,7 +82,7 @@ function addToggleButton() {
         toggleButton.className = 'toggle-button';
         toggleButton.addEventListener('click', (event) => {
           event.preventDefault();  // Prevent any default action
-          toggleXML();
+          toggleXML(titleCell);
         });
 
         // Append the button directly next to the "Structured Data" text
@@ -87,19 +92,8 @@ function addToggleButton() {
   });
 }
 
-  function formatXML() {
-    const rows = document.querySelectorAll('tr');
-    let xmlContainer = null;
 
-    rows.forEach(row => {
-      const titleCell = row.querySelector('td.attributeTitleColumn > span[style*="padding:5px"]');
-      if (titleCell && titleCell.textContent.trim() === 'Structured Data') {
-        xmlContainer = row.querySelector('td.left > span[style*="padding:5px"]');
-      }
-    });
-  
-    if (xmlContainer) {
-      const xmlString = xmlContainer.innerHTML.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
+function formatXML(xmlString) {
   const parser = new DOMParser();
   const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
   const xsltProcessor = new XSLTProcessor();
@@ -118,11 +112,11 @@ function addToggleButton() {
       </xsl:template>
       <xsl:template match="*">
         <div class="xml-element">
-              <b><xsl:value-of select="name()"/></b>
+          <span class="xml-element-name"><xsl:value-of select="name()"/></span>
           <xsl:if test="count(@*) > 0">
             <span class="xml-attributes"> [</span>
             <xsl:for-each select="@*">
-                  <span class="xml-attribute"><b><xsl:value-of select="name()"/></b>: "<xsl:value-of select="."/>"</span>
+              <span class="xml-attribute"><span class="xml-attribute-name"><xsl:value-of select="name()"/></span>: "<span class="xml-attribute-value"><xsl:value-of select="."/></span>"</span>
               <xsl:if test="position() != last()">
                 <span class="xml-attribute-separator">, </span>
               </xsl:if>
@@ -132,7 +126,7 @@ function addToggleButton() {
           <xsl:if test="normalize-space(text()) != ''">
             : <span class="xml-text-value">"<xsl:value-of select="normalize-space(text())"/>"</span>
           </xsl:if>
-              <div style="margin-left: 20px;">
+          <div class="xml-children">
             <xsl:apply-templates/>
           </div>
         </div>
@@ -143,28 +137,47 @@ function addToggleButton() {
   xslStylesheet.appendChild(xslTemplateNode);
   xsltProcessor.importStylesheet(xslStylesheet);
   const resultDocument = xsltProcessor.transformToFragment(xmlDoc, document);
-      xmlContainer.innerHTML = '';
-      xmlContainer.appendChild(resultDocument);
-    }
+
+  // Create a container to hold the transformed XML
+  const container = document.createElement('div');
+  container.appendChild(resultDocument);
+  return container.innerHTML;
 }
 
-  function toggleXML() {
-    const rows = document.querySelectorAll('tr');
-    let xmlContainer = null;
 
-    rows.forEach(row => {
-      const titleCell = row.querySelector('td.attributeTitleColumn > span[style*="padding:5px"]');
-      if (titleCell && titleCell.textContent.trim() === 'Structured Data') {
-        xmlContainer = row.querySelector('td.left > span[style*="padding:5px"]');
+function toggleXML(titleCell) {
+  if (!titleCell) {
+    console.error('titleCell is undefined');
+    return;
   }
-    });
 
-    if (xmlContainer) {
-      if (xmlContainer.innerHTML.includes('&lt;')) {
-        formatXML();
-      } else {
-        xmlContainer.style.display = xmlContainer.style.display === 'none' ? 'block' : 'none';
+  const parentRow = titleCell.closest('tr');
+  if (!parentRow) {
+    console.error('Parent row not found');
+    return;
   }
+
+  const xmlContainer = parentRow.querySelector('td.left > span[style*="padding:5px"]');
+  if (!xmlContainer) {
+    console.error('XML container not found');
+    return;
   }
+
+  if (!xmlContainer.dataset.originalXml) {
+    // Save the original XML data
+    xmlContainer.dataset.originalXml = xmlContainer.innerHTML;
+    console.log('Original XML saved');
   }
 
+  if (xmlContainer.innerHTML === xmlContainer.dataset.originalXml) {
+    // Format and display the XML
+    console.log('Formatting XML');
+    const formattedXML = formatXML(xmlContainer.dataset.originalXml.replace(/&lt;/g, '<').replace(/&gt;/g, '>'));
+    xmlContainer.innerHTML = '';
+    xmlContainer.innerHTML = formattedXML;
+  } else {
+    // Revert to the original XML
+    console.log('Reverting to original XML');
+    xmlContainer.innerHTML = xmlContainer.dataset.originalXml;
+  }
+}

manifest.json

@@ -6,7 +6,9 @@
   "permissions": ["activeTab"],
   "content_scripts": [
     {
-      "matches": ["https://iga*.nebraska.edu/*"],
+      "matches": ["https://iga.nebraska.edu/*",
+                  "https://iga-tst.nebraska.edu/*",
+                  "https://iga-dev.nebraska.edu/*"],
       "js": ["content.js"],
       "css": ["styles.css"],
       "run_at": "document_end"