翻译功能

packages/shell-chrome/assets/css/tran.css

@@ -0,0 +1,15 @@
+#inputLang{
+    width: 250px;
+    height: 150px;
+}
+#outPutRes{
+    width: 250px;
+    height: 150px;
+    background-color: rgb(243, 243, 243);
+}
+#LangType{
+    display: inline-block
+}
+#tranbtn{
+    display: inline-block
+}

packages/shell-chrome/assets/js/background.js

@@ -48,3 +48,13 @@ chrome.contextMenus.create({
     showNotification()
   }
 })
+
+function tranBit(){
+  console.log("开始插入翻译页面")
+    
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+  console.log(tabs)
+  chrome.tabs.executeScript(tabs[0].id, { file:'./assets/js/translate/tran.js', runAt: 'document_start' })
+  chrome.tabs.insertCSS(tabs[0].id, { file:'./assets/css/tran.css', runAt: 'document_start' })
+  })
+}

packages/shell-chrome/assets/js/popup2.js

@@ -89,10 +89,9 @@ document.getElementById("weatherSite").onclick = function () {
 
 // //天气end
 //翻译
-//默认参数
+document.getElementById("ToTans").onclick = function () {
-// document.getElementById("TOtans").onclick = function () {
+  console.log(chrome.extension.getBackgroundPage())
-//   console.log(chrome.extension.getBackgroundPage())
+  chrome.extension.getBackgroundPage().tranBit()
-//   chrome.extension.getBackgroundPage().tranBit()
+}
-// }
 
 //翻译end   

packages/shell-chrome/assets/js/translate/tran.js

@@ -0,0 +1,87 @@
+if (typeof (BitTarnsDiv) !== "undefined") {
+    console.log("存在 BitTarnsDiv")
+    BitTarnsDiv.parentNode.removeChild(BitTarnsDiv)
+}
+var BitTarnsDiv = document.createElement("div")
+BitTarnsDiv.id = "BitTarnsDivId"
+document.body.appendChild(BitTarnsDiv)
+BitTarnsDiv.style.backgroundColor = "red"
+BitTarnsDiv.style.height = "450px"
+BitTarnsDiv.style.width = "300px"
+BitTarnsDiv.style.zIndex = 99999
+BitTarnsDiv.style.position = "fixed"
+BitTarnsDiv.style.right = '10px'
+BitTarnsDiv.style.top = '50px'
+BitTarnsDiv.style.float = 'right'
+
+
+BitTarnsDiv.innerHTML = `
+ <div id = 'trans'>
+            <select id="inputLangSelect">
+            <option value="auto">自动检测语言</option>
+            <option value="zh">简体中文</option>
+            <option value="en">English</option>
+            </select>
+          <select id="outLangSelect">
+            <option value="zh">简体中文</option>
+            <option value="en">English</option>
+            </select>
+            <button id="deleteTrans">关闭</button>
+          <input type="text" id="inputLang" value="" placeholder="请输入翻译内容"  >
+          <br>
+            自动检测语言：<p id="LangType"></p><button id="tranbtn">翻译</button>
+          <hr>
+        <p id="outPutRes"></p>
+</div>
+ `
+
+var from = 'auto';
+var to = 'auto';
+
+var postMsg = async function () {
+    from = document.getElementById("inputLangSelect").value
+    to = document.getElementById("outLangSelect").value
+    var msgq = document.getElementById("inputLang").value
+    // 翻译api
+    msgq = encodeURIComponent(msgq)
+
+    let httpUrl1 = "//qca566.api.cloudendpoint.cn/hello?msgq=" +
+        msgq + "&from=" + from + "&to=" + to + ""
+    let res1 = await fetch(httpUrl1)
+    let result1 = await res1.json()
+    let res2 = result1.trans_result[0].dst
+
+    document.getElementById("outPutRes").innerHTML = res2
+}
+
+var onInputChange = async function () {
+
+    var msgq = document.getElementById("inputLang").value
+    msgq = encodeURIComponent(msgq)
+    let httpUrl1 = "//qca566.api.cloudendpoint.cn/transLang?msgq=" + msgq + ""
+    let res1 = await fetch(httpUrl1)
+    let result1 = await res1.json()
+    let res2 = result1.data.src
+    if (res2 == 'en') {
+        document.getElementById("LangType").innerHTML = '英文'
+    } else if (res2 == 'zh') {
+        document.getElementById("LangType").innerHTML = '简体中文'
+    } else {
+        document.getElementById("LangType").innerHTML = res
+    }
+    postMsg()
+}
+
+//触发识别语言，再翻译
+document.getElementById("inputLang").onchange = function () {
+    onInputChange()
+}
+//直接翻译
+document.getElementById("tranbtn").onclick = function () {
+    postMsg()
+}
+//关闭翻译模块
+document.getElementById("deleteTrans").onclick = function () {
+    BitTarnsDiv.parentNode.removeChild(BitTarnsDiv)
+    BitTarnsDiv = undefined
+}

packages/shell-chrome/popup.html

@@ -58,6 +58,7 @@
             </ul>
         </div>
         <button id="btnScreenshot">截图</button>
+        <button id="ToTans">翻译</button>
         <iframe src="assets/html/pomodoro/popup.html" id="pomodoro" style="border: 0; height: 400px;"></iframe>
     </div>
     <script src="assets/js/lib/jquery.min.js"></script>