Tracking Proxy Helper v1.0
This commit is contained in:
Andi Petzoldt
parent
53fcdc02c1
commit
97e1ab9232
10
.gitignore
vendored
Normal file
10
.gitignore
vendored
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
tmp/
|
||||||
|
desktop.ini
|
||||||
|
Thumbs.db
|
||||||
|
.DS_Store
|
||||||
|
.vscode
|
||||||
|
*.sublime-project
|
||||||
|
*.sublime-workspace
|
||||||
|
.obsidian
|
||||||
|
.idea
|
||||||
|
.trash
|
||||||
54
README.md
54
README.md
@ -1,2 +1,54 @@
|
|||||||
# tracking-proxy-helper
|
# Tracking Proxy Helper
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
The "Tracking Proxy Helper" Chrome Extension provides various functions to manage and monitor Tracking Proxy events. This extension allows setting HTTP headers, injecting JavaScript, and tracking events in real-time.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. **Download the project files** or clone the repository.
|
||||||
|
2. **Open Google Chrome** and navigate to `chrome://extensions/`.
|
||||||
|
3. **Enable Developer mode** (top right).
|
||||||
|
4. **Click on "Load unpacked"** and select the folder containing the downloaded files.
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
### Popup
|
||||||
|
|
||||||
|
The popup window displays the current status of the Tracking Proxy and lists all captured events.
|
||||||
|
|
||||||
|
- **Account ID:** Displays the current Tracking Proxy ID.
|
||||||
|
- **Events:** Shows a list of events captured by the Tracking Proxy.
|
||||||
|
|
||||||
|
### Options
|
||||||
|
|
||||||
|
Configure the extension settings through the options page.
|
||||||
|
|
||||||
|
1. **HTTP Header for Dev Environment:**
|
||||||
|
- Set the HTTP header name and value.
|
||||||
|
- Add URLs to match for applying the header, with an option to use regex.
|
||||||
|
|
||||||
|
2. **JavaScript Injection and Blocking:**
|
||||||
|
- Specify a URL for JavaScript injection and blocking.
|
||||||
|
- Enter the JavaScript content to inject.
|
||||||
|
- Options to block Google Tag Manager and Tracking Proxy code based on specified criteria.
|
||||||
|
|
||||||
|
### Scripts and Files
|
||||||
|
|
||||||
|
- **content.js:** Injects scripts into the web page and handles messaging between the extension and the web page.
|
||||||
|
- **inject-listener.js:** Listens for specific messages to manage the Tracking Proxy.
|
||||||
|
- **inject-userscript.js:** Injects user scripts into the web page.
|
||||||
|
- **popup.html:** HTML structure for the extension's popup interface.
|
||||||
|
- **popup.js:** JavaScript to handle the logic for the popup interface.
|
||||||
|
- **options.html:** HTML structure for the extension's options page.
|
||||||
|
- **options.js:** JavaScript to handle the logic for the options page.
|
||||||
|
- **worker.js:** Service worker to manage background tasks and event tracking.
|
||||||
|
- **manifest.json:** Defines the extension's metadata, permissions, and configurations.
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
Feel free to contribute by submitting issues or pull requests. For significant changes, please open an issue first to discuss what you would like to change.
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is licensed under the MIT License.
|
||||||
|
|||||||
90
content.js
Normal file
90
content.js
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
/***** Content JS for Chrome Extension: Tracking Proxy Helper *****/
|
||||||
|
|
||||||
|
/*** Initialisation ***/
|
||||||
|
let tpdm = { activeTabId: null, activeWindowId: null, extInit: false, tpl: { tpId: '', eventCount: 0 } };
|
||||||
|
tpdm.data = tpdm.data || JSON.parse(JSON.stringify(tpdm.tpl));
|
||||||
|
//console.log('content.js loaded');
|
||||||
|
|
||||||
|
/*** Logic ***/
|
||||||
|
|
||||||
|
// Function to inject javascript code into the Page DOM
|
||||||
|
// --> Accessing window object see: https://silverbirder.github.io/en-US/blog/contents/chrome_extension_development_feedback/
|
||||||
|
const injectScript = (filePath, id, tag) => {
|
||||||
|
if (!document.getElementById(id)) {
|
||||||
|
var node = document.getElementsByTagName(tag)[0];
|
||||||
|
var script = document.createElement("script");
|
||||||
|
script.setAttribute("type", "text/javascript");
|
||||||
|
script.setAttribute("src", filePath);
|
||||||
|
script.setAttribute("id", id);
|
||||||
|
node.appendChild(script);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Listener to receive messages from the injected script
|
||||||
|
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.type === 'TRACKING_PROXY_RESPONSE') {
|
||||||
|
//console.log('Message received from injected TP script:', event);
|
||||||
|
const eventData = event.data.details.eventData;
|
||||||
|
const metaData = event.data.details.metaData;
|
||||||
|
chrome.runtime.sendMessage({ type: 'TRACKING_PROXY_EVENT', details: { eventData:eventData, metaData:metaData } });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Listener for messages from the background script
|
||||||
|
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
||||||
|
if (message.type === 'TRACKING_PROXY_REQUEST') {
|
||||||
|
window.postMessage({ type: 'TRACKING_PROXY_REDIRECT', details: message.details }, '*');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Inject script on document load
|
||||||
|
if (document.readyState === 'complete' || document.readyState === 'interactive') {
|
||||||
|
injectScript(chrome.runtime.getURL("inject-listener.js"), "tp_dev_mode_script", "head");
|
||||||
|
} else {
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
injectScript(chrome.runtime.getURL("inject-listener.js"), "tp_dev_mode_script", "head");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
chrome.storage.sync.get(['scriptContent', 'scriptUrl', 'scriptUrlIsRegex'], function(data) {
|
||||||
|
const scriptContent = data.scriptContent || '';
|
||||||
|
const scriptUrl = data.scriptUrl || '';
|
||||||
|
const scriptUrlIsRegex = data.scriptUrlIsRegex || false;
|
||||||
|
|
||||||
|
if (!scriptUrl || !scriptContent) {
|
||||||
|
//console.log('No script URL or script content defined, no script injected');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let urlMatches;
|
||||||
|
if (scriptUrlIsRegex) {
|
||||||
|
const regex = new RegExp(scriptUrl);
|
||||||
|
urlMatches = regex.test(window.location.href);
|
||||||
|
} else {
|
||||||
|
urlMatches = window.location.href.includes(scriptUrl);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (urlMatches) {
|
||||||
|
if (!document.getElementById('tp_user_script')) {
|
||||||
|
//console.log(`Injecting script into URL: ${window.location.href}`);
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.src = chrome.runtime.getURL('inject-userscript.js');
|
||||||
|
script.setAttribute("id", "tp_user_script");
|
||||||
|
(document.head || document.documentElement).appendChild(script);
|
||||||
|
script.onload = function() {
|
||||||
|
window.postMessage({ type: 'INJECT_USER_SCRIPT', scriptContent: scriptContent }, '*');
|
||||||
|
script.remove();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
//console.log(`URL does not match, no script injected for URL ${window.location.href}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// EOF
|
||||||
BIN
img/icon_48.png
Normal file
BIN
img/icon_48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
110
inject-listener.js
Normal file
110
inject-listener.js
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
// inject-listener.js
|
||||||
|
//console.log('Injected listener loaded');
|
||||||
|
|
||||||
|
window.addEventListener('message', function(event) {
|
||||||
|
if (!event.data || !event.data.type || !event.data.details) return;
|
||||||
|
//console.log('TRACKING_PROXY_REQUEST message 1', event.data);
|
||||||
|
if (event.data.type === 'TRACKING_PROXY_REDIRECT') {
|
||||||
|
//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) {
|
||||||
|
//console.log('Tracking Proxy Event detected:', event);
|
||||||
|
window.postMessage({ type: 'TRACKING_PROXY_RESPONSE', details: { eventData:eventData, metaData:metaData } }, '*');
|
||||||
|
} else {
|
||||||
|
//console.log('No matching cid found in request body', details);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
|
||||||
|
// Function to post messages
|
||||||
|
function sendTPmsg(o){
|
||||||
|
window.postMessage(o, '*');
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTPDetails() {
|
||||||
|
return window.__tpt ? JSON.parse(JSON.stringify(window.__tpt)) : {};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to check for TP and send message if available
|
||||||
|
function checkTPT() {
|
||||||
|
const tpDetails = getTPDetails();
|
||||||
|
sendTPmsg({ type: 'CHECK_TPT_RESULT', hasTPT: !!tpDetails.cid, tpobj: tpDetails });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Proxy handler to detect changes
|
||||||
|
const handler = {
|
||||||
|
set(target, property, value) {
|
||||||
|
target[property] = value;
|
||||||
|
//console.log(`Property ${property} changed to`, value);
|
||||||
|
if (property === 'cid') {
|
||||||
|
checkTPT();
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
get(target, property) {
|
||||||
|
return target[property];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Wrap the __tpt object with a Proxy
|
||||||
|
if (window.__tpt) {
|
||||||
|
window.__tpt = new Proxy(window.__tpt, handler);
|
||||||
|
} else {
|
||||||
|
Object.defineProperty(window, '__tpt', {
|
||||||
|
set(value) {
|
||||||
|
if (value && typeof value === 'object') {
|
||||||
|
value = new Proxy(value, handler);
|
||||||
|
}
|
||||||
|
Object.defineProperty(this, '__tpt', { value, writable: true, configurable: true, enumerable: true });
|
||||||
|
checkTPT();
|
||||||
|
},
|
||||||
|
configurable: true,
|
||||||
|
enumerable: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function exposeTPT() {
|
||||||
|
if (!window.__tpt) {
|
||||||
|
//console.log('No __tpt object found.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
// Deep clone the object to break references
|
||||||
|
const tpDetails = JSON.parse(JSON.stringify(window.__tpt));
|
||||||
|
//console.log('Current TP details:', tpDetails);
|
||||||
|
} catch (error) {
|
||||||
|
//console.error('Error exposing __tpt details:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Expose the function to global scope for easy access from the console
|
||||||
|
window.exposeTPT = exposeTPT;
|
||||||
|
|
||||||
|
/*
|
||||||
|
(function() {
|
||||||
|
let tpid = '';
|
||||||
|
//console.log("inject.js loaded");
|
||||||
|
function checkTPT() {
|
||||||
|
if (!window.__tpt) return;
|
||||||
|
let tpobj = JSON.parse(JSON.stringify(window.__tpt));
|
||||||
|
console.log('checkTPT result:', tpobj);
|
||||||
|
if (!tpobj.cid) return;
|
||||||
|
window.postMessage({ type: 'CHECK_TPT_RESULT', tpobj:tpobj }, '*');
|
||||||
|
}
|
||||||
|
// Überprüfe sofort
|
||||||
|
checkTPT();
|
||||||
|
// 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();
|
||||||
|
observer.disconnect();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Starten des MutationObserver
|
||||||
|
if (!window.__tpt && !window.__tpt.cid) observer.observe(document.documentElement, { childList: true, subtree: true });
|
||||||
|
//console.log('injected listener executed');
|
||||||
|
})();
|
||||||
|
*/
|
||||||
15
inject-userscript.js
Normal file
15
inject-userscript.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
// inject-userscript.js
|
||||||
|
//console.log('Injected userscript executed');
|
||||||
|
|
||||||
|
window.addEventListener('message', function(event) {
|
||||||
|
if (event.source !== window || !event.data || event.data.type !== 'INJECT_USER_SCRIPT') return;
|
||||||
|
const scriptContent = event.data.scriptContent;
|
||||||
|
if (scriptContent) {
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.textContent = scriptContent;
|
||||||
|
(document.head || document.documentElement).appendChild(script);
|
||||||
|
script.onload = function () {
|
||||||
|
script.remove();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
73
manifest.json
Normal file
73
manifest.json
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
/***** Manifest for Chrome Extension: Tracking Proxy Helper *****/
|
||||||
|
|
||||||
|
// Doku Manifest: https://developer.chrome.com/docs/extensions/reference/manifest?hl=de
|
||||||
|
// Doku Extension API: https://developer.chrome.com/docs/extensions/reference/api/?hl=de
|
||||||
|
// Very helpful: https://silverbirder.github.io/en-US/blog/contents/chrome_extension_development_feedback/
|
||||||
|
// Example Extensions: https://developer.chrome.com/docs/extensions/samples?hl=de
|
||||||
|
|
||||||
|
{
|
||||||
|
"manifest_version": 3,
|
||||||
|
"name": "Tracking Proxy Helper",
|
||||||
|
"author": "andi@tracking-garden.com",
|
||||||
|
"version": "1.0",
|
||||||
|
"description": "This extension gives some information and options using the Tracking Proxy.",
|
||||||
|
"icons": {
|
||||||
|
//"16": "/img/get_started16.png",
|
||||||
|
//"32": "/img/get_started32.png",
|
||||||
|
"48": "/img/icon_48.png"
|
||||||
|
//"128": "/img/get_started128.png"
|
||||||
|
},
|
||||||
|
//"default_locale": "en_US",
|
||||||
|
"background": {
|
||||||
|
"service_worker": "worker.js"
|
||||||
|
},
|
||||||
|
//"externally_connectable": {
|
||||||
|
// "matches": ["*://*/*"]
|
||||||
|
//},
|
||||||
|
"permissions": [
|
||||||
|
"activeTab",
|
||||||
|
"declarativeNetRequest",
|
||||||
|
"declarativeNetRequestFeedback",
|
||||||
|
"declarativeNetRequestWithHostAccess",
|
||||||
|
"scripting",
|
||||||
|
"storage",
|
||||||
|
"tabs",
|
||||||
|
"webNavigation",
|
||||||
|
"webRequest",
|
||||||
|
//"webRequestBlocking",
|
||||||
|
"userScripts"
|
||||||
|
],
|
||||||
|
//"optional_permissions": ["topSites"],
|
||||||
|
//"content_security_policy": {
|
||||||
|
// "extension_pages": "default-src 'self' 'wasm-unsafe-eval'"
|
||||||
|
//}
|
||||||
|
"host_permissions": [
|
||||||
|
"*://*/*"
|
||||||
|
],
|
||||||
|
"content_scripts": [
|
||||||
|
{
|
||||||
|
"matches": ["*://*/*"],
|
||||||
|
//"matches": ["<all_urls>"],
|
||||||
|
"js": ["content.js"/*,"inject.js"*/]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"web_accessible_resources": [
|
||||||
|
{
|
||||||
|
"matches": ["*://*/*"],
|
||||||
|
"resources": ["inject-listener.js","inject-userscript.js"]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"action": {
|
||||||
|
"default_popup": "popup.html",
|
||||||
|
"default_title": "Tracking Proxy - Dev Mode",
|
||||||
|
"default_icon": {
|
||||||
|
//"16": "/img/get_started16.png",
|
||||||
|
//"32": "/img/get_started32.png",
|
||||||
|
"48": "/img/icon_48.png"
|
||||||
|
//"128": "/img/get_started128.png"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"options_page": "options.html"
|
||||||
|
}
|
||||||
|
|
||||||
|
// EOF
|
||||||
102
options.css
Normal file
102
options.css
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
/***** Options CSS for Chrome Extension: Tracking Proxy Helper *****/
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
margin: 20px;
|
||||||
|
background-color: #382d3d; /* Hintergrundfarbe der Seite */
|
||||||
|
color: white; /* Allgemeine Textfarbe */
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #fe6845; /* Farbe für H1 Überschriften */
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
color: #382d3d; /* Farbe für H2 Überschriften */
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
color: white; /* Farbe für H3 Überschriften */
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
background-color: #eeeeee; /* Hintergrundfarbe der Kästen */
|
||||||
|
border: 1px solid #000000;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #382d3d; /* Farbe der Labels */
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff; /* Hintergrund der Eingabefelder */
|
||||||
|
color: #000; /* Textfarbe in Eingabefeldern */
|
||||||
|
border: 1px solid #ccc; /* Rahmen der Eingabefelder */
|
||||||
|
}
|
||||||
|
|
||||||
|
.url-field {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.url-input {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.regex-checkbox {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-checkbox {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 10px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 10px 15px;
|
||||||
|
background-color: #fe6845;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.remove-url-field {
|
||||||
|
background-color: #382d3d;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button#add-url-field {
|
||||||
|
background-color: #382d3d;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.url-match-label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-top: 15px;
|
||||||
|
color: #382d3d; /* Farbe für URL Match Labels */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* EOF */
|
||||||
82
options.html
Normal file
82
options.html
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
<!----- Options HTML for Chrome Extension: Tracking Proxy Helper ----->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Tracking Proxy Helper - Extension Options</title>
|
||||||
|
<link rel="stylesheet" href="options.css">
|
||||||
|
</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">
|
||||||
|
<label for="script-url">URL for JavaScript Injection and Blocking:</label>
|
||||||
|
<div class="url-field">
|
||||||
|
<input type="text" id="script-url" name="script-url">
|
||||||
|
<label class="inline-checkbox">
|
||||||
|
<input type="checkbox" id="script-url-regex"> Is Regex
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="script-content">JavaScript to Inject:</label>
|
||||||
|
<textarea id="script-content" name="script-content" rows="4"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="block-gtm"> Block Google Tag Manager
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="gtm-container-id">Google Tag Manager Container ID:</label>
|
||||||
|
<div class="url-field">
|
||||||
|
<input type="text" id="gtm-container-id" name="gtm-container-id">
|
||||||
|
<label class="inline-checkbox">
|
||||||
|
<input type="checkbox" id="gtm-container-id-regex"> Is Regex
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="block-tracking-proxy"> Block Tracking Proxy Code
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="tracking-proxy-url">URL for Tracking Proxy:</label>
|
||||||
|
<div class="url-field">
|
||||||
|
<input type="text" id="tracking-proxy-url" name="tracking-proxy-url">
|
||||||
|
<label class="inline-checkbox">
|
||||||
|
<input type="checkbox" id="tracking-proxy-url-regex"> Is Regex
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="submit">Save</button>
|
||||||
|
</form>
|
||||||
|
<h3>Saved Values</h3>
|
||||||
|
<pre id="saved-values"></pre>
|
||||||
|
<script src="options.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
151
options.js
Normal file
151
options.js
Normal file
@ -0,0 +1,151 @@
|
|||||||
|
/***** Options JS for Chrome Extension: Tracking Proxy Helper *****/
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
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');
|
||||||
|
|
||||||
|
// Add event listener for adding URL fields
|
||||||
|
addUrlButton.addEventListener('click', function () {
|
||||||
|
const urlField = createUrlField();
|
||||||
|
urlFieldsContainer.appendChild(urlField);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Load saved options
|
||||||
|
loadOptions();
|
||||||
|
|
||||||
|
// Save options on form submit
|
||||||
|
form.addEventListener('submit', function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
saveOptions();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a new URL field element
|
||||||
|
* @returns {HTMLDivElement} The created URL field element
|
||||||
|
*/
|
||||||
|
function createUrlField() {
|
||||||
|
const urlField = document.createElement('div');
|
||||||
|
urlField.className = 'url-field';
|
||||||
|
urlField.innerHTML = `
|
||||||
|
<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>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Add event listener for removing URL fields
|
||||||
|
urlField.querySelector('.remove-url-field').addEventListener('click', function () {
|
||||||
|
urlField.remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
return urlField;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save options to chrome.storage.sync
|
||||||
|
*/
|
||||||
|
function saveOptions() {
|
||||||
|
const headerValue = document.getElementById('header-value').value;
|
||||||
|
const urlFields = document.querySelectorAll('#httpheader .url-field'); // Only URL fields
|
||||||
|
const urls = Array.from(urlFields).map(urlField => {
|
||||||
|
const urlInput = urlField.querySelector('.url-input');
|
||||||
|
const regexCheckbox = urlField.querySelector('.regex-checkbox');
|
||||||
|
|
||||||
|
// Ensure that the inputs exist
|
||||||
|
if (!urlInput || !regexCheckbox) {
|
||||||
|
console.error('Invalid URL field:', urlField);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
url: urlInput.value,
|
||||||
|
isRegex: regexCheckbox.checked
|
||||||
|
};
|
||||||
|
}).filter(urlObj => urlObj !== null); // Remove null entries
|
||||||
|
|
||||||
|
const scriptContent = document.getElementById('script-content').value;
|
||||||
|
const scriptUrl = document.getElementById('script-url').value;
|
||||||
|
const scriptUrlIsRegex = document.getElementById('script-url-regex').checked;
|
||||||
|
const blockGtm = document.getElementById('block-gtm').checked;
|
||||||
|
const gtmContainerId = document.getElementById('gtm-container-id').value;
|
||||||
|
const gtmContainerIdIsRegex = document.getElementById('gtm-container-id-regex').checked;
|
||||||
|
const trackingProxyUrl = document.getElementById('tracking-proxy-url').value;
|
||||||
|
const trackingProxyUrlIsRegex = document.getElementById('tracking-proxy-url-regex').checked;
|
||||||
|
const blockTrackingProxy = document.getElementById('block-tracking-proxy').checked;
|
||||||
|
|
||||||
|
chrome.storage.sync.set({
|
||||||
|
headerValue,
|
||||||
|
urls,
|
||||||
|
scriptContent,
|
||||||
|
scriptUrl,
|
||||||
|
scriptUrlIsRegex,
|
||||||
|
blockGtm,
|
||||||
|
gtmContainerId,
|
||||||
|
gtmContainerIdIsRegex,
|
||||||
|
trackingProxyUrl,
|
||||||
|
trackingProxyUrlIsRegex,
|
||||||
|
blockTrackingProxy
|
||||||
|
}, function () {
|
||||||
|
alert('Options saved!');
|
||||||
|
displaySavedValues(); // Update displayed saved values
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load options from chrome.storage.sync
|
||||||
|
*/
|
||||||
|
function loadOptions() {
|
||||||
|
chrome.storage.sync.get([
|
||||||
|
'headerValue',
|
||||||
|
'urls',
|
||||||
|
'scriptContent',
|
||||||
|
'scriptUrl',
|
||||||
|
'scriptUrlIsRegex',
|
||||||
|
'blockGtm',
|
||||||
|
'gtmContainerId',
|
||||||
|
'gtmContainerIdIsRegex',
|
||||||
|
'trackingProxyUrl',
|
||||||
|
'trackingProxyUrlIsRegex',
|
||||||
|
'blockTrackingProxy'
|
||||||
|
], function (data) {
|
||||||
|
document.getElementById('header-value').value = data.headerValue || '';
|
||||||
|
|
||||||
|
const urlFieldsContainer = document.getElementById('url-fields-container');
|
||||||
|
urlFieldsContainer.innerHTML = '';
|
||||||
|
|
||||||
|
(data.urls || []).forEach(urlObj => {
|
||||||
|
const urlField = createUrlField();
|
||||||
|
urlField.querySelector('.url-input').value = urlObj.url;
|
||||||
|
urlField.querySelector('.regex-checkbox').checked = urlObj.isRegex;
|
||||||
|
urlFieldsContainer.appendChild(urlField);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('script-content').value = data.scriptContent || '';
|
||||||
|
document.getElementById('script-url').value = data.scriptUrl || '';
|
||||||
|
document.getElementById('script-url-regex').checked = data.scriptUrlIsRegex || false;
|
||||||
|
document.getElementById('block-gtm').checked = data.blockGtm || false;
|
||||||
|
document.getElementById('gtm-container-id').value = data.gtmContainerId || '';
|
||||||
|
document.getElementById('gtm-container-id-regex').checked = data.gtmContainerIdIsRegex || false;
|
||||||
|
document.getElementById('tracking-proxy-url').value = data.trackingProxyUrl || '';
|
||||||
|
document.getElementById('tracking-proxy-url-regex').checked = data.trackingProxyUrlIsRegex || false;
|
||||||
|
document.getElementById('block-tracking-proxy').checked = data.blockTrackingProxy || false;
|
||||||
|
|
||||||
|
displaySavedValues(); // Display saved values on load
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Display saved values in a <pre> element
|
||||||
|
*/
|
||||||
|
function displaySavedValues() {
|
||||||
|
chrome.storage.sync.get(null, function(items) {
|
||||||
|
const savedValuesContainer = document.getElementById('saved-values');
|
||||||
|
savedValuesContainer.textContent = JSON.stringify(items, null, 2);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// EOF
|
||||||
114
popup.css
Normal file
114
popup.css
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background-color: #382d3d;
|
||||||
|
color: #ffffff;
|
||||||
|
margin: 0;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stil für den Event-Kasten */
|
||||||
|
details {
|
||||||
|
background-color: #eeeeee; /* Helles Grau für den zusammengeklappten Zustand */
|
||||||
|
margin-bottom: 5px; /* Abstand zwischen den Event-Kästen */
|
||||||
|
border-radius: 5px; /* Abgerundete Ecken */
|
||||||
|
padding: 5px; /* Innenabstand innerhalb des details Elements */
|
||||||
|
border: 1px solid #ccc; /* Leichter Rahmen um das Element */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stil für den aufklappbaren Teil des Event-Kastens */
|
||||||
|
summary {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #382d3d; /* Dunkle Schrift für den Event-Titel */
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background-color: #ffffff; /* Weißer Hintergrund für JSON-Inhalte */
|
||||||
|
color: #382d3d; /* Dunkle Schriftfarbe für JSON-Inhalte */
|
||||||
|
border: none; /* Entfernt jeglichen Rahmen */
|
||||||
|
overflow-x: auto; /* Ermöglicht horizontales Scrollen bei langen Zeilen */
|
||||||
|
white-space: pre-wrap; /* Ermöglicht den Zeilenumbruch bei Bedarf */
|
||||||
|
padding: 5px; /* Innenabstand für bessere Lesbarkeit */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Farben und Stil für die Eigenschaftsnamen innerhalb des JSON-Objekts */
|
||||||
|
.json-property-name {
|
||||||
|
color: #fe6845; /* Farbe für die Eigenschaftsnamen */
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stil für die Werte innerhalb des JSON-Objekts, wenn benötigt */
|
||||||
|
.json-property-value {
|
||||||
|
color: #382d3d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: auto;
|
||||||
|
background: #382d3d;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fe6845;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-details {
|
||||||
|
color: #382d3d;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-details summary {
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #382d3d; /* Dunkelviolett für Event-Namen */
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-details pre {
|
||||||
|
background: #fff;
|
||||||
|
color: #382d3d;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 200px;
|
||||||
|
font-family: monospace; /* Schriftart für bessere Lesbarkeit von JSON */
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-details pre .key {
|
||||||
|
color: #fe6845; /* Orange für JSON-Schlüssel/Eigenschaftsnamen */
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-details pre .string, .event-details pre .number {
|
||||||
|
color: #382d3d; /* Dunkelviolett für Werte im JSON */
|
||||||
|
}
|
||||||
|
|
||||||
|
#options-link {
|
||||||
|
position: absolute; /* Absolut positioniert, relativ zum nächstgelegenen positionierten Vorfahren */
|
||||||
|
top: 5px; /* Abstand von oben */
|
||||||
|
right: 5px; /* Abstand von rechts */
|
||||||
|
color: #ccc7aa; /* Linkfarbe */
|
||||||
|
padding: 5px 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: normal; /* Entfernt fettgedrucktes Styling */
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#options-link:hover {
|
||||||
|
background-color: #fe6845;
|
||||||
|
color: #382d3d;
|
||||||
|
}
|
||||||
20
popup.html
Normal file
20
popup.html
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Tracking Proxy Helper</title>
|
||||||
|
<link rel="stylesheet" href="popup.css">
|
||||||
|
<script src="popup.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<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">Events:</span>
|
||||||
|
<div id="events" class="events"></div>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
55
popup.js
Normal file
55
popup.js
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
/***** Popup JS for Chrome Extension: Tracking Proxy Helper *****/
|
||||||
|
|
||||||
|
//function test(o){
|
||||||
|
// chrome.runtime.sendMessage({ type: 'REQUEST_POPUP_DATA2',details:typeof o=='object'?JSON.parse(JSON.stringify(o)):null,test:123 });
|
||||||
|
//}
|
||||||
|
|
||||||
|
function syntaxHighlight(json) {
|
||||||
|
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||||
|
return json.replace(/("(\\u[\dA-F]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
|
||||||
|
let cls = 'number';
|
||||||
|
if (/^"/.test(match)) {
|
||||||
|
if (/:$/.test(match)) {
|
||||||
|
cls = 'key'; // Anwenden der CSS-Klasse 'key' auf JSON Schlüssel
|
||||||
|
} else {
|
||||||
|
cls = 'string';
|
||||||
|
}
|
||||||
|
} else if (/true|false/.test(match)) {
|
||||||
|
cls = 'boolean';
|
||||||
|
} else if (/null/.test(match)) {
|
||||||
|
cls = 'null';
|
||||||
|
}
|
||||||
|
return '<span class="' + cls + '">' + match + '</span>';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize popup with Tracking Proxy Events
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const tpIdElement = document.getElementById('tp-id');
|
||||||
|
const eventsElement = document.getElementById('events');
|
||||||
|
|
||||||
|
chrome.runtime.sendMessage({ type: 'REQUEST_POPUP_DATA' }, function(response) {
|
||||||
|
//test(response);
|
||||||
|
if (typeof response=='object') {
|
||||||
|
const tpId = response.tpId || 'Not Available';
|
||||||
|
tpIdElement.textContent = tpId;
|
||||||
|
const events = response.events || [];
|
||||||
|
eventsElement.innerHTML = events.map((event, index) => `
|
||||||
|
<details class="event-details">
|
||||||
|
<summary>${event.event}</summary>
|
||||||
|
<pre>${syntaxHighlight(JSON.stringify(event, null, 2))}</pre>
|
||||||
|
</details>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('options-link').addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
// Öffnet die Options-Seite
|
||||||
|
if (chrome.runtime.openOptionsPage) {
|
||||||
|
chrome.runtime.openOptionsPage();
|
||||||
|
} else {
|
||||||
|
window.open(chrome.runtime.getURL('options.html'));
|
||||||
|
}
|
||||||
|
});
|
||||||
323
worker.js
Normal file
323
worker.js
Normal file
@ -0,0 +1,323 @@
|
|||||||
|
/***** Service Worker JS for Chrome Extension: Tracking Proxy Helper *****/
|
||||||
|
|
||||||
|
/*** Initialisation ***/
|
||||||
|
let tpdm = { activeTabId: null, activeWindowId: null, extInit: false, tpl: { tpId:'', eventCount:0, events:[] } };
|
||||||
|
//tpdm.data = tpdm.data || JSON.parse(JSON.stringify(tpdm.tpl));
|
||||||
|
tpdm.data = tpdm.data || {};
|
||||||
|
//console.log('Worker loaded');
|
||||||
|
|
||||||
|
/*** Helper Function Library ***/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function to Update the Badge Text
|
||||||
|
*/
|
||||||
|
function updateBadge(text, tabId) {
|
||||||
|
chrome.action.setBadgeBackgroundColor({ color: '#fe6845', tabId: tabId });
|
||||||
|
chrome.action.setBadgeTextColor({ color: '#ffffff', tabId: tabId });
|
||||||
|
chrome.action.setBadgeText({ text: text.toString(), tabId: tabId });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function to Clear the Badge
|
||||||
|
*/
|
||||||
|
function clearBadge(tabId) {
|
||||||
|
chrome.action.setBadgeText({ text: '', tabId: tabId });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function to Reset the Badge Text
|
||||||
|
*/
|
||||||
|
function resetBadge(tabId) {
|
||||||
|
if (typeof tpdm.data[tabId]!='object') tpdm.data[tabId] = JSON.parse(JSON.stringify(tpdm.tpl));
|
||||||
|
tpdm.data[tabId] = JSON.parse(JSON.stringify(tpdm.tpl));
|
||||||
|
clearBadge(tabId);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function to Increment Badge Counter
|
||||||
|
*/
|
||||||
|
function incrementBadge(tabId) {
|
||||||
|
if (typeof tpdm.data[tabId]!='object') tpdm.data[tabId] = JSON.parse(JSON.stringify(tpdm.tpl));
|
||||||
|
tpdm.data[tabId].eventCount += 1;
|
||||||
|
updateBadge(tpdm.data[tabId].eventCount, tabId);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function to get the current active tab ID
|
||||||
|
*/
|
||||||
|
function getCurrentTabId(callback) {
|
||||||
|
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
|
||||||
|
if (tabs.length > 0) {
|
||||||
|
callback(tabs[0].id);
|
||||||
|
} else {
|
||||||
|
//console.error('No active tab found');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load options from storage and set declarativeNetRequest rules
|
||||||
|
*/
|
||||||
|
function loadOptionsAndSetRules() {
|
||||||
|
console.log('Tracking Proxy Helper installed');
|
||||||
|
chrome.storage.sync.get([
|
||||||
|
'headerValue', 'urls', 'blockGtm', 'gtmContainerId', 'gtmContainerIdIsRegex',
|
||||||
|
'trackingProxyUrl', 'trackingProxyUrlIsRegex', 'blockTrackingProxy', 'scriptUrl', 'scriptUrlIsRegex'
|
||||||
|
], function(data) {
|
||||||
|
const headerValue = data.headerValue || '';
|
||||||
|
const urls = data.urls || [];
|
||||||
|
const blockGtm = data.blockGtm || false;
|
||||||
|
const gtmContainerId = data.gtmContainerId || '';
|
||||||
|
const gtmContainerIdIsRegex = data.gtmContainerIdIsRegex || false;
|
||||||
|
const trackingProxyUrl = data.trackingProxyUrl || '';
|
||||||
|
const trackingProxyUrlIsRegex = data.trackingProxyUrlIsRegex || false;
|
||||||
|
const blockTrackingProxy = data.blockTrackingProxy || false;
|
||||||
|
const scriptUrl = data.scriptUrl || '';
|
||||||
|
const scriptUrlIsRegex = data.scriptUrlIsRegex || false;
|
||||||
|
|
||||||
|
// If no header value or no URLs are defined, do not set any rules
|
||||||
|
if (!headerValue || urls.length === 0) {
|
||||||
|
//console.log('No header value or URLs defined, no rules set');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create conditions based on the URLs and regex
|
||||||
|
const conditions = urls
|
||||||
|
.filter(urlObj => urlObj.url) // Filter out empty URLs
|
||||||
|
.map((urlObj, index) => {
|
||||||
|
const condition = {
|
||||||
|
id: index + 1,
|
||||||
|
priority: 1,
|
||||||
|
action: {
|
||||||
|
type: "modifyHeaders",
|
||||||
|
requestHeaders: [
|
||||||
|
{ header: "Tp-Dev", operation: "set", value: headerValue }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
condition: {
|
||||||
|
regexFilter: urlObj.isRegex ? urlObj.url : `^${urlObj.url}$`,
|
||||||
|
isUrlFilterCaseSensitive: false,
|
||||||
|
//resourceTypes: ["main_frame", "sub_frame", "xmlhttprequest"]
|
||||||
|
resourceTypes: ["main_frame", "sub_frame", "stylesheet", "script", "image", "font", "object", "xmlhttprequest", "ping", "csp_report", "media", "websocket", "other"]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
console.log('Condition created:', condition);
|
||||||
|
return condition;
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules = conditions.map((condition, index) => ({
|
||||||
|
...condition,
|
||||||
|
id: index + 1
|
||||||
|
}));
|
||||||
|
|
||||||
|
const scriptUrlMatches = (url) => {
|
||||||
|
if (!scriptUrl) return false;
|
||||||
|
if (scriptUrlIsRegex) {
|
||||||
|
const regex = new RegExp(scriptUrl);
|
||||||
|
return regex.test(url);
|
||||||
|
}
|
||||||
|
return url.includes(scriptUrl);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add GTM blocking rule if blockGtm is enabled and scriptUrl matches
|
||||||
|
if (blockGtm && gtmContainerId && scriptUrlMatches(scriptUrl)) {
|
||||||
|
const gtmUrl = gtmContainerIdIsRegex ? gtmContainerId : `https://www.googletagmanager.com/gtm.js?id=${gtmContainerId}`;
|
||||||
|
rules.push({
|
||||||
|
id: rules.length + 1,
|
||||||
|
priority: 1,
|
||||||
|
action: {
|
||||||
|
type: "block"
|
||||||
|
},
|
||||||
|
condition: {
|
||||||
|
regexFilter: gtmContainerIdIsRegex ? gtmUrl : `https://www.googletagmanager.com/gtm.js\\?id=${gtmContainerId}`,
|
||||||
|
resourceTypes: ["script"]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log('Google Tag Manager blocked');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add Tracking Proxy blocking rule if blockTrackingProxy is enabled and scriptUrl matches
|
||||||
|
if (blockTrackingProxy && trackingProxyUrl && scriptUrlMatches(scriptUrl)) {
|
||||||
|
const proxyUrl = trackingProxyUrlIsRegex ? trackingProxyUrl : `^${trackingProxyUrl}$`;
|
||||||
|
rules.push({
|
||||||
|
id: rules.length + 2,
|
||||||
|
priority: 1,
|
||||||
|
action: {
|
||||||
|
type: "block"
|
||||||
|
},
|
||||||
|
condition: {
|
||||||
|
regexFilter: proxyUrl,
|
||||||
|
resourceTypes: ["script", "xmlhttprequest"]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log('Tracking Proxy blocked');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (rules.length === 0) {
|
||||||
|
//console.log('No valid URLs to match, no rules set');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update the rules
|
||||||
|
chrome.declarativeNetRequest.updateDynamicRules({
|
||||||
|
addRules: rules,
|
||||||
|
removeRuleIds: rules.map(rule => rule.id)
|
||||||
|
}, () => {
|
||||||
|
if (chrome.runtime.lastError) {
|
||||||
|
console.error('Error setting declarativeNetRequest rules:', chrome.runtime.lastError);
|
||||||
|
} else {
|
||||||
|
console.log('DeclarativeNetRequest rules set up successfully');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** Chrome Extension Function Library ***/
|
||||||
|
|
||||||
|
// Function to Initialise the Badge and add Request Header
|
||||||
|
chrome.runtime.onInstalled.addListener(() => {
|
||||||
|
// Clear badge on installation
|
||||||
|
clearBadge();
|
||||||
|
// Load options and set dynamic rules
|
||||||
|
loadOptionsAndSetRules();
|
||||||
|
});
|
||||||
|
|
||||||
|
chrome.storage.onChanged.addListener((changes, namespace) => {
|
||||||
|
if (namespace === 'sync') {
|
||||||
|
console.log('Options changed, updating rules');
|
||||||
|
loadOptionsAndSetRules();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Listener for Extension Icon Clicks
|
||||||
|
chrome.action.onClicked.addListener((tab) => {
|
||||||
|
//console.log('Action button clicked', tab);
|
||||||
|
let tabId = tab.id;
|
||||||
|
let windowId = tab.windowId;
|
||||||
|
chrome.tabs.create({ url: 'popup.html' });
|
||||||
|
});
|
||||||
|
|
||||||
|
// Listener for internal messages
|
||||||
|
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
||||||
|
//console.log('TP Received message:', message);
|
||||||
|
if (message.type === 'CHECK_TPT') {
|
||||||
|
getCurrentTabId((tabId) => {
|
||||||
|
tpdm.activeTabId = tabId;
|
||||||
|
//console.log('CHECK_TPT (Tab: '+tabId+'):', message);
|
||||||
|
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;
|
||||||
|
} else {
|
||||||
|
clearBadge(tabId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (message.type === 'TRACKING_PROXY_EVENT' && message.details) {
|
||||||
|
const eventData = message.details.eventData;
|
||||||
|
const metaData = message.details.metaData;
|
||||||
|
//console.log('TRACKING_PROXY_EVENT',message);
|
||||||
|
incrementBadge(metaData.tabId);
|
||||||
|
if (typeof tpdm.data[metaData.tabId]!='object') tpdm.data[metaData.tabId] = JSON.parse(JSON.stringify(tpdm.tpl));
|
||||||
|
tpdm.data[metaData.tabId].events.push(JSON.parse(JSON.stringify(eventData)));
|
||||||
|
} else if (message.type === 'REQUEST_POPUP_DATA') {
|
||||||
|
//getCurrentTabId((tabId) => {
|
||||||
|
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,
|
||||||
|
tabId: tpdm.activeTabId,
|
||||||
|
events: tpdm.data[tpdm.activeTabId].events
|
||||||
|
};
|
||||||
|
//console.log('TP Received message:'+tpdm.data[tpdm.activeTabId].tpId, obj);
|
||||||
|
sendResponse(obj);
|
||||||
|
//});
|
||||||
|
} else {
|
||||||
|
//console.log('Unknown message type:', message.type);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Listeners for Tab-Change
|
||||||
|
chrome.tabs.onActivated.addListener(function(tab) {
|
||||||
|
//console.log('TAB ACTIVATED', tab);
|
||||||
|
tpdm.activeTabId = tab.tabId;
|
||||||
|
tpdm.activeWindowId = tab.windowId;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Listeners for Tab-Update
|
||||||
|
chrome.tabs.onUpdated.addListener(function(activeInfo, changeInfo, tab) {
|
||||||
|
let tabId = tab.id;
|
||||||
|
let windowId = tab.windowId;
|
||||||
|
if (typeof changeInfo == 'object' && typeof changeInfo.status == 'string') {
|
||||||
|
if (changeInfo.status == 'complete') {
|
||||||
|
//console.log('TAB Load complete: ' + tab.url, tab);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
chrome.runtime.onStartup.addListener(function() {
|
||||||
|
// Initialisiert alle Tabs beim Start der Erweiterung
|
||||||
|
chrome.tabs.query({}, function(tabs) {
|
||||||
|
tabs.forEach(tab => {
|
||||||
|
resetBadge(tab.id);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
chrome.webNavigation.onBeforeNavigate.addListener(function(details) {
|
||||||
|
if (details.frameId === 0) { // Haupt-Frame der Navigation
|
||||||
|
//console.log('Navigation started for Tab:', details.tabId);
|
||||||
|
resetBadge(details.tabId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Intercepting network requests to detect Tracking Proxy Events
|
||||||
|
chrome.webRequest.onBeforeRequest.addListener(
|
||||||
|
function(details) {
|
||||||
|
if (details.method === "POST" && details.type === "xmlhttprequest" && details.tabId >= 0) {
|
||||||
|
let eventData = {};
|
||||||
|
if (details.requestBody) {
|
||||||
|
if (details.requestBody.formData) {
|
||||||
|
eventData = JSON.parse(JSON.stringify(details.requestBody.formData));
|
||||||
|
//console.log('TRACKING_PROXY_REQUEST 1', eventData);
|
||||||
|
} else if (details.requestBody.raw && details.requestBody.raw.length > 0 && details.requestBody.raw[0].bytes) {
|
||||||
|
//console.warn('TRACKING_PROXY_REQUEST 0', details);
|
||||||
|
try {
|
||||||
|
const decodedString = decodeURIComponent(String.fromCharCode.apply(null, new Uint8Array(details.requestBody.raw[0].bytes)));
|
||||||
|
if (decodedString.charAt(0) === '{') {
|
||||||
|
eventData = JSON.parse(decodedString);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
//console.error('Failed to parse request body as JSON:', e);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
//console.log('Payload is no JSON object:', details);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!eventData || !eventData.cid) {
|
||||||
|
//console.log('Payload has no cid:', 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 };
|
||||||
|
//console.log('TRACKING_PROXY_REQUEST available', eventData);
|
||||||
|
chrome.tabs.query({ /*active: true, currentWindow: true*/ }, function(tabs) {
|
||||||
|
if (tabs.length > 0) {
|
||||||
|
//console.log('TRACKING_PROXY_REQUEST available', { eventData:eventData, metaData:metaData });
|
||||||
|
chrome.tabs.sendMessage(details.tabId, { type: 'TRACKING_PROXY_REQUEST', details:{eventData:eventData, metaData:metaData} }, (response) => {
|
||||||
|
if (chrome.runtime.lastError) {
|
||||||
|
//console.error('Error sending message to content script: '+chrome.runtime.lastError, { eventData:eventData, metaData:metaData });
|
||||||
|
}
|
||||||
|
//else { console.log('TRACKING_PROXY_REQUEST sent', { eventData:eventData, metaData:metaData }); }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ urls: ["<all_urls>"] },
|
||||||
|
["requestBody"] // "blocking","requestBody","responseHeaders" | see: https://stackoverflow.com/questions/33106709/chrome-webrequest-doesnt-see-post-data-in-requestbody
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
// EOF
|
||||||
Loading…
Reference in New Issue
Block a user