diff --git a/background.js b/background.js
index 8fbff1a..1697bd3 100644
--- a/background.js
+++ b/background.js
@@ -19,7 +19,19 @@ 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 +50,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');
@@ -64,6 +76,8 @@ for (let i = 0; i < textToSpeechStop.length; i++) {
)
}
+// Raise Video Volume
+
const links = document.getElementsByClassName('link');
for (let i = 0; i < links.length; i++) {
links[i].addEventListener('click', function (e) {
@@ -72,7 +86,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 +96,7 @@ for (let i = 0; i < links.length; i++) {
}
)
})
-};
+}
const imageReader = document.getElementsByClassName('img-read');
@@ -134,7 +148,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++) {
diff --git a/content.js b/content.js
new file mode 100644
index 0000000..cdd05f3
--- /dev/null
+++ b/content.js
@@ -0,0 +1,187 @@
+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);
+
+
+
diff --git a/popup.html b/popup.html
index 7e01ed5..aa48b95 100644
--- a/popup.html
+++ b/popup.html
@@ -35,16 +35,26 @@ FONT STYLE
+
+
+
IMAGES
-
+
- LSITEN TO WEB PAGE
+ LISTEN TO WEB PAGE
@@ -52,6 +62,15 @@
LSITEN TO WEB PAGE
+
+
LINKS
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..381fad7
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,94 @@
+*{
+ font-family: 'Courier New', Courier, monospace;
+ font-style: normal;
+ font-weight: 800;
+ font-size:26px;
+ 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;
+}
\ No newline at end of file