# # 支持第三方文本高亮翻译插件

## # 如何在 Foxit PDF SDK for Web 中支持第三方文本高亮翻译插件

您可以使用 `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 图标将出现在所选内容上。