使用electron進行子頁面全文翻譯--【Foam番茄】

最近在用electron開發應用被無情提了全文翻譯的需求（黑人問號？？？）

有需求就得解決

當時拿到需求第一想法百度，百度，百度

所以第一個結果出來了

1.使用electron直接載入chrome的crx 擴充套件外掛

去谷歌應用商店直接找到這個外掛

記住下面的id

一般在這個目錄：C:\Users\12168\AppData\Local\Google\Chrome\User Data\Default\Extensions

然後使用：BrowserWindow.addExtension(“你的路徑”),新版本的electron會提示addExtension和addDevToolsExtension已經過時了，並且會推薦你使用ses.loadExtension(path)

那麼我們就直接轉到session模組檢視

const { app, session } = require('electron')
const path = require('path')

app.on('ready', async () => {
  await session.defaultSession.loadExtension(path.join(__dirname, 'react-devtools'))
  // Note that in order to use the React DevTools extension, you'll need to
  // download and unzip a copy of the extension.
})

我們直接給出自己的絕對路徑先進行嘗試

session.defaultSession.loadExtension("C://Users//12168//AppData//Local//Google//Chrome//User Data//Profile 1//Extensions//aapbdbdomjkkjkaonfhkkikfgjllcleb//2.0.9_0")

使用:session.defaultSession.getAllExtensions()檢視所有已經載入的列表

然後問題來了

雖然外掛載入進去了，但是我們回到文件看看，electron官方已經表明只完美支援以下外掛

所以這種引入外掛的全域性翻譯方法行不通，這時候，大佬出現了

對沒錯，我們直接通過引用谷歌的js來進行頁面全域性翻譯，直接在前端介面完成，不在node裡面完成

<meta name="google-translate-customization" content="9f841e7780177523-3214ceb76f765f38-gc38c6fe6f9d06436-c"></meta>

<div id="google_translate_element">
</div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
  }
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

由於提供的js需要翻牆，我們直接把尾綴改為cn,https://translate.google.cn

但是我是需要在子頁面進行翻譯，所以必須在子頁面新增翻譯

之前子頁面我直接用的BrowserView，通過ipc轉發執行動態新增，win.getSize()動態獲取視窗大小，win.setBrowserView()，實現頁面動態切換

發現這樣編寫根本實現不了插入js，在萬能的群友推薦下瞄準了webview標籤，用了之後是真的香

直接輸入地址，然後用id獲取視窗，httpreferrer是地址來源，用useragent來偽裝開啟的方式

<webview  id="caInput" 
         src="http://www.ic.gc.ca/app/opic-cipo/trdmrks/srch/home?lang=eng" 
         httpreferrer="http://www.ic.gc.ca" 
         useragent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
         style="display:inline-flex; width:100%; height:100vh">
</webview>

可以直接獲取webview的id然後執行webview.executeJavaScript進行頁面侵入，在中間匯入js和執行方法

// 頁內翻譯
Translates(val,val2,val3){
    var webview= document.querySelector('#'+val)
    webview.executeJavaScript(`
        console.log(document.querySelector("#google_translate_element_foam"))
        if(!document.querySelector("#google_translate_element_foam")){
        console.log("載入")
        var script = document.createElement('script');
        script.setAttribute('type','text/javascript');
        script.setAttribute('src',"https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit");
        document.getElementsByTagName('head')[0].appendChild(script);

        var btn=document.createElement('div');
        btn.setAttribute('id','google_translate_element_foam');
        btn.setAttribute('style','position: absolute;');
        document.querySelector("${val2}").appendChild(btn);
        function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: '${val3}', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element_foam');
        }
        }
    `)
}

最後貼上子介面成功翻譯的圖片