使用electron进行子页面全文翻译--【Foam番茄】

最近在用electron开发应用被无情提了全文翻译的需求（黑人问号？？？）

有需求就得解决

当时拿到需求第一想法百度，百度，百度

所以第一个结果出来了

1.使用electron直接加载chrome的crx 扩展插件

去谷歌应用商店直接找到这个插件

记住下面的id

一般在这个目录：C:Users12168AppDataLocalGoogleChromeUser DataDefaultExtensions

然后使用：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, youll 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

但是我是需要在子页面进行翻译，所以必须在子页面添加翻译

发现这样编写根本实现不了插入js，在万能的群友推荐下瞄准了webview标签，用了之后是真的香

<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);
        }
        }
    `)
}

最后贴上子界面成功翻译的图片