diff --git a/extension/background.js b/extension/background.js index 1897cf0..985a4e3 100644 --- a/extension/background.js +++ b/extension/background.js @@ -3,8 +3,8 @@ chrome.runtime.onInstalled.addListener(function () { id: "injectScript", title: "Easy Blur", contexts: ["page"] - }); -}); + }) +}) chrome.contextMenus.onClicked.addListener(function (info, tab) { if (info.menuItemId === "injectScript") { @@ -13,15 +13,17 @@ chrome.contextMenus.onClicked.addListener(function (info, tab) { function: injectScript }); } -}); +}) function injectScript() { chrome.storage.local.get(["blurIntensity", "blurKey", "unblurKey", "exitKey"]).then((result) => { + //default values let blurIntensity = 6 let blurKey = "b" let unblurKey = "u" let exitKey = "q" + //read from chrome storage, if available if (result.blurIntensity) blurIntensity = result.blurIntensity if (result.blurKey) @@ -31,8 +33,14 @@ function injectScript() { if (result.exitKey) exitKey = result.exitKey - const existingStyleTag = document.querySelector('style[data-extension-styles]'); + //style sheet for blur, unblur, custom cursor help text + const existingStyleTag = document.querySelector('style[easy-blur-styles]'); const newStyles = ` + @font-face { + font-family: Sora; + src: url("fonts/Sora_Variable.ttf") format("truetype"); + } + .blur-element { filter: blur(${blurIntensity}px)!important; } @@ -58,6 +66,10 @@ function injectScript() { .custom-cursor-text{ margin: 0px; + font-size: max(1rem, 16px); + font-family: "Sora", sans-serif; + line-height: 150%; + } `; @@ -66,7 +78,7 @@ function injectScript() { } else { const style = document.createElement('style'); style.textContent = newStyles; - style.setAttribute('data-extension-styles', ''); // Add a data attribute for identification + style.setAttribute('easy-blur-styles', ''); // Add a data attribute for identification document.head.appendChild(style); } @@ -74,7 +86,7 @@ function injectScript() { const html = document.querySelector("html") const customCursor = document.createElement("div"); const customCursorText = document.createElement("p") - const defaultHelpText = `👉 Press "${blurKey}" to lock blur
👉 Press "${unblurKey}" to unlock blur
👉 Press "${exitKey}" to stop selecting` + const defaultHelpText = `Hover over any element you want to modify,
👉 Press "${blurKey}" to blur
👉 Press "${unblurKey}" to unblur
👉 Press "${exitKey}" to stop hovering` customCursor.append(customCursorText) html.append(customCursor) @@ -83,25 +95,34 @@ function injectScript() { customCursorText.innerHTML = defaultHelpText - // Start blurring in response to various events + // Move help text with mouse document.addEventListener("mousemove", MoveHelpText) + // Mark hovered element document.addEventListener("mouseover", DocMouseOver); + // Blur marked element on keypress document.addEventListener("keydown", DocBlurKey) + // Unblur marked element on keypress document.addEventListener("keydown", DocUnblurKey) - //Stop blurring in response to various events - document.addEventListener("keydown", exitHoverMode) + //Stop blurring when exit key is pressed + document.addEventListener("keydown", (e) => { + if (e.key === exitKey) { + ClearEventListeners() + } + }) + //Stop blurring when right click is invoked document.addEventListener("contextmenu", () => { - clearHoverMode() + ClearEventListeners() return }) + //Stop blurring when settings are hot updated in chrome storage chrome.storage.onChanged.addListener(function (changes, namespace) { - clearHoverMode() + ClearEventListeners() return }); - + // higlight hovered element function DocMouseOver(event) { const target = event.target; const isElementBlurred = target.classList.contains("blur-element") @@ -124,8 +145,8 @@ function injectScript() { } } + // move help text with cursor function MoveHelpText(event) { - // move the instruction with cursor const x = event.clientX; const y = event.clientY; @@ -133,10 +154,11 @@ function injectScript() { customCursor.style.top = y + 12 + 'px'; } + // Blur the element marked with the attribute, by DocMouseOver function function DocBlurKey(event) { if (event.key === blurKey) { - const elementToLock = document.querySelector("[target-element='true']") - elementToLock.classList.add("blur-element") + const elementToBlur = document.querySelector("[target-element='true']") + elementToBlur.classList.add("blur-element") customCursorText.innerHTML = "Blur locked until next refresh!" setTimeout(() => { customCursorText.innerHTML = defaultHelpText @@ -144,10 +166,11 @@ function injectScript() { } } + // Unblur the element marked with the attribute, by DocMouseOver function function DocUnblurKey(event) { if (event.key === unblurKey) { - const elementToLock = document.querySelector("[target-element='true']") - elementToLock.classList.remove("blur-element") + const elementToUnblur = document.querySelector("[target-element='true']") + elementToUnblur.classList.remove("blur-element") customCursorText.innerHTML = "Blur unlocked until next refresh!" setTimeout(() => { customCursorText.innerHTML = defaultHelpText @@ -155,17 +178,8 @@ function injectScript() { } } - function exitHoverMode(event) { - if (event.key === exitKey) { - document.removeEventListener("mousemove", MoveHelpText) - customCursor.remove() - document.removeEventListener("mouseover", DocMouseOver) - document.removeEventListener("keydown", DocBlurKey) - document.removeEventListener("keydown", DocUnblurKey) - } - } - - function clearHoverMode() { + // Remove custom text, highlighter, blur, unblur event listeners and custom text element + function ClearEventListeners() { document.removeEventListener("mousemove", MoveHelpText) customCursor.remove() document.removeEventListener("mouseover", DocMouseOver) diff --git a/extension/fonts/Sora_Variable.ttf b/extension/fonts/Sora_Variable.ttf new file mode 100644 index 0000000..95a0ba2 Binary files /dev/null and b/extension/fonts/Sora_Variable.ttf differ diff --git a/extension/manifest.json b/extension/manifest.json index 49534d3..e03cb54 100644 --- a/extension/manifest.json +++ b/extension/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "Easy Blur", - "version": "2.0.3", + "version": "2.0.4", "description": "Blur parts of a web page, before taking screenshots or screen recordings", "permissions": [ "activeTab", diff --git a/extension/popup.html b/extension/popup.html index a879d30..c3f09b5 100644 --- a/extension/popup.html +++ b/extension/popup.html @@ -5,20 +5,37 @@ Easy Blur