Custom translate source (Webpage Translation)

[chunibyocola]

You can add translate source for webpage translation which built by yourself or others in the Sc Translator Options page.

If you want your webpage get translated by not only Google and Microsoft Webpage Translator but also DeepL and the others, you should use this feature.

Build your translate source (Based on Node.js)

Initialize project

Environment (The environment that I develop this example):

OS: Windows 11
Yarn: 1.22.7
Node: v16.13.0

Scripts:

mkdir server-example
cd server-example
yarn
yarn add express body-parser

Create a file named index.js in folder server-example.

Add "main": "index.js" and "type": "module" in package.json:

{
  "main": "index.js",
  "type": "module",
  "dependencies": { ... }
}

Copy the codes in index.js:

import express from 'express';
import bodyParser from 'body-parser';

const app = express();
const port = 3000;

// handle the CORS things
app.all('*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', '*');
    res.header('Access-Control-Allow-Methods', 'POST,OPTIONS');
    res.header('Content-Type', 'application/json');

    next();
});

app.use(bodyParser.json());

// The language codes map that your server supports
const supportedTargetLangCodes = {
    'en': 'English',
    'ja': 'Japanese',
    'zh-CN': 'Chinese'
};

/**
 * @param { { paragraphs: string[][]; targetLanguage: string; } } params
 * @returns { Promise<{ result: { translations: string[]; comparisons?: string[]; }[] } | { code: string }> }
 */
const translateSource1 = async (params) => {
    return {
        result: params.paragraphs.map((paragraph) => ({
            translations: paragraph.map((_, index) => (`Part ${++index} `))
        }))
    };
};

app.post('/translateSource1', async (req, res) => {
    let { paragraphs, targetLanguage } = req.body;

    if (!supportedTargetLangCodes[targetLanguage]) {
        res.send({ code: 'LANGUAGE_NOT_SOPPORTED' });
        return;
    }

    const data = await translateSource1({ paragraphs, targetLanguage });
    res.send(data);

    return;
});

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`);
});

Run this project:

node index.js

Explanation

supportedTargetLangCodes

supportedTargetLangCodes is a map to check the language that server supports or not from client's request.
The language code from extension could only be one of the language codes map except auto.

Request body from client

You can see there is deconstruct syntax in app.post:

let { paragraphs, targetLanguage } = req.body;

The request body from client will follow the type:

type FetchCustomSourceJSON = {
    paragraphs: string[][];
    targetLanguage: string;
};

How Sc Translator calculate paragraphs:

HTML from webpage like:

<div>
    <p>This <span>is</span> a sentence.</p>
    <p>This <span>is another sentence.</span></p>
</div>

Will be converted to (paragraphs):

[
    ["This ", "is", " a sentence."]
    ["This ", "is another sentence."]
]

Errors

If there are errors happened in server or you want to tell user something, you can send fixed strings to client like:

res.send({ code: 'LANGUAGE_NOT_SOPPORTED' });
return;

or

res.send({ code: 'NO_RESULT' });
return;

, etc.

You can also send sentence like:

res.send({ code: 'The things I want to tell.' });
return;

Don't assign to code with anything if there are no errors!

Response

Response from server must follow the type:

type ResultFromCustomSource = {
    result: { translations: string[]; comparisons?: string[]; }[];
} | {
    code: string;
};

And the length of result must be the same as the length of paragraphs.

translations in item of result

translations must be an array of strings and must be the same length as the item's of paragraphs. translations will be displayed in "Original Text + Translation mode" (comparisons is undefined) and "Translation only mode".

comparisons in item of result

comparisons is an optional param. When comparisons is not undefined, comparisons will be displayed in "Original Text + Translation mode".

What if my translate source doesn't support XML/HTML format translating?

If the item of paragraphs contains 3 string like:

["This ", "is", " a sentence."]

You can response with translated Chinese in two empty string and a translation like:

{
    translations: ['', '', '这是一个句子。']
}

With this situation, you should not make Sc Translator display the translations in "Translation only mode" way.

[Maryisbest]

完了，不会

[kongccc]

能否将这部分修改的更加便捷一点, 例如提供如彩云小译的token 或者百度的tokenid之类的即可实现对接, 因为本地起一个这样的翻译服务实在不现实