search

birchill / 10ten-ja-reader

A browser extension to translate Japanese by hovering over words.
https://addons.mozilla.org/firefox/addon/10ten-ja-reader/
GNU General Public License v3.0
608 stars 45 forks source link

10ten and Google Translated page don't play well together on hover #1398

Open ndobb opened 1 year ago

ndobb commented 1 year ago

First thing - this is a wonderful extension I use daily, thank you!

I've noticed that when I read a Google Translated page, for example

...that if 10ten reader is enabled, hovering over text oddly causes the original English text to appear immediately after each translated sentence across the whole document.

With 10ten reader on: yes10ten

With 10ten reader off: no10ten

10ten reader and Google Translate both show a translation modal on hover, so I suspect there is a timing- or HTML element-overlap issue between them which causes the issue.

OS: macOS v12.4 Browser: Firefox v119.0

birtles commented 1 year ago

Oh, that's interesting. I think I know what's happening.

In Firefox beta/release and Safari, 10ten indicates the looked-up text by selecting it. However, if you select text in a Google translated webpage, Google Translate takes that as a cue to show the source text. You can see that if you turn off 10ten and just click the paragraph.

In Firefox Nightly and Chrome and Edge which support the CSS highlight API we can avoid selecting the text by showing a highlight and the problem doesn't reproduce.

As a temporary workaround you can either:

I hope Firefox will ship that API soon (tracking bug) but I'm not sure about Safari. Safari have an implementation but it is currently disabled.

Until that happens we could try to work around this.

Looking at that page, I can see there is are two selectionchange event handlers on the <html> element, one capture phase and one bubble phase.

If I locate one of the <p> elements in the body, then enter window.getSelection().setBaseAndExtent($0, 0, $0, 1) all the English text pops up demonstrating that it is the selectionchange event handler that is triggering this behavior.

Fortunately that appears to be caused by the bubble phase event handler so we could try to catch the selectionchange event and call stopPropagation() on it. We probably wouldn't want to do that everywhere but if Google Translate contents are always served from *.translate.goog we could just apply it there. Furthermore, we'd only do it when we triggered a change in text selection.

ndobb commented 1 year ago

Brilliant! Thank you so much for the quick reply. Setting dom.customHighlightAPI.enabled does indeed do the trick as workaround for now.