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 70% rename from content.js rename to scripts/content.js index 6ce7bc2..9e9e9ad 100644 --- a/content.js +++ b/scripts/content.js @@ -1,9 +1,9 @@ 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.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"; @@ -18,12 +18,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 +30,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 +40,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 +52,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 +64,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 +74,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 +87,21 @@ if (!document.getElementById("overlay-iframe")) { }; scrollLabel.appendChild(scrollCheckbox); - // Assemble controls + // Overlay Unlock Toggle + 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"; + controls.appendChild(unlockButton); + + // Add controls controls.appendChild(scrollLabel); controls.appendChild(document.createElement("br")); controls.appendChild(sliderLabel); @@ -103,13 +112,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; @@ -132,4 +139,35 @@ 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"; + 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"; + } + }); }