2. session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
  3.     callback({ responseHeaders: Object.assign({
  4.         "Content-Security-Policy": [ "default-src 'self'" ]
  5.     }, details.responseHeaders)});
  6. });
  8. `default-src 'self'; connect-src 'self' https://apifree.com`

default-src 'self'; connect-src 'self' ws:

electron中实现跨域请求

很简单，在Electron的BrowserWindow模块中配置这样一个参数：

  1. // Create the browser window.
  2.   mainWindow = new BrowserWindow({
  3.     width: 800,
  4.     height: 600,
  5.     webPreferences: {
  6.       nodeIntegration: true,
  7.       webSecurity: false
  8.     }
  9.   })
  11.   // and load the index.html of the app.
  12.   //mainWindow.loadURL('window.html')
  13.   mainWindow.loadFile('https://www.baidu.com')

webSecurity是什么意思呢？顾名思义，他是设置web安全性，如果参数设置为 false，它将禁用相同地方的规则 (通常测试服), 并且如果有2个非用户设置的参数，就设置 allowDisplayingInsecureContent 和 allowRunningInsecureContent的值为true。 （webSecurity的默认值为true）

allowDisplayingInsecureContent表示是否允许一个使用 https的界面来展示由 http URLs 传过来的资源。默认false。
allowRunningInsecureContent表示是否允许一个使用 https的界面来渲染由 http URLs 提交的html，css，javascript。默认为 false。
————————————————
版权声明：本文为CSDN博主「zhichaosong」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zhichaosong/article/details/89186356

  1. window.$ = window.jQuery = require('jquery');
  3. // ==UserScript==
  4. // @name         Translator for Whatsapp
  5. // @namespace    http://tampermonkey.net/
  6. // @homepage     https://greasyfork.org/zh-CN/scripts/28218-translator-for-whatsapp
  7. // @version      2.4.3
  8. // @description  Translator for Whatsapp web
  9. // @author       JedLiu
  10. // @match        https://web.whatsapp.com/*
  11. // @run-at       document-start
  12. // @grant        GM_setValue
  13. // @grant        GM_getValue
  14. // @grant        GM_xmlhttpRequest
  15. // @connect      api-free.deepl.com
  16. // @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
  17. // ==/UserScript==
  19. // DeepL需要修改：@connect      api-free.deepl.com
  20. // 语言部分修改为：{id:'zh', name:'Chinese'},
  21. (function() {
  22.     'use strict';
  23.     /*************************************************************
  25.            注意:
  26.            下面是所有支持的语言
  27.            如果要将某种语言包含进翻译范围，删除该语言前面的 // 即可
  29.     *************************************************************/
  30.     var all_languages = [
  31.         {id:'zh', name:'Chinese'},
  32.         // {id:'zh-CN', name:'Chinese Simplified'},
  33.         //{id:'zh-TW', name:'Chinese Traditional'},
  34.         //{id:'af', name:'Afrikaans'},
  35.         //{id:'sq', name:'Albanian'},
  36.         // {id:'ar', name:'Arabic'},
  37.         //{id:'hy', name:'Armenian'},
  38.         //{id:'az', name:'Azerbaijani'},
  39.         //{id:'eu', name:'Basque'},
  40.         //{id:'be', name:'Belarusian'},
  41.         //{id:'bn', name:'Bengali'},
  42.         //{id:'bs', name:'Bosnian'},
  43.         //{id:'bg', name:'Bulgarian'},
  44.         //{id:'ca', name:'Catalan'},
  45.         //{id:'ceb', name:'Cebuano'},
  46.         //{id:'ny', name:'Chichewa'},
  47.         //{id:'co', name:'Corsican'},
  48.         //{id:'hr', name:'Croatian'},
  49.         //{id:'cs', name:'Czech'},
  50.         //{id:'da', name:'Danish'},
  51.         //{id:'nl', name:'Dutch'},
  52.         {id:'en', name:'English'},
  53.         //{id:'eo', name:'Esperanto'},
  54.         //{id:'et', name:'Estonian'},
  55.         //{id:'tl', name:'Filipino'},
  56.         //{id:'fi', name:'Finnish'},
  57.         {id:'fr', name:'French'},
  58.         //{id:'fy', name:'Frisian'},
  59.         //{id:'gl', name:'Galician'},
  60.         //{id:'ka', name:'Georgian'},
  61.         {id:'de', name:'German'},
  62.         //{id:'el', name:'Greek'},
  63.         //{id:'gu', name:'Gujarati'},
  64.         //{id:'ht', name:'Haitian Creole'},
  65.         //{id:'ha', name:'Hausa'},
  66.         //{id:'haw', name:'Hawaiian'},
  67.         //{id:'iw', name:'Hebrew'},
  68.         {id:'hi', name:'Hindi'},
  69.         //{id:'hmn', name:'Hmong'},
  70.         //{id:'hu', name:'Hungarian'},
  71.         //{id:'is', name:'Icelandic'},
  72.         //{id:'ig', name:'Igbo'},
  73.         //{id:'id', name:'Indonesian'},
  74.         //{id:'ga', name:'Irish'},
  75.         {id:'it', name:'Italian'},
  76.         {id:'ja', name:'Japanese'},
  77.         //{id:'jw', name:'Javanese'},
  78.         //{id:'kn', name:'Kannada'},
  79.         //{id:'kk', name:'Kazakh'},
  80.         //{id:'km', name:'Khmer'},
  81.         {id:'ko', name:'Korean'},
  82.         //{id:'ku', name:'Kurdish (Kurmanji)'},
  83.         //{id:'ky', name:'Kyrgyz'},
  84.         //{id:'lo', name:'Lao'},
  85.         //{id:'la', name:'Latin'},
  86.         //{id:'lv', name:'Latvian'},
  87.         //{id:'lt', name:'Lithuanian'},
  88.         //{id:'lb', name:'Luxembourgish'},
  89.         //{id:'mk', name:'Macedonian'},
  90.         //{id:'mg', name:'Malagasy'},
  91.         //{id:'ms', name:'Malay'},
  92.         //{id:'ml', name:'Malayalam'},
  93.         //{id:'mt', name:'Maltese'},
  94.         //{id:'mi', name:'Maori'},
  95.         //{id:'mr', name:'Marathi'},
  96.         //{id:'mn', name:'Mongolian'},
  97.         //{id:'my', name:'Myanmar (Burmese)'},
  98.         //{id:'ne', name:'Nepali'},
  99.         //{id:'no', name:'Norwegian'},
  100.         //{id:'ps', name:'Pashto'},
  101.         //{id:'fa', name:'Persian'},
  102.         //{id:'pl', name:'Polish'},
  103.         {id:'pt', name:'Portuguese'},
  104.         //{id:'ma', name:'Punjabi'},
  105.         //{id:'ro', name:'Romanian'},
  106.         {id:'ru', name:'Russian'},
  107.         //{id:'sm', name:'Samoan'},
  108.         //{id:'gd', name:'Scots Gaelic'},
  109.         //{id:'sr', name:'Serbian'},
  110.         //{id:'st', name:'Sesotho'},
  111.         //{id:'sn', name:'Shona'},
  112.         //{id:'sd', name:'Sindhi'},
  113.         //{id:'si', name:'Sinhala'},
  114.         //{id:'sk', name:'Slovak'},
  115.         //{id:'sl', name:'Slovenian'},
  116.         //{id:'so', name:'Somali'},
  117.         {id:'es', name:'Spanish'},
  118.         //{id:'su', name:'Sudanese'},
  119.         //{id:'sw', name:'Swahili'},
  120.         //{id:'sv', name:'Swedish'},
  121.         //{id:'tg', name:'Tajik'},
  122.         //{id:'ta', name:'Tamil'},
  123.         //{id:'te', name:'Telugu'},
  124.         //{id:'th', name:'Thai'},
  125.         //{id:'tr', name:'Turkish'},
  126.         //{id:'uk', name:'Ukrainian'},
  127.         //{id:'ur', name:'Urdu'},
  128.         //{id:'uz', name:'Uzbek'},
  129.         {id:'vi', name:'Vietnamese'},
  130.         //{id:'cy', name:'Welsh'},
  131.         //{id:'xh', name:'Xhosa'},
  132.         //{id:'yi', name:'Yiddish'},
  133.         //{id:'yo', name:'Yoruba'},
  134.         //{id:'zu', name:'Zulu'}
  135.     ];
  137.     var SOURCE_LANGUAGE = 'zh',
  138.         TRANSLATED_LANGUAGE = 'en';
  140.     var $ = $ || window.$,
  141.         addListenerInterval = null,
  142.         translateInterval = null,
  143.         translateTimeout = null,
  144.         translate_enabled = true,
  145.         translate_ready = false,
  146.         translate_string = '',
  147.         custom_style = '.language_selected{background-color: #00bfa5;}',
  148.         image_uri = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFZklEQVR42sWXe0xTVxzHv5drWXkIKBQfE61Y2DIyR3Sy+FrqRgRF1IFD54IawU03dUE2I3ukxTgqPuYjK6KOZRndnFPYJoEpcUunokNxYnFT4wOQp9A/BshD4N6zc1sKvaWV0C7xhEt/59Hf93N+5/c7uWXwlBtjMV6JeBnz5r0KhmGG/BIhxKYPtLW1Qaf7Aa30c9gA4eFTof+9KJ5l2WzaDRhakIhs+sdT6/T5C5cSFi9JaB82wHsb1iFz5/ZmJ8UFy2Jv9JdN1DoLQGwnrcXWvbsJsYsWmB574n1jan/ZpHSXAU4VFA0CKCj4FaGhCjwXGiJI9s8LY6Ehij4gog4IlLsOkPzORptQiDvEajwmJhqLYqL6AWRjJrsGIDjiOF6kah2Jzs4upKRuwxtLYxE1/3WLcD9A4Nhg5wFsE+7q1Wuoq2tAZKQSUqnUdOaGihvQao8gdcsmKBTBgwDGjJviHMBOTbo40NRhebkBWYe+wpLFMViwYD4d47F7zwF0d3cjbVtq/zprgLHjFcMH2LAhGZmagRywympos47i5s1b2PpRCm78/Q9OnSrCh6mbIZdPtBUHzxP1+AkhrgHY1nl7ewcyd+9Da2sbOjs6sGLFMsydM8ueuCkCzwaFOg9g75Lp6elBru4YSkuvwF3ijqTk1XAPDEdF3TOgmn3AZoDG1hH6kkov/QCY7RGZPBtbKs9/c/v4inbucWsfwPpkUQ5YFldVV+Pb3GMwNhuR8GYcymhSGh7wePTCDirJ2LsJRZ+Dx/vtouritJjGUu1gAGFRVfUDFBf/RqugHMHBcqxKfAsyWQDdJY/ss904V69wRVx4+No/NGz9+Z1iAMuiO3fuQvfdcURHRSIiYroo20+W+yLvuo8r4ia77pyGsQJIgiYjnVg7fdwL3Gtm8fyYHtE5mgF8HYrHvsRhpBQouQPcb4ZDEAGg4UKmGWC9APB5Oken3Czi2wtHoqJ+BD6JbsX0oMf9DgRx4bEnPmEUQXZiL4RXCv0tQFPIOIwC3f0AwPLl8cjO2l9IJxZaxP+qkZhCL2EJPp7fgmlBXaZMF8TzDb52w540h8PicIILdPezFMDKwwxaOuxXBBUfAJBIJMjSfuH12jzlmtzLHgG/XJcq3T39lJaqkDId6u3R9Qj07oXOMFlZUumttBVn3QhykzhanoDuIoNDqwgO64GTVwaLC02IQGPJLth9/5oYd1w1clyY2lsmN/Vr9RlMnT7DZM/57KGKlfqqbRNubghBWgyPT/MZXL4PHHybwENCo5IDel+IxS0ReCIA6+6t9vSfBAHCGmBhRqPqEe+nts32jDgOE0YDiUcYcPSoFk4lSIli8IGOh6FGLG4G2MU8vOgAYErCCRXv5qkWbAHiRb8qhmm6aJpbtHKLqvi2p9o6w8f6EOSs5XGvCbh011xJnu7AshkMzlQQaAo4kbjw0N1TgN32AdIOnJHPnDmbniAm2Zvvpf5+vsbQMjU7XTObR0IEUFHTV8Z96wJ9gNFeQPxBDo+6xFeyANB0yQGAj18AdmQVyuWKsCdCHCsFGlpo8q2jZfUvkPK9OOGm0W/uXcli32kOP5Vxomqg4acAe+DwR8BQEMIR5JURzJhMoF4KaM8S5F8Vh9mNes/bzMLYRrD2aI8Ijoafaf7zCQAWCNX+fPm4oODVljEvb19lpZFRCuI9nKOrVpxw9ubp7ocGsNdSc2pVl2t91a6IC30q7hzAjK0177NSvy9dEafNSBNQZizdO3wARdzXXv5hy36kzqKFY3ZGnPDc+qoTS/I6G8qGD8C4SeAfFg/WY5TpzZ2Y/1l+qgzYZKAcbd+2O+pK0dVkMPsbLsD/3f4DRTYAbJ65vloAAAAASUVORK5CYII=',
  149.         custom_html = '<div class="block-compose tranlate-bottom"><div tabindex="-1" class="input-container" style="padding-top:0px;padding-bottom:0px;padding-left:0px;"><button title="单击获取帮助！" class="trans_help_btn" style="float:left"><img alt="Translator" draggable="false" src="' + image_uri + '" style="width:30px;height:30px;padding-left:15px;padding-right:30px;padding-bottom:8px;"></button><div class="input" dir="auto" style="padding-top:6px;"></div></div></div>',
  150.         html_language1 = '<div class="menu-item" style="display:table"><button title="单击获取帮助！" class="trans_help_btn"><img alt="Translator" draggable="false" src="data:'+ image_uri +'" style="width:32px;height:32px;"/></button></div>',
  151.         username = '',
  152.         is_debug = true,
  153.         lan_select = '',
  154.         help_url = 'https://greasyfork.org/zh-CN/scripts/28218-translator-for-whatsapp';
  157.     // 生成 菜单 html
  158.     for(var i=0;i<all_languages.length;i++){
  159.         lan_select = lan_select + '<option value="'+ all_languages[i].id +'">' + all_languages[i].name +'</option>';
  160.     }
  162.     var lan_select_1 = '<span style="padding-left:5px;padding-right:5px;color:green;font-size:10pt;">From:</span><select class="languageSelect1" style="padding-right:5px;width: 126px; text-align-last:center;">' + lan_select + '</select>';
  163.     var lan_select_2 = '<span style="padding-left:20px;padding-right:5px;color:green;font-size:10pt;">To:</span><select class="languageSelect" style="padding-right:5px;width: 126px; text-align-last:center;border-bottom-width: 0px !important;"><option value="off">OFF</option>' + lan_select + '</select>';
  164.     html_language1 = html_language1 + '<div style="display:table;"><div style="display:table-row">'+ lan_select_1 +'</div><div style="display:table-row">'+ lan_select_2 +'</div></div>';
  166.     //插入 style 样式
  167.     var customStyleNode = document.createElement('style');
  168.     customStyleNode.textContent = custom_style;
  169.     document.querySelector('head').appendChild(customStyleNode);
  171.     //替换所有函数
  172.     function replaceAll(str, find, replace) {
  173.         return str.replace(new RegExp(find, 'g'), replace);
  174.     }
  176.     //显示 debug 信息
  177.     var debugMessage = function(mes){
  178.         if(is_debug){
  179.             console.info(mes);
  180.         }
  181.     };
  183.     //显示 error 消息
  184.     var showError = function(err){
  185.         alert(err);
  186.         console.error(err);
  187.     };
  189.     //translate 翻译函数
  190.     //sl - source language
  191.     //dl - target language
  192.     //txt - 待翻译内容
  193.     //cb - 翻译后回调
  194.     var translate = function(sl,dl,txt,cb){
  195.         debugMessage('原文:'+ txt);
  196.         GM_xmlhttpRequest({
  197.             method: "GET",
  198.             // url: "https://translate.googleapis.com/translate_a/single?client=gtx&sl="+ sl + "&tl=" + dl +"&dt=t&q=" + encodeURI(txt),
  199.             url: "https://api-free.deepl.com/v2/translate?auth_key=79d60834-077e-df8d-5033-a8a43412f476:fx&source_lang="+ sl +"&target_lang="+ dl +"&text="+ encodeURI(txt),
  200.             onload: function(response) {
  201.                 //去除 \n
  202.                 // var _r_text = replaceAll(response.responseText, '\n"', '"');
  203.                 // var _r = eval(_r_text);
  204.                 // translate_string = '';
  205.                 // for(var i=0; i<_r[0].length;i++){
  206.                 //     translate_string += _r[0][i][0];
  207.                 // }
  208.                     var json_obj={};
  209.                     json_obj = JSON.parse(response.responseText);
  210.                     translate_string = json_obj.translations[0].text;
  211.                     console.log(translate_string);
  212.                 debugMessage('待翻译内容：'+translate_string);
  213.                 cb.apply({text: translate_string});
  214.             }
  215.         });
  216.     };
  218.     //绑定元素，以获取用户输入
  219.     var onInput = function(){
  220.         var $_translate_input_1 = $('.tranlate-bottom').find('.input');
  221.         $_translate_input_1.html('正在输入...');
  222.         translate_ready = false;
  223.         // var _this = $(this);
  224.         // delay(function(){
  225.         //     var _input = $.trim(_this.text());
  226.         //     if(_input){
  227.         //         translate(SOURCE_LANGUAGE, TRANSLATED_LANGUAGE, _input, function(){
  228.         //             $_translate_input_1.html(this.text);
  229.         //             translate_ready = true;
  230.         //         });
  231.         //     }else{
  232.         //         $_translate_input_1.html('');
  233.         //     }
  234.         // }, 1000);
  235.     };
  237.     //绑定元素，以发送翻译好的内容（xyx++ 按下回车键发送消息）
  238.     //Updated: 2018-07-30
  239.     var onEnterKeyPressed = function( event ) {
  240.         if (event.which == 13 && translate_enabled) {
  242.             var $_translate_input_1 = $('.tranlate-bottom').find('.input');
  243.             $_translate_input_1.html('正在输入...');
  244.             var _this = $(this);           
  245.             var _input = $.trim(_this.text());
  246.             if(_input){
  247.                 translate(SOURCE_LANGUAGE, TRANSLATED_LANGUAGE, _input, function(){
  248.                     $_translate_input_1.html(this.text);
  249.                     translate_ready = true;
  250.                 });
  251.             }else{
  252.                 $_translate_input_1.html('');
  253.             }   
  257.             debugMessage('等待翻译');
  258.             event.preventDefault();
  259.             // var _this = $(this);
  260.             translateInterval = setInterval(function(){
  261.                 if(translate_ready){
  262.                     debugMessage('正在发送消息：'+translate_string);
  263.                     sendTranslatedMessage(_this, translate_string);
  264.                     debugMessage('消息发送成功！');
  265.                     clearInterval(translateInterval);
  266.                 }
  267.             }, 100);
  268.         }
  269.     };
  271.     // 发送翻译好的消息
  272.     //Updated: 2018-07-31
  273.     var sendTranslatedMessage = function(inputTarget, message){
  274.         translate_string = '';
  275.         inputTarget.focus();
  276.         document.execCommand("selectAll");
  277.         document.execCommand("insertText", false, message);
  278.         if($('footer button:has(span):last span').data('icon') == 'send'){
  279.             $('footer button:has(span):last').click();
  280.         }else{
  281.             showError('无法发送翻译好的消息！');
  282.         }
  283.         translate_ready = false;
  284.     }
  286.     // 添加翻译绑定
  287.     var addTranslateFunc = function(selectChange){
  288.         if(!username){
  289.             showError('无法获取 username');
  290.             return;
  291.         }
  293.         if(selectChange){
  294.             GM_setValue(username, $('.languageSelect').val());
  295.             GM_setValue(username+'_o', $('.languageSelect1').val());
  296.         }
  298.         TRANSLATED_LANGUAGE = GM_getValue(username) ? GM_getValue(username) : TRANSLATED_LANGUAGE;
  299.         SOURCE_LANGUAGE = GM_getValue(username+'_o') ? GM_getValue(username+'_o') : SOURCE_LANGUAGE;
  302.         // 菜单 Menu
  303.         debugMessage('原语言：' + SOURCE_LANGUAGE + ', 目标语言：'+ TRANSLATED_LANGUAGE);
  304.         $('.languageSelect').val(TRANSLATED_LANGUAGE);
  305.         $('.languageSelect1').val(SOURCE_LANGUAGE);
  307.         // 添加翻译 input 控件
  308.         var $_input_body = $('footer div.copyable-text.selectable-text');
  309.         if(TRANSLATED_LANGUAGE !== 'off' && $('.tranlate-bottom').length === 0){
  310.             $('footer').append($(custom_html));
  311.             if($_input_body === null || $_input_body.length !== 1){
  312.                 showError('Whatsapp 翻译器插件绑定错误！');
  313.             }else{
  314.                 $_input_body.on('input', onInput)
  315.                     .on('keydown', onEnterKeyPressed);
  316.             }
  318.             // 翻译已发送或之前接收到的消息
  319.             $('.copyable-area').on('click', '.selectable-text', function(){
  320.                 if(TRANSLATED_LANGUAGE!='off'){
  321.                     var $_t_this = $(this);
  322.                     translate('', SOURCE_LANGUAGE, $(this).text(), function(){ // 使用 DeepL 时 第一个参数留空表示自动检测语言
  323.                         $_t_this.html(this.text);
  324.                     });
  325.                 }
  326.             });
  328.             // 访问帮助页面
  329.             $('.trans_help_btn').on('click', function(){
  330.                 window.open(help_url,'_blank');
  331.             });
  332.         }else if(TRANSLATED_LANGUAGE === 'off' && $('.tranlate-bottom').length !== 0){
  333.             // 移除绑定
  334.             $('.tranlate-bottom').remove();
  335.             $_input_body.off('input', onInput)
  336.                 .off('keydown', onEnterKeyPressed);
  337.         }
  338.     };
  340.     // 当用户激活一个新聊天窗口时增加一个监听器
  341.     addListenerInterval = setInterval(function(){
  342.         var $_div_chat = $('#pane-side');
  343.         //console.log('div_chat_length', $_div_chat.length);
  344.         if($_div_chat.length){
  346.             //console.log('found #pane-side');
  348.             var contacts = document.querySelector('div[role="grid"]').children;
  349.             if(!contacts || contacts.length === 0){
  350.                 showError('无法获取联系人侧边栏！');
  351.                 return;
  352.             }
  354.             const selector = contacts[0].className.split(' ').join('.');
  355.             console.log('选择器: div.'+selector);
  357.             //更新会经常导致这个地方需要修改
  358.             $('#pane-side').on('click','div.'+selector, function(){
  360.                 // 获取 username
  361.                 //username = escape($(this).find('.chat-title').text());
  362.                 console.info($(this));
  363.                 var _tusername = '';
  364.                 $(this).find('span').each(function(i,x){
  365.                     if(x.hasAttribute('title')) {
  366.                         //console.info(x.title);
  367.                         _tusername = x.title;
  368.                         return false;
  369.                     }
  370.                 });
  371.                 if(_tusername !== ''){username = escape(_tusername);}
  372.                 else{showError('无法获取用户名！');}
  374.                 debugMessage('单击了聊天菜单！');
  376.                 // 添加了翻译输入控件后返回
  377.                 if($('.languageSelect').length>0){return;}
  379.                 var $header = $('#main header div:first').next();
  380.                 if($header.length != 1){showError('无法插入翻译菜单');}
  381.                 $header.after($(html_language1));
  383.                 // 绑定语言选择的 change 事件
  384.                 $('.languageSelect').on('change', function(){
  385.                     addTranslateFunc(true);
  386.                 });
  387.                 $('.languageSelect1').on('change', function(){
  388.                     addTranslateFunc(true);
  389.                 });
  391.                 // 应用 translate 函数
  392.                 addTranslateFunc();
  393.             });
  395.             clearInterval(addListenerInterval);
  396.         }
  397.     }, 1000);
  399.     // delay 函数
  400.     var delay = (function(){
  401.         var timer = 0;
  402.         return function(callback, ms){
  403.             clearTimeout (timer);
  404.             timer = setTimeout(callback, ms);
  405.         };
  406.     })();
  407. })();