version 0.1 first commit.

forestery · Mar 4, 2020 · 765b396 · 765b396
1 parent 7ef1a02
commit 765b396
Show file tree

Hide file tree

Showing 6 changed files with 318 additions and 0 deletions.
diff --git a/background.js b/background.js
@@ -0,0 +1,7 @@
+'use strict';
+
+chrome.runtime.onInstalled.addListener(function() {
+  chrome.storage.local.set({'new': []},function(){
+    console.log('add new data');
+  });
+});
diff --git a/help.html b/help.html
@@ -0,0 +1,86 @@
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <style>
+          body {
+            /*height: 530px;*/
+            width: 280px;
+            outline: none;
+          }
+
+          input {
+              width:250px;
+              height:30px;
+          }
+          .mainbody {
+                /*height:450px;*/
+                /*border: solid #eee;*/
+                /*border-width:1px 0;*/
+            }
+
+          .header {
+                height: 60px;
+                padding: 5px;
+            }
+
+            /*
+            .footer {
+                height: 60px;
+                padding:5px;
+                position: absolute; 
+                bottom: 0;
+            }*/
+
+            a:link{
+                color:blueviolet;
+            }
+            a:visited{
+                color:blueviolet;
+            }
+
+            #resultDiv {
+                height: 150px;
+                overflow-y: scroll;
+            }
+
+            #bigtitle {
+                font-size: xx-large;
+            }
+
+        </style>
+      </head>
+
+    <body>
+    <div class="container">
+        <div class="header">
+            <span id="bigtitle"><a href="index.html">back</a></span>
+
+        </div>
+
+        <div class="mainbody">
+
+                <br>
+                <font style="color:blueviolet">How to use</font>
+                <ul>
+                    <li>You can press "Ctrl+Shift+F" to open this extension.</li>
+                    <li>Select a word on web ,then just press "Ctrl+Shift+F" to translate the word to chinese.</li>
+                    <li>Type a word in the input field and press Enter key.</li>
+                    <li>In the new word list field, click the word to translate, double click the word to remove it when you know it.</li>
+                </ul>
+                <br>
+                <font style="color:blueviolet">About Translated version 0.1</font>
+                <ul>
+                    <li>A chrome exetension to help translate English word to Chinese.It aim to provide friendly UI and keep dead easy for everything.</li>
+                    <li>The translate engin is powered by <a href="https://cn.bing.com/dict" target="_blank">微软必应词典</a>.</li>
+                    <li>Developed by [email protected].</li>
+                    <li>Open source License: MIT</li>
+                </ul>
+                <br>
+        </div>
+
+
+
+    </div>
+
+    </body>
+  </html>
diff --git a/index.html b/index.html
@@ -0,0 +1,85 @@
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <style>
+          body {
+            /*height: 530px;*/
+            width: 280px;
+            outline: none;
+          }
+
+          input {
+              width:250px;
+              height:30px;
+          }
+          .mainbody {
+                /*height:450px;*/
+                /*border: solid #eee;*/
+                /*border-width:1px 0;*/
+            }
+
+          .header {
+                height: 60px;
+                padding: 5px;
+            }
+
+            /*
+            .footer {
+                height: 60px;
+                padding:5px;
+                position: absolute; 
+                bottom: 0;
+            }*/
+            a:link{
+                color:blueviolet;
+            }
+            a:visited{
+                color:blueviolet;
+            }
+            #resultDiv {
+                height: 150px;
+                overflow-y: scroll;
+            }
+
+            #bigtitle {
+                font-size: xx-large;
+            }
+
+        </style>
+      </head>
+
+    <body>
+    <div class="container">
+        <div class="header">
+            <span id="bigtitle">Translated</span>
+
+            <span><a href="help.html">help</a></span>
+
+
+
+
+
+        </div>
+
+        <div class="mainbody">
+                <input id="searchinput" type="text" placeholder="type a word an press Enter">
+                <div id="resultDiv"></div>
+                <br>
+                <font style="color: red;">New Word List</font>
+                <ul id="wordlist">
+                </ul>
+                <br>
+        </div>
+
+        <!--div class="footer">    
+            
+            <br>
+            about<br>
+            <a href="https://cn.bing.com/" target="_blank">bing dict service</a>
+    
+        </div-->
+
+    </div>
+      <script src="index.js"></script>
+    </body>
+  </html>
diff --git a/index.js b/index.js
@@ -0,0 +1,115 @@
+'use strict';
+
+let searchinput = document.getElementById('searchinput');
+let resultDiv = document.getElementById('resultDiv');
+let wordlist = document.getElementById('wordlist');
+
+
+
+chrome.tabs.executeScript({
+        code: "window.getSelection().toString();"
+    }, function(selection) {
+        searchinput.value = selection[0];
+        addData(searchinput.value);
+        translate(selection[0]);
+
+    }
+);
+
+searchinput.addEventListener("keydown", function(event) {
+    if (event.key === "Enter") {
+        event.preventDefault();
+        addData(searchinput.value);
+        translate(searchinput.value);
+
+    }
+});
+
+
+//load new word data to panel
+//user can click it to remember it again.
+function loadData(){
+    wordlist.innerHTML="";
+    chrome.storage.local.get('new', function(data) {
+        for (let item of data.new) {
+            let li = document.createElement('li');
+            li.innerHTML=item;
+            li.addEventListener('dblclick', function(element) {
+                searchinput.value=element.target.innerText;
+                translate(element.target.innerText);
+                removeData(element.target.innerText);
+              });
+            li.addEventListener('click', function(element) {
+                searchinput.value=element.target.innerText;
+                translate(element.target.innerText);
+
+              });
+            wordlist.appendChild(li);
+        }
+
+    });
+}
+
+//remove it when you click it.
+function removeData(word){
+    chrome.storage.local.get('new',function(data){
+        var k=data.new;
+        var filtered = k.filter(function(value,index,arr){return value!=word;});
+        chrome.storage.local.set({'new': filtered},function(){
+            loadData();
+        });
+    });
+}
+
+//save new word in the localStroage of chrome browser.
+//saved in an array with a key name "new".
+function addData(word){
+    if(word == null || word == "" || word == undefined){
+        return;
+    }
+    chrome.storage.local.get('new',function(data){
+        var k=data.new;
+        k.push(word.trim());
+        chrome.storage.local.set({'new': k},function(){
+            loadData();
+        });
+    })
+
+}
+
+function translate(word) {
+    if(word == null || word == "" || word == undefined){
+        return;
+    }      
+        var xhr = new XMLHttpRequest();
+        xhr.responseType = "document";
+        var url = "https://cn.bing.com/dict/search?q="+word;
+        xhr.open("GET", url, true);
+        xhr.onreadystatechange = function() {
+          if (xhr.readyState == 4) {
+            //display data fetched from bing.
+            resultDiv.innerHTML="";
+            resultDiv.append(xhr.response.querySelector("div.qdef ul"));
+
+            let more = document.createElement('a');
+            more.innerHTML='see more about '+word;
+            more.href=url;
+            more.target="_blank"
+            let moreli = document.createElement('li');
+            moreli.append(more);
+            resultDiv.querySelector("ul").append(moreli);
+            //resultDiv.appendChild(more);
+
+            searchinput.setSelectionRange(0, searchinput.value.length);
+
+          }
+        }
+        xhr.send();
+}
+
+
+
+
+
+searchinput.focus();
+loadData();
diff --git a/logo.png b/logo.png
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,25 @@
+{
+    "name": "Translated",
+    "description" : "English Learning",
+    "version": "0.1",
+    "manifest_version": 2,
+    "background": {
+        "scripts": ["background.js"],
+        "persistent": false
+      },
+    "permissions": ["https://cn.bing.com/","clipboardRead","activeTab","storage"],
+    "browser_action": {
+        "default_popup": "index.html",
+        "default_icon": "logo.png"
+      },
+      "commands": {
+        "_execute_browser_action": {
+          "suggested_key": {
+            "default": "Ctrl+Shift+F",
+            "mac": "MacCtrl+Shift+F"
+          },
+          "description": "Opens index"
+        }
+      }
+
+  }