Merge pull request #5 from JARVIS843/Feature-Branch

Added Several Features. Patched Bugs and Optimized Code
JARVIS843 · May 28, 2022 · 6354147 · 6354147
2 parents 2b6eef2 + 793bb0a
commit 6354147
Show file tree

Hide file tree

Showing 8 changed files with 232 additions and 31 deletions.
diff --git a/css/Popup.css b/css/Popup.css
@@ -0,0 +1,28 @@
+.header{
+    padding-left: 10px;
+    padding-bottom: 5px;
+    align-items: center;
+}
+
+#name{
+    font-weight: bold;
+    font-size: 16px;
+}
+
+.brdr {
+    border-bottom: 1px solid rgb(221, 221, 221);
+}
+
+body{
+    width: 300px;
+}
+
+h4{
+    font-weight: normal;
+    font-size: 16px;
+}
+
+.switch-panel{
+    padding-left: 15px;
+    padding-bottom: 15px;
+}
diff --git a/css/switch.css b/css/switch.css
@@ -0,0 +1,59 @@
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 38px;
+    height: 20px;
+    margin-bottom: 0;
+    flex-shrink: 0;
+  }
+  .switch input {
+    display:none;
+  }
+  .switch span{
+      position: absolute;
+      left: 45px;
+      width: 220px;
+      font-size: 14px;
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #cccccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 2px;
+    bottom: 2px;
+    /* background-color: #7769FE; */
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+  input:checked + .slider {
+    background-color: #2163df;
+    /* background-color: #afa7ff; */
+  }
+  input:checked + .slider:before {
+    background: white;
+    /* background: #7a6dff; */
+    -webkit-transform: translateX(18px);
+    -ms-transform: translateX(18px);
+    transform: translateX(18px);
+  }
+  /* Rounded sliders */
+  .slider.round {
+    border-radius: 12px;
+  }
+  .slider.round:before {
+    border-radius: 50%;
+  }
diff --git a/html/Popup.html b/html/Popup.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <!-- CSS only -->
+    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> -->
+    <link rel="stylesheet" href="../css/switch.css">
+    <link rel="stylesheet" href="../css/Popup.css">
+    <title>Document</title>
+</head>
+<body>
+    <header>
+        <div class="header brdr">
+            <div id="name">Bionic Enhance Reading</div>
+        </div>
+    </header>
+    <div class="switch-panel">
+        <h4>Settings: </h4>
+        <label class="switch">
+            <input class="switcher" type="checkbox" id="Auto_Bold" checked="checked">
+            <div class="slider round"></div>
+            <span>Automatically Bold Websites</span>
+        </label>
+        <br>
+    </div>
+    <script src="../js/Popup.js"></script>
+</body>
+
+
+</html>
diff --git a/js/Algorithm.js b/js/Algorithm.js
@@ -0,0 +1,47 @@
+//We probably don't need Unit Test
+
+function ModifyTextBasic(textNodeContent) 
+{
+    return textNodeContent.split(' ').map((word) => {
+        //TODO if the user wants numbers to be bolded    
+        //if(/\d/.test(word)) return word;
+
+
+        var boldUp2 = Math.floor(Math.random() * Math.floor(word.length/2)); //TODO Add customizable length: 1/4 , 1/2 , 3/4 of a word etc..
+        return word.replace(word, `<b>${word.substring(0, boldUp2+1)}</b>${word.substring(boldUp2+1)}`);  //TODO Add customizable fonts & underline the words that are originally bolded
+    });
+}
+
+function ModifyTextSyllable(textNodeContent) 
+{
+    return textNodeContent.split(' ').map((word) => {
+        //if(/\d/.test(word)) return word;
+
+        var vowel = /[aeiouy]/i;
+        var match = vowel.exec(word);
+        if(match != null)
+            var boldUp2 = match.index;
+        return word.replace(word, `<b>${word.substring(0, boldUp2+1)}</b>${word.substring(boldUp2+1)}`);
+    });
+}
+
+function ModifyWebPage()
+{
+    const domParser = new DOMParser();
+    var allText = [... document.getElementsByTagName('p')];         //TODO replace this with customizable Tags
+    allText.forEach(element => {
+        var text = domParser.parseFromString(element.innerHTML, "text/html");
+        var textNodeCollection = Array.from(text.body.childNodes).map((node) => {
+                                                                if(node.nodeType === Node.TEXT_NODE)
+                                                                    return ModifyTextBasic(node.textContent).join(' '); //Change this to ModifyTextSyllable when changing algorithm
+                                                                else
+                                                                    return node.outerHTML;})
+        element.innerHTML = textNodeCollection.join('');
+    });
+}
+
+ModifyWebPage();
+
+
+
+
diff --git a/js/Background.js b/js/Background.js
@@ -0,0 +1,34 @@
+//User Settings
+var userSettings = {
+    Auto_Bold : true
+}
+
+//First Initiallization of the Plugin
+chrome.runtime.onInstalled.addListener(() => {
+    chrome.storage.sync.set({ userSettings });
+});
+
+
+//Bold a webpage once the user has switched to a new page
+chrome.tabs.onActivated.addListener((activeInfo) => {
+    if(userSettings.Auto_Bold)  //TODO Once a web is bolded, mark it as "Static" so that it will not be bold again
+        chrome.scripting.executeScript({
+            target: {tabId: activeInfo.tabId, allFrames: true},
+            files: ['js/Algorithm.js'],
+            });
+});
+
+
+chrome.runtime.onMessage.addListener((request , sender , sendResponse) => {
+
+    //Check if request contains info related to Auto_Bold
+    if('Auto_Bold' in request)
+    {
+        userSettings.Auto_Bold = request.Auto_Bold;
+        chrome.storage.sync.set({ userSettings });
+    }
+
+
+    //Since No responce is needed, close the Message Port
+    return true;
+});
diff --git a/js/Popup.js b/js/Popup.js
@@ -0,0 +1,17 @@
+//Initializations on Startup
+const Auto_Bold_Switch = document.getElementById('Auto_Bold');
+var userSettingsCopy;
+chrome.storage.sync.get( 'userSettings' , (result) => {
+    userSettingsCopy = result.userSettings;
+
+
+    Auto_Bold_Switch.checked = userSettingsCopy.Auto_Bold;
+});
+
+
+//Events
+Auto_Bold_Switch.addEventListener('change' , function(){
+    var Bold_Status = Auto_Bold_Switch.checked;
+
+    chrome.runtime.sendMessage({Auto_Bold : Bold_Status});
+});
diff --git a/js/content.js b/js/content.js
diff --git a/manifest.json b/manifest.json
@@ -1,17 +1,25 @@
 {
     "manifest_version": 3,
     "name": "Bionic Enhance Reader",
-    "version": "0.0.1",
-    "description": "Assist your reading with Bionic Enhance Reader",
-    "icons": {
+    "version": "0.0.2",
+    "description": "Speed Up Your Reading By 10 Folds",
+    "icons": 
+    {
         "16": "img/icon16.png",
         "48": "img/icon48.png",
         "128":"img/icon128.png"
     },
-    "content_scripts": [
-        {
-            "matches": ["https://*/*", "http://*/*"],
-            "js": ["js/content.js"]
-        }
-    ]
+    "background": 
+    {
+        "service_worker": "js/background.js"
+    },
+    "permissions": ["activeTab","scripting","storage","tabs"],
+    "host_permissions": [
+        "*://*/"
+      ],
+    "action": 
+    {
+        "default_popup": "html/Popup.html",
+        "default_title": "Click to Basic Settings"
+    }
 }