Version increased

- added Session ID to Popup
- added Channels to Popup

README.md

@@ -43,6 +43,9 @@ This project is licensed under the MIT License.
 
 ## Changelog
 
+- v1.1 31.07.2024
+  - added TP Session ID to Popup
+  - added Channels to Popup
 - v1 05.07.2024*
   - Initial Release
 

content.js

@@ -1,7 +1,7 @@
 /***** Content JS for Chrome Extension: Tracking Proxy Helper *****/
 
 /*** Initialisation ***/
-let tpdm = { activeTabId: null, activeWindowId: null, extInit: false, tpl: { tpId: '', eventCount: 0 } };
+let tpdm = { activeTabId: null, activeWindowId: null, extInit: false, tpl: { tpId: '', sessId: '', eventCount: 0 } };
 tpdm.data = tpdm.data || JSON.parse(JSON.stringify(tpdm.tpl));
 //console.log('content.js loaded');
 
@@ -25,7 +25,8 @@ window.addEventListener('message', function(event) {
   //console.log('Message received from injected script:', event);
   if (event.data.type === 'CHECK_TPT_RESULT') {
     //console.log('Message received from injected script:', event);
-    chrome.runtime.sendMessage({ type: 'CHECK_TPT', hasTPT: event.data.hasTPT, tpobj:event.data.tpobj });
+    if (event.data.chaChanged) { chrome.runtime.sendMessage({ type: 'CHECK_TPT', chaChanged:true, tpobj:event.data.tpobj }); }
+    else { chrome.runtime.sendMessage({ type: 'CHECK_TPT', hasTPT: event.data.hasTPT, hasSessID: event.data.hasSessID, tpobj:event.data.tpobj }); }
   }
   if (event.data.type === 'TRACKING_PROXY_RESPONSE') {
     //console.log('Message received from injected TP script:', event);

inject-listener.js

@@ -20,9 +20,19 @@ function getTPDetails() {
 }
 
 // Überprüfung des __tpt Objekts und Versendung des Ergebnisses
-function checkTPT() {
+function checkTPT(obj) {
+  if (typeof obj!='string') return;
+  if (window.__tpt && typeof window.__tpt.cha_str!='string') { window.__tpt.cha_str = ''; }
   const tpDetails = getTPDetails();
-  sendTPmsg({ type: 'CHECK_TPT_RESULT', hasTPT: !!tpDetails.cid, tpobj: tpDetails });
+  if (tpDetails.cha) {
+    if (JSON.stringify(tpDetails.cha)!=tpDetails.cha_str) {
+      sendTPmsg({ type: 'CHECK_TPT_RESULT', chaChanged:true, tpobj: tpDetails });
+      window.__tpt.cha_str = JSON.stringify(tpDetails.cha);
+    }
+  }
+  if (obj=='cid' || obj=='fip') {
+    sendTPmsg({ type: 'CHECK_TPT_RESULT', hasTPT: !!tpDetails.cid, hasSessID: !!tpDetails.fip, tpobj: tpDetails });
+  }
 }
 
 // Proxy Handler zur Überwachung von Änderungen
@@ -30,9 +40,7 @@ const handler = {
   set(target, property, value) {
     target[property] = value;
     debugLog(`Property ${property} changed to`, value);
-    if (property === 'cid') {
-      checkTPT();
-    }
+    checkTPT(property);
     return true;
   },
   get(target, property) {
@@ -50,7 +58,7 @@ if (window.__tpt) {
         value = new Proxy(value, handler);
       }
       Object.defineProperty(this, '__tpt', { value, writable: true, configurable: true, enumerable: true });
-      checkTPT();
+      checkTPT('__tpt');
     },
     configurable: true,
     enumerable: true
@@ -64,7 +72,7 @@ window.addEventListener('message', function(event) {
     //console.log('TRACKING_PROXY_REQUEST message 2', event);
     const eventData = event.data.details.eventData;
     const metaData = event.data.details.metaData;
-    if (eventData.cid && window.__tpt && eventData.cid === window.__tpt.cid) {
+    if (eventData.cid && eventData.fip && window.__tpt && eventData.cid === window.__tpt.cid) {
       //console.log('Tracking Proxy Event detected:', event);
       window.postMessage({ type: 'TRACKING_PROXY_RESPONSE', details: { eventData:eventData, metaData:metaData } }, '*');
     } else {
@@ -86,7 +94,7 @@ setTimeout(() => {
 (function() {
   let tpid = '';
   //console.log("inject.js loaded");
-  function checkTPT() {
+  function checkTPT('1') {
     if (!window.__tpt) return;
     let tpobj = JSON.parse(JSON.stringify(window.__tpt));
     console.log('checkTPT result:', tpobj);
@@ -94,12 +102,12 @@ setTimeout(() => {
     window.postMessage({ type: 'CHECK_TPT_RESULT', tpobj:tpobj }, '*');
   }
   // Überprüfe sofort
-  checkTPT();
+  checkTPT('2');
   // Wiederhole die Überprüfung nach einer kurzen Verzögerung, um sicherzustellen, dass das Objekt geladen ist
   const observer = new MutationObserver((mutations, observer) => {
     if (window.__tpt && window.__tpt.cid) {
       //console.log('TP is now available');
-      checkTPT();
+      checkTPT('3');
       observer.disconnect();
     }
   });

manifest.json

@@ -9,7 +9,7 @@
   "manifest_version": 3,
   "name": "Tracking Proxy Helper",
   "author": "andi@tracking-garden.com",
-  "version": "1",
+  "version": "1.1",
   "description": "This extension gives some information and options using the Tracking Proxy.",
   "icons": {
     //"16": "/img/get_started16.png",

options.css

@@ -99,4 +99,27 @@ button#add-url-field {
     color: #382d3d; /* Farbe für URL Match Labels */
 }
 
+.toggle-header {
+    cursor: pointer;
+    color: #fe6845;
+    background-color: #382d3d;
+    padding: 5px 10px;
+    border-radius: 5px;
+    display: inline-block;
+    margin-bottom: 5px;
+}
+
+#dev-core .section {
+    display: none;
+}
+
+#dev-core .section {
+    background-color: #ccc7aa;
+}
+
+#httpheader {
+    padding: 20px;
+    background-color: white;
+}
+
 /* EOF */

options.html

@@ -6,29 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tracking Proxy Helper - Extension Options</title>
     <link rel="stylesheet" href="options.css">
+    <script src="options.js"></script>
 </head>
 <body>
     <h1>Tracking Proxy Helper Settings</h1>
     <form id="options-form">
-        <div class="section" id="httpheader">
-            <h2>HTTP Header for Dev.Environment</h2>
-            <p class="url-match-label">Notice: The HTTP Header Name is: <strong>Tp-Dev</strong></p>
-            <div class="form-group">
-                <label for="header-value">HTTP Header Value:</label>
-                <input type="text" id="header-value" name="header-value">
-            </div>
-            <strong class="url-match-label">URLs to match:</strong>
-            <div id="url-fields-container">
-                <div class="url-field">
-                    <input type="text" class="url-input" name="url[]">
-                    <label>
-                        <input type="checkbox" class="regex-checkbox"> Is Regex
-                    </label>
-                    <button type="button" class="remove-url-field">Remove</button>
-                </div>
-            </div>
-            <button type="button" id="add-url-field">Add URL Field</button>
-        </div>
         <div class="section" id="blocking">
             <h2>JavaScript Injection and Blocking</h2>
             <div class="form-group">
@@ -73,6 +55,35 @@
                 </div>
             </div>
         </div>
+        <span onclick="toggleSection('dev-core')" class="toggle-header">+ Dev.Core</span>
+        <div class="section" id="dev-core">
+            <div id="httpheader" style="display:none;">
+                <div class="form-group">
+                    <label>HTTP Header Key:</label>
+                    <input type="text" id="header-key" name="header-key" value="Tp-Dev">
+                </div>
+                <div class="form-group">
+                    <label>HTTP Header Value:</label>
+                    <input type="text" id="header-value" name="header-value">
+                </div>
+                <div class="form-group">
+                    <label>
+                        <input type="checkbox" id="header-global"> Add HTTP Header to all Requests (Notice: This will need more Resources)
+                    </label>
+                </div>
+            </div>
+            <strong class="url-match-label">URLs to match:</strong>
+            <div id="url-fields-container">
+                <div class="url-field">
+                    <input type="text" class="url-input" name="url[]">
+                    <label>
+                        <input type="checkbox" class="regex-checkbox"> Is Regex
+                    </label>
+                    <button type="button" class="remove-url-field">Remove</button>
+                </div>
+            </div>
+            <button type="button" id="add-url-field">Add URL Field</button>
+        </div>
         <button type="submit">Save</button>
     </form>
     <h3>Saved Values</h3>

options.js

@@ -2,6 +2,8 @@
 
 document.addEventListener('DOMContentLoaded', function () {
     const form = document.getElementById('options-form');
+
+    //const form = document.getElementById('options-form');
     const addUrlButton = document.getElementById('add-url-field');
     const urlFieldsContainer = document.getElementById('url-fields-container');
     const savedValuesContainer = document.getElementById('saved-values');
@@ -49,7 +51,9 @@ function createUrlField() {
  * Save options to chrome.storage.sync
  */
 function saveOptions() {
+    const headerKey = document.getElementById('header-key').value;
     const headerValue = document.getElementById('header-value').value;
+    const headerGlobal = document.getElementById('header-global').checked;
     const urlFields = document.querySelectorAll('#httpheader .url-field'); // Only URL fields
     const urls = Array.from(urlFields).map(urlField => {
         const urlInput = urlField.querySelector('.url-input');
@@ -57,7 +61,7 @@ function saveOptions() {
 
         // Ensure that the inputs exist
         if (!urlInput || !regexCheckbox) {
-            console.error('Invalid URL field:', urlField);
+            //console.error('Invalid URL field:', urlField);
             return null;
         }
 
@@ -78,7 +82,9 @@ function saveOptions() {
     const blockTrackingProxy = document.getElementById('block-tracking-proxy').checked;
 
     chrome.storage.sync.set({
+        headerKey,
         headerValue,
+        headerGlobal,
         urls,
         scriptContent,
         scriptUrl,
@@ -90,7 +96,7 @@ function saveOptions() {
         trackingProxyUrlIsRegex,
         blockTrackingProxy
     }, function () {
-        alert('Options saved!');
+        //alert('Options saved!');
         displaySavedValues();  // Update displayed saved values
     });
 }
@@ -100,7 +106,9 @@ function saveOptions() {
  */
 function loadOptions() {
     chrome.storage.sync.get([
+        'headerKey',
         'headerValue',
+        'headerGlobal',
         'urls',
         'scriptContent',
         'scriptUrl',
@@ -112,7 +120,9 @@ function loadOptions() {
         'trackingProxyUrlIsRegex',
         'blockTrackingProxy'
     ], function (data) {
+        document.getElementById('header-key').value = data.headerKey || 'Tp-Dev';
         document.getElementById('header-value').value = data.headerValue || '';
+        document.getElementById('header-global').checked = data.headerGlobal || false;
 
         const urlFieldsContainer = document.getElementById('url-fields-container');
         urlFieldsContainer.innerHTML = '';
@@ -148,4 +158,16 @@ function displaySavedValues() {
     });
 }
 
+function toggleSection(sectionId) {
+    const section = document.getElementById(sectionId);
+    const toggleHeader = document.querySelector('.toggle-header');
+    if (section.style.display === 'none') {
+        section.style.display = '';
+        toggleHeader.textContent = '- Dev.Core';
+    } else {
+        section.style.display = 'none';
+        toggleHeader.textContent = '+ Dev.Core';
+    }
+}
+
 // EOF

popup.css

@@ -61,24 +61,24 @@ pre {
   color: #ffffff;
 }
 
-.events {
+.events, .channels {
   margin-top: 10px;
 }
 
-.event-details {
+.event-details, .channel-details {
   color: #382d3d;
   padding: 10px;
   border-radius: 4px;
   margin-bottom: 10px;
 }
 
-.event-details summary {
+.event-details summary, .channel-details summary {
   cursor: pointer;
   font-weight: bold;
   color: #382d3d; /* Dunkelviolett für Event-Namen */
 }
 
-.event-details pre {
+.event-details pre, .channel-details pre {
   background: #fff;
   color: #382d3d;
   padding: 10px;
@@ -88,11 +88,11 @@ pre {
   font-family: monospace; /* Schriftart für bessere Lesbarkeit von JSON */
 }
 
-.event-details pre .key {
+.event-details pre .key, .channel-details pre .key {
   color: #fe6845; /* Orange für JSON-Schlüssel/Eigenschaftsnamen */
 }
 
-.event-details pre .string, .event-details pre .number {
+.event-details pre .string, .event-details pre .number, .channel-details pre .string, .channel-details pre .number {
   color: #382d3d; /* Dunkelviolett für Werte im JSON */
 }
 

popup.html

@@ -11,6 +11,10 @@
   <a href="#" id="options-link">Settings</a>
   <div class="container">
     <p><span class="label">Account ID:</span> <span id="tp-id" class="value">No Tracking Proxy detected</span></p>
+    <p><span class="label">TP Session:</span> <span id="tp-sess-id" class="value">No Tracking Proxy detected</span></p>
+    <p>
+      <div id="channels" class="channels"></div>
+    </p>
     <p>
       <span class="label">Events:</span>
       <div id="events" class="events"></div>

popup.js

@@ -26,13 +26,28 @@ function syntaxHighlight(json) {
 // Initialize popup with Tracking Proxy Events
 document.addEventListener('DOMContentLoaded', function() {
   const tpIdElement = document.getElementById('tp-id');
+  const sessIdElement = document.getElementById('tp-sess-id');
+  const channelsElement = document.getElementById('channels');
   const eventsElement = document.getElementById('events');
 
   chrome.runtime.sendMessage({ type: 'REQUEST_POPUP_DATA' }, function(response) {
     //test(response);
     if (typeof response=='object') {
+      // TP Account ID
       const tpId = response.tpId || 'Not Available';
       tpIdElement.textContent = tpId;
+      // TP Session ID
+      const sessId = response.sessId || 'Not Available';
+      sessIdElement.textContent = sessId;
+      // Channels
+      const channels = response.channels || [];
+      channelsElement.innerHTML = `
+        <details class="channel-details">
+          <summary>Channels</summary>
+          <pre>${syntaxHighlight(JSON.stringify(channels, null, 2))}</pre>
+        </details>
+      `;
+      // Events
       const events = response.events || [];
       eventsElement.innerHTML = events.map((event, index) => `
         <details class="event-details">

worker.js

@@ -1,7 +1,7 @@
 /***** Service Worker JS for Chrome Extension: Tracking Proxy Helper *****/
 
 /*** Initialisation ***/
-let tpdm = { activeTabId: null, activeWindowId: null, extInit: false, tpl: { tpId:'', eventCount:0, events:[] } };
+let tpdm = { activeTabId: null, activeWindowId: null, extInit: false, tpl: { tpId:'', sessId:'', channels:[], eventCount:0, events:[] } };
 //tpdm.data = tpdm.data || JSON.parse(JSON.stringify(tpdm.tpl));
 tpdm.data = tpdm.data || {};
 //console.log('Worker loaded');
@@ -205,11 +205,17 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     getCurrentTabId((tabId) => {
       tpdm.activeTabId = tabId;
       //console.log('CHECK_TPT (Tab: '+tabId+'):', message);
-      if (message.hasTPT) {
+      if (message.chaChanged) {
+        tpdm.data[tabId].channels = message.tpobj.cha;
+      } else if (message.hasSessID) {
+        tpdm.data[tabId].sessId = message.tpobj.fip;
+      } else if (message.hasTPT) {
         tpdm.data.eventCount = 0;
         resetBadge(tabId);
         if (typeof tpdm.data[tabId]!='object') tpdm.data[tabId] = JSON.parse(JSON.stringify(tpdm.tpl));
         tpdm.data[tabId].tpId = message.tpobj.cid;
+        tpdm.data[tabId].sessId = message.tpobj.fip;
+        tpdm.data[tabId].channels = message.tpobj.cha;
       } else {
         clearBadge(tabId);
       }
@@ -226,10 +232,12 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
       if (typeof tpdm.data[tpdm.activeTabId]!='object') tpdm.data[tpdm.activeTabId] = JSON.parse(JSON.stringify(tpdm.tpl));
       let obj = {
         tpId: tpdm.data[tpdm.activeTabId].tpId,
+        sessId: tpdm.data[tpdm.activeTabId].sessId,
         tabId: tpdm.activeTabId,
+        channels: tpdm.data[tpdm.activeTabId].channels,
         events: tpdm.data[tpdm.activeTabId].events
       };
-      //console.log('TP Received message:'+tpdm.data[tpdm.activeTabId].tpId, obj);
+      //console.log('TP Received message:'+tpdm.data[tpdm.activeTabId].sessId, JSON.parse(JSON.stringify(tpdm.data[tpdm.activeTabId])));
       sendResponse(obj);
     //});
   } else {
@@ -296,8 +304,8 @@ chrome.webRequest.onBeforeRequest.addListener(
           return;
         }
       }
-      if (!eventData || !eventData.cid) {
-        //console.log('Payload has no cid:', details);
+      if (!eventData || !eventData.fip) {
+        //console.log('Payload has no fip:', details);
         return;
       }
       let metaData = { documentId:details.documentId, frameId:details.frameId, initiator:details.initiator, requestId:details.requestId, tabId:details.tabId, timeStamp:details.timeStamp, url:details.url };