Chrome Extension – Tutorial for Translators

Watch our tutorial video first if you haven’t. Parts 4-5 of the video are for translators.

To create a translation file, you need a text editor (e.g. Notepad on Windows, TextEdit on macOS, Visual Studio Code…). Ensure that you save the file in plain text (.txt) or Extensible Markup Language (.xml) format. The content file is structured in the following XML format:

<manga>
    <lang>English</lang>
    <title>Manga Title</title>
    <ep>20</ep>
    <source>https://url-of-official-manga-webpage.com</source>
    <remarks>Additional information about the manga series</remarks>
    <page number="1">
        <a1>Translated text for the dialogue bubble in zone A1</a1>
        <b3>Translated text for the dialogue bubble in zone B3</b3>
        <g4>Translated text for the dialogue bubble in zone G4</g4>
        <note>Additional remarks about P.1</note>
        <options>
            <frame position="right"/>
        </options>
    </page>
    <page number="2">
        <e5>Translated text for the dialogue bubble in zone E5</e5>
        <note>Additional remarks about P.2</note>
        <options>
            <frame position="left"/>
            <load direction="backward">
                <msg>We are back to P.2!</msg>
                <bind key="right"/>
            </load>
        </options>
    </page>
    <page number="3">
        <f1>Translated text for the dialogue bubble in zone F1</f1>
        <note>Additional remarks about P.3</note>
        <options>
            <frame position="right"/>
            <load direction="forward">
                <bind key="left"/>
            </load>
        </options>
    </page>
    <page number="4">
        <c2>Translated text for the dialogue bubble in zone C2</c2>
        <note>Additional remarks about P.4</note>
        <options>
            <frame position="left"/>
            <load direction="forward">
                <msg>Let's scroll down!</msg>
                <navigate direction="down" delta="200"/>
            </load>
        </options>
    </page>
</manga>

The elements <lang>, <title>, <ep>, <source> contain information about the target language, manga title, episode number and source URL of the manga webpage respectively. The <remarks> element allow you to include any additional information about the manga series. The actual translation is contained in the <page> element.

Note: if the content of the <source> element is “<source>local</source>” instead of a URL, the translation to be displayed on any webpage or files currently opened by Chrome

Inside a <page> element, tags <a4>, <c3>, etc. indicate that the speech bubbles are located at zones A4, C3 and so on, in a 5×7 coordinate system. The <note> element contains any additional note the translator has written for this page. The <options> block contains information that affects the UI and how the extension interacts with the manga webpage.

Inside the <options> element, the most important child element is the <frame position=”xx”/> element. The position parameter can be “left”, “right” or “center”. They indicate that the green frame for this page should be displayed on the left side, right side and center of the webpage respectively.

Screenshot

To visualise the 5×7 coordinate system (zones A1-G5), press the “calibration mode” button in our extension’s main menu to display this coordinate system on top of any manga webpage. This allows the translator to identify the location of a speech bubble easily.

Moreover, the calibration mode includes a coding assistant (in the Control Panel). You can simply select the zones where the speech bubbles are located, and the intended position of the green frame. Press “Generate skeleton”, and the code block for this page is generated in the text box below. You can directly edit the text and type your translation in it. Then, press “Copy to clipboard” to copy the content and paste it into your translation file.

Advanced:

In the tutorial for readers, we mentioned that our extension can interact with the manga webpage, such as scrolling it up and down, to sync the manga image with the translation displayed in the green frame. This is indeed managed by the script in the translation file. This script is located inside the <load> element within the <options> block.

Inside the <options> block, we see the tag <load direction=”xx”> . This is the start of the <load> element. Everything inside the <load> element is a script that tells our extension to interact with the webpage in a particular way when we switch to a certain page of the manga. The direction parameter can be “forward”, “backward” or “any”.

When direction=“forward”, the script in the <load> element is only executed when the reader switches to the page in the forward direction (e.g. if this page 3, the script will be triggered only when switching from P.2 to P.3). If direction=“backward”, the reverse is true (from P.4 back to P.3). If direction=“any”, the script is always executed regardless of direction.

Inside the <load> element, there are 3 possible types of child elements. The first one is the <msg> element. It instructs the extension to display a pop-up message when the page is loaded.

The second one is the <bind key=”xx”/> element. It allows the extension to send signals to the webpage to simulate a key press. The value of key can be “left”, “right”, “up” or “down”. They are used to simulate the press of the left, right, up and down arrow keys in the keyboard respectively.

The third possible element is the <navigate> element. It is used to scroll the webpage up and down. There are 2 parameters: direction and delta. The direction can be “up” or “down”. The delta parameter is a number, which indicates by how much the page should be scrolled. For instance, when direction=“down” and delta=“500”, the webpage should be scrolled down by 500 units.

If you find this hard to understand, watch our tutorial video again. It helps you to visualise the ideas and demonstrates the code with some more examples.