Moby Dick demo doesn't work with Chrome translator extension

[anatoly314]

Hi, I'm using this Chrome extension to translate unknown words while I'm reading: ImTranslator It works like this:

• I double click on word or select text section and a small grey balloon appear on top of the selection

• When I tap on it, translation appears:

But when I'm trying it on the demo book "Moby Dick" it doesn't work. When I double click or select text nothing is happening.

Can it be solved somehow? It's essential feature for me.

Thank you.

[evglevin]

the same problem with Lingualeo chrome extension

[m8524769]

The same on google translate Chrome extension, does anyone know how to fix it? :cry:

[m8524769]

Ok, I got a temporary solution here,

html: (where the translation appear, put it anywhere you like)

<span
  id="epubSelection"
  style="position: fixed; top: 42vh; right: calc(50vw - 530px); font-size: 0;"
>
</span>

typescript:

private clientX: number;
private clientY: number;

rendition.once('rendered', () => {
  const epubContainer = document.getElementsByClassName('epub-container')[0] as HTMLElement;
  const docElement = rendition.getContents()[0].documentElement as HTMLElement;

  // Listen to the pointer location in the rendition
  docElement.addEventListener('mouseup', event => {
    const offsetX = epubContainer.firstElementChild.getBoundingClientRect().left;  // epub-view
    const offsetY = epubContainer.scrollTop;
    this.clientX = event.clientX + offsetX;
    this.clientY = event.clientY - offsetY;
  });
});

rendition.on('selected', (cfirange, contents) => {
  // Copy the selected content from the <iframe> to an outside element
  const selection: Selection = contents.window.getSelection();
  const element: HTMLElement = document.getElementById('epubSelection');
  element.innerText = selection.toString();

  // Select the outside element
  const range: Range = document.createRange();
  range.selectNodeContents(element);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);

  // Trigger a mouseup event manually
  element.dispatchEvent(new MouseEvent('mouseup', {
    bubbles: true,
    cancelable: true,
    clientX: this.clientX,
    clientY: this.clientY,
  }));
});

And the result:

Hope this helps. :smiley:

[pyqh]

I tried it for a long time, it's actually very simple. in manifest.json file

{
  ...
  "content_scripts": [
    {
      "all_frames": true,//necessary
      "js": ["content.js"],
      "matches": ["\u003Call_urls>"],
      "match_about_blank": true,//necessary,add this
      "run_at": "document_idle"
    }
  ],
  ...
}

result: