Word spacing

background.js

@@ -19,7 +19,20 @@ for (let i = 0; i < fontStyleBtns.length; i++) {
     )
 }
 
-const images = document.getElementsByClassName('img-remmover');
+// Change Word Spacing
+
+// const wordSpaceBtns = document.getElementByClassName('wordSpace');
+// for (let i = 0; i < wordSpaceBtns.length; i++) {
+//     wordSpaceBtns[i].addEventListener('click', function (e) {
+//         chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+//             chrome.tabs.sendMessage(tabs[0].id, {action: "wordSpace", wordSpace: e.target.innerText});
+//         }
+//         )
+//     }
+//     )
+// }
+
+const images = document.getElementsByClassName('img-remover');
 for(let i = 0; i < images.length; i++) {
     images[i].addEventListener('click', function (e) {
         console.log("clicked")
@@ -38,7 +51,7 @@ for (let i = 0; i < imageAdd.length; i++) {
             chrome.tabs.sendMessage(tabs[0].id, { action: "imageAdd" });
         })
     })
-};
+}
 
 const textToSpeech = document.getElementsByClassName('text-to-speech');
 const rate = document.querySelector('#rate');
@@ -72,7 +85,7 @@ for (let i = 0; i < links.length; i++) {
         }
         )
     })
-};
+}
 
 const removeLinkHighlight = document.getElementsByClassName('remove-link-hg');
 for (let i = 0; i < links.length; i++) {
@@ -82,7 +95,7 @@ for (let i = 0; i < links.length; i++) {
         }
         )
     })
-};
+}
 
 
 const imageReader = document.getElementsByClassName('img-read');
@@ -134,7 +147,7 @@ for (let i = 0; i < highlightPara.length; i++) {
             chrome.tabs.sendMessage(tabs[0].id, { action: "para-highlighter" });
         })
     })
-};
+}
 
 const removeHighlightPara = document.getElementsByClassName('para-highlighter-remove');
 for (let i = 0; i < removeHighlightPara.length; i++) {

content.js

@@ -0,0 +1,188 @@
+const synth = window.speechSynthesis;
+
+window.addEventListener("load", function load(event) {
+
+
+  window.removeEventListener("load", load, false);
+  chrome.runtime.onMessage.addListener(
+
+    function (request, sender, sendResponse) {
+      let backColor = '';
+      let fontColor = '';
+      let originalLineHeight = 1;
+
+      const action = request.action;
+      if (action === 'fontSize') {
+        //console.log(request.fontSize);
+        const fontSize = request.fontSize;
+        const html = document.querySelector('html');
+        html.style.fontSize = fontSize;
+        //console.log(html.innerText);
+      }
+      else if (action === 'fontStyle') {
+        console.log(request.fontStyle);
+        document.getElementsByTagName('body')[0].setAttribute('id', 'fonter');
+        const html = document.querySelector('#fonter');
+
+        if (request.fontStyle === 'Trebuchet MS') {
+          html.style.setProperty('font-family', 'Castellar, Trebuchet MS, sans-serif');
+        }
+        else if (request.fontStyle === 'Arial') {
+          html.style.setProperty('font-family', 'Arial, sans-serif');
+        }
+        else if (request.fontStyle === 'Baskerville') {
+          html.style.setProperty('font-family', 'Baskerville, serif');
+        }
+        else if (request.fontStyle === 'Calibri') {
+          html.style.setProperty('font-family', 'Calibri, sans-serif');
+        }
+        else if (request.fontStyle === 'Garamond') {
+          html.style.setProperty('font-family', 'Garamond, serif');
+        }
+        else if (request.fontStyle === 'Verdana') {
+          html.style.setProperty('font-family', 'Verdana, sans-serif');
+        }
+      }
+      // Change Word Spacing
+
+      // else if (action === 'wordSpace') {
+      //   console.log(request.wordSpace);
+      //   document.getElementsByTagName('body')[0].setAttribute('id', 'wspace');
+      //   const html = document.querySelector('#wspace');
+
+      //   if (request.wordSpace === 'Default') {
+      //     document.getElementByTagName("body").style.wordSpacing = 'normal';
+      //   }
+      //   else if (request.wordSpace === '2x') {
+      //     document.getElementByTagName("body").style.wordSpacing = '0.5em';
+      //   }
+      //   else if (request.wordSpace === '3x') {
+      //     document.getElementByTagName("body").style.wordSpacing = '0.75em';
+      //   }
+      //   else if (request.wordSpace === '4x') {
+      //     document.getElementByTagName("body").style.wordSpacing = '1em';
+      //   }
+      //   else if (request.wordSpace === '5x') {
+      //     document.getElementByTagName("body").style.wordSpacing = '1.25em';
+      //   }
+      // }
+      else if (action === 'image') {
+        const immgs = document.getElementsByTagName('img');
+        for (let i = 0; i < immgs.length; i++) {
+          immgs[i].style.setProperty('display', 'none');
+        }
+      }
+      else if (action === 'imageAdd') {
+        const immgs = document.getElementsByTagName('img');
+        for (let i = 0; i < immgs.length; i++) {
+          immgs[i].style.setProperty('display', 'block');
+        }
+      }
+
+      else if (action === 'text-to-speech') {
+        console.log('Hi');
+        if (synth.speaking) {
+          synth.cancel();
+        }
+        const text = document.getElementsByTagName('body')[0].innerText;
+        const msg = new SpeechSynthesisUtterance(text);
+        msg.rate = request.rate;
+        //console.log(msg);
+        synth.speak(msg);
+      }
+
+      // else if (action === 'stop-speech') {
+      //   if (synth.speaking) {
+      //     synth.cancel();
+      //   }
+      // }
+
+      else if (action === 'link-highlight') {
+        const links = document.getElementsByTagName('a');
+        for (let i = 0; i < links.length; i++) {
+          links[i].style.setProperty('background-color', 'yellow');
+          links[i].style.setProperty('fontSize', '24px');
+        }
+      }
+
+      else if (action === 'link-highlight-remove') {
+        const links = document.getElementsByTagName('a');
+        for (let i = 0; i < links.length; i++) {
+          links[i].style.setProperty('background-color', 'transparent');
+          links[i].style.setProperty('fontSize', 'default');
+        }
+      }
+
+      else if (action === 'image-reader') {
+
+        const images = document.getElementsByTagName('img');
+        console.log(images)
+        for (let i = 0; i < images.length; i++) {
+          //read out alt text on mouse hover
+
+
+          images[i].addEventListener('mouseover', function (e) {
+            console.log("here")
+            console.log(images[i].alt);
+            const msg = new SpeechSynthesisUtterance(images[i].alt);
+            window.speechSynthesis.speak(msg);
+          });
+
+          //mouse exit
+          images[i].addEventListener('mouseleave', function (e) {
+            window.speechSynthesis.cancel();
+          });
+        }
+      }
+
+      else if (action === "backgroundColor") {
+        backColor === '' ? backColor = document.getElementsByTagName('body')[0].style.backgroundColor : null;
+        document.getElementsByTagName('body')[0].style.setProperty('background-color', request.backgroundColor);
+      }
+
+      else if (action === "revert-background-color") {
+        document.getElementsByTagName('body')[0].style.setProperty('background-color', backColor);
+      }
+
+      else if (action === "fontColor") {
+        console.log(request.fontColor);
+        fontColor === '' ? fontColor = document.getElementsByTagName('*')[0].style.fontColor : null;
+        const all = document.getElementsByTagName('*');
+        for (let i = 0; i < all.length; i++) {
+          all[i].style.setProperty('color', request.fontColor);
+        }
+      }
+
+      // else if (action === "revert-font-color") {
+      //   const all = document.getElementsByTagName('*');
+      //   for (let i = 0; i < all.length; i++) {
+      //     all[i].style.setProperty('color', request.fontColor);
+      //   }
+      // }
+
+
+
+      else if (action === "para-highlighter") {
+        const paras1 = document.getElementsByTagName('p');
+        const paras2 = document.getElementsByTagName('div');
+        const paras = [...paras1, ...paras2];
+        for (let i = 0; i < paras.length; i++) {
+          paras[i].style.setProperty('border', '2px solid yellow');
+        }
+      }
+
+      else if (action === "para-highlighter-remove") {
+        const paras1 = document.getElementsByTagName('p');
+        const paras2 = document.getElementsByTagName('div');
+        const paras = [...paras1, ...paras2];
+        for (let i = 0; i < paras.length; i++) {
+          paras[i].style.setProperty('border', 'none');
+        }
+      }
+
+
+  })
+},false);
+
+
+

popup.html

@@ -35,24 +35,34 @@ <h1>FONT STYLE</h1>
             <button class="fontStyle">Trebuchet MS</button>
             <button class="fontStyle">Verdana</button>
         </section>
+
+        <!-- <section>
+            <h1>WORD SPACING</h1>
+            <button class="wordSpace">Default</button>
+            <button class="wordSpace">2x</button>
+            <button class="wordSpace">3x</button>
+            <button class="wordSpace">4x</button>
+            <button class="wordSpace">5x</button>
+        </section> -->
+
         <section>
             <h1>IMAGES</h1>
-            <button class="img-remmover">Remove images</button>
+            <button class="img-remover">Remove images</button>
 
             <button class="img-add">Add images</button>
 
              <button class="img-read">Read Out Images</button>
         </section>
         <section>
-            <h1>LSITEN TO WEB PAGE</h1>
+            <h1>LISTEN TO WEB PAGE</h1>
             <button class="text-to-speech">Speak</button>
             <div id="rate-control">
                 <label for="rate">Rate:</label>
                 <input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
             </div>
             <!-- <button class="stop-speech">Stop</button> -->
         </section>
-        
+
         <section>
             <h1>LINKS</h1>
             <button class="link">Highlight Links</button>

styles.css

@@ -0,0 +1,95 @@
+*{
+    font-family: 'Courier New', Courier, monospace;
+    font-style: normal;
+    font-weight: 800;
+    font-size:26px;
+    /* word-spacing added for default value*/
+    word-spacing: normal;
+}
+
+.centered{
+    text-align: center;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  align-items: center;
+}
+
+body{
+    width: 500px;
+    /* use dyslexic friendly background */
+    background-color: rgba(0, 0, 0, 0.09) !important;
+}
+
+h1{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+}
+button {
+  align-items: center;
+  background-color: #fee6e3;
+  border: 2px solid #111;
+  cursor: pointer;
+  border-radius: 8px;
+  box-sizing: border-box;
+  color: #111;
+  /* display: flex; */
+  margin:25px;
+  font-size: 16px;
+  height: 48px;
+  /* justify-content: center; */
+  line-height: 24px;
+  max-width: 100%;
+  padding: 0 25px;
+  position: relative;
+  /* text-align: center; */
+  text-decoration: none;
+  /* user-select: none; */
+  /* -webkit-user-select: none; */
+  /* touch-action: manipulation; */
+}
+
+button:after {
+  background-color: #111;
+  border-radius: 8px;
+  content: "";
+  display: block;
+  height: 48px;
+  left: 0;
+  width: 100%;
+  position: absolute;
+  top: -2px;
+  transform: translate(8px, 8px);
+  transition: transform .2s ease-out;
+  z-index: -1;
+}
+
+button:hover:after {
+  transform: translate(0, 0);
+}
+
+button:active {
+  background-color: #ffdeda;
+  outline: 0;
+}
+
+button:hover {
+  outline: 0;
+}
+
+@media (min-width: 768px) {
+  button {
+    padding: 0 40px;
+  }
+}
+
+#rate-control {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin: 1rem 0;
+}