使用NEW bing翻译为你的网站添加30国语言

张小强

@Ta 2023-03-28发布，2023-03-28修改 187点击

本脚本接口摘自新edge浏览器，应该会稳定；

这是一个能自动将 html 网页自动翻译为多国语言JS脚本，只需在网页中引入下面的js，一行代码实现网页全页翻译！效果同 Chrome 自动翻译。
适用给网站快速增加多种语言切换的能力。
适合一些预算低，但是有想要多国语言的网站。

PS:本脚本由chatgpt编写，本人修改整理

引入脚本

<script src="/translate.js"></script>

执行翻译：

translatePage('en');

函数接受两个可选参数：Tolang 和 FromLang。

Tolang 参数指定翻译的目标语言。如果未指定此参数，则默认值为英语 ('en')。
FromLang 参数指定翻译的源语言。如果未指定此参数，则API将尝试自动检测源语言。

调用示例：

<ul class="language">
	<li><a onclick="translatePage('en')">English</a></li>|
	<li><a onclick="translatePage('ja')">日语</a></li>|
	<li><a onclick="translatePage('zh-TW')">繁體中文</a></li>
</ul>

更多语言代码参考https://cloud.google.com/translate/docs/languages?hl=zh-cn

使用效果：

QQ浏览器截图20230328124626.png（51.64 KB）

代码如下：

var wordArr = [], domArr = [];
function traverse(node) {
  if(!wordArr.length){
    wordArr.push({ "Text": document.title });
  }
  if (
    node.nodeType === Node.ELEMENT_NODE
    &&(node.tagName.toLowerCase() === 'head'
    || node.tagName.toLowerCase() === 'pre'
    || node.tagName.toLowerCase() === 'script'
    || node.tagName.toLowerCase() === 'textarea'
    || getComputedStyle(node).display === 'none'
    ))
    {
    return; // 排除 <head>, <pre>, <script>, <textarea> 标签和不显示元素
  }
  
  if (node.nodeType === Node.TEXT_NODE) {
    const text = node.textContent.trim();
    if (text !== '') {
      wordArr.push({ "Text": text }); // 添加文本内容到 JSON 数组中
      domArr.push(node); // 存储dom
    }
  }
  for (const child of node.childNodes) {
    traverse(child); // 递归遍历子节点
  }
}
/**
 * 将网页内容从一种语言翻译成另一种语言
 * @async
 * @param {string} Tolang - 目标语言，默认为英语 ('en')
 * @param {string} FromLang - 源语言，API 将尝试自动检测源语言
 * @returns {Promise<Object>} 翻译后的数据作为一个 JSON 对象
 */
async function translatePage(Tolang='en',FromLang) {
  if(wordArr.length){
      wordArr = [], domArr = []; 
   }
  traverse(document.body);
  let translateauth = await getTranslateAuth();
  try {
    FromLang ?`from=${FromLang}`:'';
    const response = await fetch(`https://api.cognitive.microsofttranslator.com/translate?${FromLang}&to=${Tolang}&api-version=3.0&includeSentenceLength=true`, {
      method: 'POST',
      headers: {
        'authority': 'api.cognitive.microsofttranslator.com',
        'accept': '*/*',
        'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6',
        'authorization': 'Bearer ' + translateauth,
        'content-type': 'application/json',
        'origin': window.location.origin,
        'referer': window.location.origin,
        'sec-ch-ua': '"Microsoft Edge";v="111", "Not(A:Brand";v="8", "Chromium";v="111"',
        'sec-ch-ua-mobile': '?0',
        'sec-ch-ua-platform': '"Windows"',
        'sec-fetch-dest': 'empty',
        'sec-fetch-mode': 'cors',
        'sec-fetch-site': 'cross-site',
        'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.51'
      },
      body: JSON.stringify(wordArr),
      redirect: 'follow'
    });
    if (!response.ok) {
      if (response.status === 401) {
        sessionStorage.removeItem("translateauth");
        return await translatePage();
      }
    }
    const data = await response.json();
    console.log(data);
    let translated = data.map(obj => {
        return { text: obj.translations[0].text };
    })
    translated.forEach(function (element, index) {
      if(index == 0){
         document.title = element.text;
      }else{
         domArr[index-1].textContent = element.text;
      }
    })
    wordArr = [], domArr = [];
    return data;
  } catch (error) {
    console.error(error);
  }
}

async function getTranslateAuth() {
  let translateauth = sessionStorage.getItem('translateauth');
  if (translateauth) {
    return await translateauth;
  } else {
    const response = await fetch('https://edge.microsoft.com/translate/auth', {
      method: 'GET',
      headers: {
        'authority': 'edge.microsoft.com',
        'accept': '*/*',
        'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6',
        'origin': window.location.origin,
        'referer': window.location.origin,
        'sec-ch-ua': '"Microsoft Edge";v="111", "Not(A:Brand";v="8", "Chromium";v="111"',
        'sec-ch-ua-mobile': '?0',
        'sec-ch-ua-platform': '"Windows"',
        'sec-fetch-dest': 'empty',
        'sec-fetch-mode': 'cors',
        'sec-fetch-site': 'cross-site',
        'sec-mesh-client-arch': 'x86_64',
        'sec-mesh-client-edge-channel': 'stable',
        'sec-mesh-client-edge-version': '111.0.1661.51',
        'sec-mesh-client-os': 'Windows',
        'sec-mesh-client-os-version': '10.0.18362',
        'sec-mesh-client-webview': '0',
        'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.51'
      }
    });
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.text();
    sessionStorage.setItem('translateauth', data);
    return data;
  }
}

1

大尨

@Ta / 2023-03-28 / 样 / 源

666
2

张小强

@Ta / 2023-03-28 / 样 / 源

@大尨，试试
3

艾木友尔尔巴

@Ta / 2023-03-28 / 样 / 源

@张小强，写成via插件全网调用可行？？？
4

张小强

@Ta / 2023-03-28 / 样 / 源

@艾木友尔尔巴， VIa本身就自带翻译功能没有必要，这个是为一些外贸网站搞的
5

艾木友尔尔巴

@Ta / 2023-03-28 / 样 / 源

@张小强，那插件要科学和魔法才能用。比较鸡肋
6

张小强

@Ta / 2023-03-30 / 样 / 源

@ChatGPT 使用Web Serial API编写一个网页版的串口助手，

ChatGPT

@Ta / 2023-03-30 / 样 / 源

@张小强，Web Serial API是一种新的Web API，允许Web应用程序直接访问串口设备。借助Web Serial API，您可以轻松地开发一个网页版的串口助手，用于与串口设备进行通信。

以下是一个使用Web Serial API编写的网页版串口助手的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web Serial API Demo</title>
  </head>
  <body>
    <button id="connectButton">连接串口</button>
    <button id="disconnectButton">断开连接</button>
    <select id="serialPortSelect"></select>
    <br>
    <textarea id="inputTextarea" rows="10" cols="50"></textarea>
    <br>
    <button id="sendButton">发送</button>
    <textarea id="outputTextarea" rows="10" cols="50"></textarea>

    <script>
      let port;

      // 列出可用的串口设备
      async function listSerialPorts() {
        const ports = await navigator.serial.getPorts();
        const portSelect = document.getElementById('serialPortSelect');
        portSelect.innerHTML = '';
        ports.forEach(port => {
          const option = document.createElement('option');
          option.value = port.serialNumber;
          option.text = `${port.serialNumber} (${port.manufacturer})`;
          portSelect.add(option);
        });
      }

      // 连接串口设备
      async function connectSerialPort() {
        const portSelect = document.getElementById('serialPortSelect');
        const portName = portSelect.value;
        if (portName === '') {
          alert('请选择一个串口设备');
          return;
        }
        try {
          port = await navigator.serial.requestPort({ filters: [{ usbSerialNumber: portName }] });
          await port.open({ baudRate: 9600 });
          port.addEventListener('readable', handlePortData);
          document.getElementById('connectButton').disabled = true;
          document.getElementById('disconnectButton').disabled = false;
          document.getElementById('serialPortSelect').disabled = true;
        } catch (error) {
          alert(`连接失败：${error}`);
        }
      }

      // 断开串口连接
      async function disconnectSerialPort() {
        if (port) {
          await port.close();
          port.removeEventListener('readable', handlePortData);
          port = null;
          document.getElementById('connectButton').disabled = false;
          document.getElementById('disconnectButton').disabled = true;
          document.getElementById('serialPortSelect').disabled = false;
        }
      }

      // 处理串口接收数据
      function handlePortData() {
        const reader = port.readable.getReader();
        reader.read().then(({ value, done }) => {
          if (!done) {
            const decoder = new TextDecoder();
            const data = decoder.decode(value);
            const outputTextarea = document.getElementById('outputTextarea');
            outputTextarea.value += data;
            outputTextarea.scrollTop = outputTextarea.scrollHeight;
          }
          reader.releaseLock();
        });
      }

      // 发送数据到串口
      function sendSerialData() {
        const inputTextarea = document.getElementById('inputTextarea');
        const outputTextarea = document.getElementById('outputTextarea');
        const data = inputTextarea.value;
        if (port && port.writable) {
          port.write(data);
          outputTextarea.value += data;
          outputTextarea.scrollTop = outputTextarea.scrollHeight;
        } else {
          alert('请先连接串口设备

8

张小强

@Ta / 2023-03-30 / 样 / 源

@ChatGPT，继续
9

ChatGPT

@Ta / 2023-03-30 / 样 / 源
@张小强，
');
}
}
```
  // 初始化页面
  window.addEventListener('DOMContentLoaded', () => {
    // 列出可用的串口设备
    listSerialPorts();

    // 处理连接和断开连接按钮的点击事件
    document.getElementById('connectButton').addEventListener('click', connectSerialPort);
    document.getElementById('disconnectButton').addEventListener('click', disconnectSerialPort);

    // 处理发送按钮的点击事件
    document.getElementById('sendButton').addEventListener('click', sendSerialData);

    // 监听串口设备连接状态变化
    navigator.serial.addEventListener('connect', listSerialPorts);
    navigator.serial.addEventListener('disconnect', listSerialPorts);
  });
</script>
```
</body>
</html>
```

上述代码中，我们使用了Web Serial API提供的navigator.serial接口来访问串口设备。我们首先使用navigator.serial.getPorts()函数列出可用的串口设备，并将它们添加到下拉框中供用户选择。用户选择设备后，点击“连接串口”按钮，调用navigator.serial.requestPort()函数请求打开指定的串口设备，并指定波特率为9600。如果连接成功，则监听port对象的readable事件，并在事件处理函数中读取串口数据并显示到输出框中。用户可以在输入框中输入要发送的数据，并点击“发送”按钮发送到串口设备中。

需要注意的是，Web Serial API目前仅支持Chrome浏览器，并且需要在浏览器中启用实验性功能。此外，使用Web Serial API需要使用HTTPS协议访问页面，或者在localhost环境下访问。