Configure a Translation Plugin

The SDK supports third-party text-highlight translation plugins. You can use the select-text event to activate the browser’s text-highlight translation plugin. This example uses the Chrome Saladict plugin to listen for selection events and show a popup dictionary or page translator.

1. Enable the Saladict plugin in chrome://extensions.

   

2. Add a select-text event listener in your code.

   let div = document.createElement('div');
   div.style.cssText += `
     opacity: 0;
     position: absolute;
     width: 0;
     height: 0;
     display: flex;
     justify-content: center;
     align-items: center;
   `
   document.body.append(div);
   document.addEventListener('mousedown', () => {
       window.getSelection().removeAllRanges();
   });
   pdfui.addUIEventListener(PDFViewCtrl.Events.selectText, (data) => {
       if (!data || !data.text || !data.e || !data.e.srcEvent) {
           return;
       }
       const {text, e} = data;
       const event = e.srcEvent;
       div.style.cssText += `
       left: ${event.clientX}px;
       top: ${event.clientY}px;
       `;
       div.innerHTML = '';
       div.append(document.createTextNode(text));
   
       const mousedown = new MouseEvent('mousedown', {
           bubbles: true,
           clientX: event.clientX,
           clientY: event.clientY,
           relatedTarget: div
       });
       const pointerup = new PointerEvent('pointerup', {
           bubbles: true,
           clientX: event.clientX,
           clientY: event.clientY,
           relatedTarget: div
       });
       const mouseup = new PointerEvent('mouseup', {
           bubbles: true,
           clientX: event.clientX,
           clientY: event.clientY,
           relatedTarget: div
       });
   
       div.dispatchEvent(mousedown);
   
       const selection = window.getSelection();
       const range = document.createRange();
       range.selectNode(div);
       selection.addRange(range);
   
       div.dispatchEvent(mouseup);
       div.dispatchEvent(pointerup);
   });

3. Select the Select Text Tool, drag to select text on the page, and the Saladict icon appears over the selection.