Merge pull request #5 from vivek-nexus/v2.0.4

v2.0.4
vivek-nexus · Apr 25, 2024 · f7e28f9 · f7e28f9
2 parents b029e98 + 973bfc6
commit f7e28f9
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 42 deletions.
diff --git 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,15 +78,15 @@ 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);
         }
 
         //custom cursor help text
         const html = document.querySelector("html")
         const customCursor = document.createElement("div");
         const customCursorText = document.createElement("p")
-        const defaultHelpText = `<span>👉 Press <b>"${blurKey}"</b> to lock blur <br /> 👉 Press <b>"${unblurKey}"</b> to unlock blur <br /> 👉 Press <b>"${exitKey}"</b> to stop selecting<span>`
+        const defaultHelpText = `<span>Hover over any element you want to modify, <br /> 👉 Press <b>"${blurKey}"</b> to blur <br /> 👉 Press <b>"${unblurKey}"</b> to unblur<br /> 👉 Press <b>"${exitKey}"</b> to stop hovering<span>`
         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,48 +145,41 @@ function injectScript() {
             }
         }
 
+        // move help text with cursor
         function MoveHelpText(event) {
-            // move the instruction with cursor
             const x = event.clientX;
             const y = event.clientY;
 
             customCursor.style.left = x + 12 + 'px';
             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
                 }, 2500);
             }
         }
 
+        // 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
                 }, 2500);
             }
         }
 
-        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
diff --git 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
@@ -5,28 +5,45 @@
 <head>
     <title>Easy Blur</title>
     <style>
+        @font-face {
+            font-family: Sora;
+            src: url("fonts/Sora_Variable.ttf") format("truetype");
+        }
+
         body {
             width: 600px;
             padding: 1rem;
             background: #DCE35B;
             /* fallback for old browsers */
-            background: -webkit-linear-gradient(to right, #45B649, #DCE35B);
+            background: -webkit-linear-gradient(to top, #45B649, #DCE35B);
             /* Chrome 10-25, Safari 5.1-6 */
-            background: linear-gradient(to right, #45B649, #DCE35B);
+            background: linear-gradient(to top, #45B649, #DCE35B);
             /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
             display: grid;
             grid-template-columns: repeat(2, minmax(0, 1fr));
             gap: 3rem;
         }
 
+        h2 {
+            font-size: 1.75rem;
+            margin: 0px;
+        }
+
+        .logo-title {
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+            padding-top: 0.75rem;
+        }
+
         .get-started {
             padding: 0.5rem 1rem;
             background-color: rgba(255, 255, 255, 0.3);
             backdrop-filter: blur(4px);
             border-radius: 4px;
             margin-bottom: 1.5rem;
             text-align: left;
-            font-size: medium;
+            font-size: 1rem;
         }
 
         ul {
@@ -76,18 +93,18 @@
 
 <body>
     <div>
-        <div style="text-align: center;">
-            <div>
-                <img src="./images/icon.png" width="48px" height="48px" alt="" />
+        <div>
+            <div class="logo-title">
+                <img src="./images/icon.png" width="36px" height="36px" alt="" />
+                <h2>Easy Blur</h2>
             </div>
-            <h2>Easy Blur </h2>
             <h3 style="font-weight: normal;">Blur parts of a web page, before taking screenshots or screen recordings
             </h3>
         </div>
         <div class="get-started">
             <h3>How to use Easy Blur?</h3>
             <ul>
-                <li>Right click on any page</li>
+                <li>Right click in empty area of any web page</li>
                 <li>Choose Easy Blur</li>
             </ul>
         </div>
@@ -99,17 +116,17 @@ <h3>Customise blur intensity</h3>
             <input type="range" name="" id="blur-intensity" step="1" min="0" max="20" />
         </div>
         <h3>Customise shortcuts</h3>
-        <div class="customise-shortcuts" style="margin-bottom: 2rem;">
+        <div class="customise-shortcuts" style="margin-bottom: 0.75rem;">
             <div class="input-group">
-                <p class="label">Lock blur</p>
+                <p class="label">Blur</p>
                 <input type="text" id="blur-shortcut" class="text-input" maxlength="1" />
             </div>
             <div class="input-group">
-                <p class="label">Unlock blur</p>
+                <p class="label">Unblur</p>
                 <input type="text" id="unblur-shortcut" class="text-input" maxlength="1" />
             </div>
             <div class="input-group">
-                <p class="label">Stop selecting</p>
+                <p class="label">Stop hovering</p>
                 <input type="text" id="exit-shortcut" class="text-input" maxlength="1" />
             </div>
         </div>

diff --git a/extension/popup.js b/extension/popup.js
@@ -10,7 +10,7 @@ blurKey.value = "b"
 unblurKey.value = "u"
 exitKey.value = "q"
 
-blurAmountValue.textContent = ` Blur intensity: 6 px`
+blurAmountValue.textContent = `Blur intensity: 6 px`
 
 
 chrome.storage.local.get(["blurIntensity", "blurKey", "unblurKey", "exitKey"]).then((result) => {