配置翻译插件

在 SDK 中支持第三方文本高亮翻译插件， 您可以使用 select-text 事件来激活浏览器的文本高亮翻译插件。这里我们以 Chrome Saladict plugin 为例，向您展示如何监听 selection 事件并实现一个弹出式词典或页面翻译器。

1. 在 Chrome://extensions 面板中启用 Saladict plugin。

   

2. 在您的代码中添加 select-text 事件监听器。

   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 Text Tool，拖动并在页面上选择一段文本，然后 Saladict 图标将出现在所选内容上。