From 8fcad035fac053a473b3c42d7e7884cfea8f3bd9 Mon Sep 17 00:00:00 2001 From: TristanEDU Date: Mon, 2 Jun 2025 17:27:51 -0700 Subject: [PATCH 1/4] feat(overlayUnlock): add Unlock Overlay toggle button for iframe interaction - Introduced a new control panel button to toggle iframe pointer events - Allows user to unlock overlay for manual interaction with live site content - Temporarily disables interaction with the underlying dev site while unlocked - Useful for tasks like opening dropdowns or inspecting cross-origin overlays - Toggle seamlessly restores locked state with single click --- content.js | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/content.js b/content.js index 6ce7bc2..c8bcddb 100644 --- a/content.js +++ b/content.js @@ -92,6 +92,20 @@ if (!document.getElementById("overlay-iframe")) { }; scrollLabel.appendChild(scrollCheckbox); + // Overlay Unlock + const unlockButton = document.createElement("button"); + unlockButton.textContent = "🔓 Unlock Overlay"; + unlockButton.style.marginTop = "8px"; + unlockButton.style.padding = "6px"; + unlockButton.style.cursor = "pointer"; + unlockButton.style.background = "#444"; + unlockButton.style.color = "white"; + unlockButton.style.border = "1px solid #666"; + unlockButton.style.borderRadius = "4px"; + unlockButton.style.width = "100%"; + unlockButton.id = "unlock-overlay-button"; + panel.appendChild(unlockButton); + // Assemble controls controls.appendChild(scrollLabel); controls.appendChild(document.createElement("br")); @@ -133,3 +147,26 @@ if (!document.getElementById("overlay-iframe")) { isDragging = false; }); } + +let overlayUnlocked = false; + +unlockButton.addEventListener("click", () => { + const iframe = document.getElementById("overlay-iframe"); + if (!iframe) return; + + overlayUnlocked = !overlayUnlocked; + + if (overlayUnlocked) { + // Unlock: enable interaction with overlay, disable site below + iframe.style.pointerEvents = "auto"; + document.body.style.pointerEvents = "none"; + document.documentElement.style.pointerEvents = "none"; + unlockButton.textContent = "🔒 Lock Overlay"; + } else { + // Lock again: disable interaction with overlay, re-enable site + iframe.style.pointerEvents = "none"; + document.body.style.pointerEvents = "auto"; + document.documentElement.style.pointerEvents = "auto"; + unlockButton.textContent = "🔓 Unlock Overlay"; + } +}); From b96966dbbf6239efeeafe2fcd4c3fe784ddc51cc Mon Sep 17 00:00:00 2001 From: TristanEDU Date: Mon, 2 Jun 2025 17:35:46 -0700 Subject: [PATCH 2/4] fix(overlayUnlock): resolve variable scope and panel reference for unlock toggle - Corrected undefined reference to 'panel' (should be 'controls') - Scoped overlayUnlocked as window property to avoid redeclaration errors - Verified toggle logic properly disables/enables overlay and background interaction - Finalizes implementation of Unlock Overlay button in control panel --- content.js | 48 +++++++++++++++++++++++------------------------- 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/content.js b/content.js index c8bcddb..e448eb9 100644 --- a/content.js +++ b/content.js @@ -92,7 +92,7 @@ if (!document.getElementById("overlay-iframe")) { }; scrollLabel.appendChild(scrollCheckbox); - // Overlay Unlock + // Overlay Unlock toggle const unlockButton = document.createElement("button"); unlockButton.textContent = "🔓 Unlock Overlay"; unlockButton.style.marginTop = "8px"; @@ -104,7 +104,7 @@ if (!document.getElementById("overlay-iframe")) { unlockButton.style.borderRadius = "4px"; unlockButton.style.width = "100%"; unlockButton.id = "unlock-overlay-button"; - panel.appendChild(unlockButton); + controls.appendChild(unlockButton); // Assemble controls controls.appendChild(scrollLabel); @@ -146,27 +146,25 @@ if (!document.getElementById("overlay-iframe")) { document.addEventListener("mouseup", () => { isDragging = false; }); + + // Unlock toggle logic + window.overlayUnlocked = false; + + unlockButton.addEventListener("click", () => { + if (!iframe) return; + + window.overlayUnlocked = !window.overlayUnlocked; + + if (window.overlayUnlocked) { + iframe.style.pointerEvents = "auto"; + document.body.style.pointerEvents = "none"; + document.documentElement.style.pointerEvents = "none"; + unlockButton.textContent = "🔒 Lock Overlay"; + } else { + iframe.style.pointerEvents = "none"; + document.body.style.pointerEvents = "auto"; + document.documentElement.style.pointerEvents = "auto"; + unlockButton.textContent = "🔓 Unlock Overlay"; + } + }); } - -let overlayUnlocked = false; - -unlockButton.addEventListener("click", () => { - const iframe = document.getElementById("overlay-iframe"); - if (!iframe) return; - - overlayUnlocked = !overlayUnlocked; - - if (overlayUnlocked) { - // Unlock: enable interaction with overlay, disable site below - iframe.style.pointerEvents = "auto"; - document.body.style.pointerEvents = "none"; - document.documentElement.style.pointerEvents = "none"; - unlockButton.textContent = "🔒 Lock Overlay"; - } else { - // Lock again: disable interaction with overlay, re-enable site - iframe.style.pointerEvents = "none"; - document.body.style.pointerEvents = "auto"; - document.documentElement.style.pointerEvents = "auto"; - unlockButton.textContent = "🔓 Unlock Overlay"; - } -}); From d294f5a70d0a57db71f27602c1c0b3ec5450e675 Mon Sep 17 00:00:00 2001 From: TristanEDU Date: Mon, 2 Jun 2025 17:44:34 -0700 Subject: [PATCH 3/4] fix(overlayUnlock): enable iframe scrolling and maintain control panel access - Made iframe scrollable when unlocked for live content interaction - Ensured control panel remains interactive during unlocked mode - Updated pointerEvents and scrolling attributes accordingly - Raised z-index to prevent panel from being obscured by overlay --- content.js | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/content.js b/content.js index e448eb9..7de65c0 100644 --- a/content.js +++ b/content.js @@ -1,7 +1,6 @@ console.log("LiveOverlayExtension: content script loaded"); if (!document.getElementById("overlay-iframe")) { - // Create overlay iframe const iframe = document.createElement("iframe"); iframe.src = "https://hiousastg.wpengine.com"; iframe.id = "overlay-iframe"; @@ -18,12 +17,11 @@ if (!document.getElementById("overlay-iframe")) { iframe.style.overflow = "hidden"; iframe.setAttribute("scrolling", "no"); - // Create control panel const controls = document.createElement("div"); controls.style.position = "fixed"; controls.style.top = "10px"; controls.style.right = "10px"; - controls.style.zIndex = "10000"; + controls.style.zIndex = "10001"; controls.style.background = "rgba(255, 255, 255, 0.95)"; controls.style.padding = "10px"; controls.style.border = "1px solid #ccc"; @@ -31,8 +29,8 @@ if (!document.getElementById("overlay-iframe")) { controls.style.fontSize = "12px"; controls.style.fontFamily = "sans-serif"; controls.style.userSelect = "none"; + controls.style.pointerEvents = "auto"; // always allow control panel to be clickable - // Create drag handle const dragHandle = document.createElement("div"); dragHandle.textContent = "Overlay Controls"; dragHandle.style.fontWeight = "bold"; @@ -41,7 +39,6 @@ if (!document.getElementById("overlay-iframe")) { dragHandle.style.userSelect = "none"; controls.appendChild(dragHandle); - // Opacity slider const sliderLabel = document.createElement("label"); sliderLabel.textContent = "Opacity: "; const slider = document.createElement("input"); @@ -54,7 +51,6 @@ if (!document.getElementById("overlay-iframe")) { iframe.style.opacity = e.target.value / 100; }; - // URL input const urlLabel = document.createElement("label"); urlLabel.textContent = "Overlay URL: "; urlLabel.style.display = "block"; @@ -67,7 +63,6 @@ if (!document.getElementById("overlay-iframe")) { iframe.src = urlInput.value; }; - // Invert toggle const invertLabel = document.createElement("label"); invertLabel.textContent = " Invert Colors"; const invertCheckbox = document.createElement("input"); @@ -78,7 +73,6 @@ if (!document.getElementById("overlay-iframe")) { }; invertLabel.appendChild(invertCheckbox); - // Scroll toggle const scrollLabel = document.createElement("label"); scrollLabel.textContent = " Enable Scrolling"; const scrollCheckbox = document.createElement("input"); @@ -92,7 +86,7 @@ if (!document.getElementById("overlay-iframe")) { }; scrollLabel.appendChild(scrollCheckbox); - // Overlay Unlock toggle + // Overlay Unlock Toggle const unlockButton = document.createElement("button"); unlockButton.textContent = "🔓 Unlock Overlay"; unlockButton.style.marginTop = "8px"; @@ -106,7 +100,7 @@ if (!document.getElementById("overlay-iframe")) { unlockButton.id = "unlock-overlay-button"; controls.appendChild(unlockButton); - // Assemble controls + // Add controls controls.appendChild(scrollLabel); controls.appendChild(document.createElement("br")); controls.appendChild(sliderLabel); @@ -117,13 +111,11 @@ if (!document.getElementById("overlay-iframe")) { controls.appendChild(document.createElement("br")); controls.appendChild(invertLabel); - // Add to page document.body.appendChild(iframe); document.body.appendChild(controls); - console.log("Overlay iframe and controls added"); - // Drag logic (only from dragHandle) + // Drag logic let isDragging = false; let offsetX = 0; let offsetY = 0; @@ -157,13 +149,23 @@ if (!document.getElementById("overlay-iframe")) { if (window.overlayUnlocked) { iframe.style.pointerEvents = "auto"; + iframe.style.overflow = "auto"; + iframe.setAttribute("scrolling", "yes"); + document.body.style.pointerEvents = "none"; document.documentElement.style.pointerEvents = "none"; + controls.style.pointerEvents = "auto"; + unlockButton.textContent = "🔒 Lock Overlay"; } else { iframe.style.pointerEvents = "none"; + iframe.style.overflow = "hidden"; + iframe.setAttribute("scrolling", "no"); + document.body.style.pointerEvents = "auto"; document.documentElement.style.pointerEvents = "auto"; + controls.style.pointerEvents = "auto"; + unlockButton.textContent = "🔓 Unlock Overlay"; } }); From 1d43394400502bec8e5eab17d3f1cda9908cd952 Mon Sep 17 00:00:00 2001 From: TristanEDU Date: Sat, 11 Oct 2025 14:27:06 -0700 Subject: [PATCH 4/4] Updated file structure --- .gitignore | 3 --- icon-off.png => images/icon-off.png | Bin icon-on.png => images/icon-on.png | Bin content.js => scripts/content.js | 3 ++- 4 files changed, 2 insertions(+), 4 deletions(-) delete mode 100644 .gitignore rename icon-off.png => images/icon-off.png (100%) rename icon-on.png => images/icon-on.png (100%) rename content.js => scripts/content.js (98%) diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 8fe1453..0000000 --- a/.gitignore +++ /dev/null @@ -1,3 +0,0 @@ -.DS_Store -node_modules/ -*.zip diff --git a/icon-off.png b/images/icon-off.png similarity index 100% rename from icon-off.png rename to images/icon-off.png diff --git a/icon-on.png b/images/icon-on.png similarity index 100% rename from icon-on.png rename to images/icon-on.png diff --git a/content.js b/scripts/content.js similarity index 98% rename from content.js rename to scripts/content.js index 7de65c0..9e9e9ad 100644 --- a/content.js +++ b/scripts/content.js @@ -2,7 +2,8 @@ console.log("LiveOverlayExtension: content script loaded"); if (!document.getElementById("overlay-iframe")) { const iframe = document.createElement("iframe"); - iframe.src = "https://hiousastg.wpengine.com"; + iframe.src = "https://hiousastg.wpenginepowered.com/hole-in-one-insurance/"; + console.log(iframe.src); iframe.id = "overlay-iframe"; iframe.style.position = "fixed"; iframe.style.top = "0";