diff --git a/ext/fg/js/driver.js b/ext/fg/js/driver.js index 8904c12c..97f29f89 100644 --- a/ext/fg/js/driver.js +++ b/ext/fg/js/driver.js @@ -182,6 +182,7 @@ class Driver { } searchClear() { + destroyImposters(); this.popup.hide(); if (this.options.scanning.selectText && this.lastTextSource !== null) { diff --git a/ext/fg/js/util.js b/ext/fg/js/util.js index ba872467..a7533846 100644 --- a/ext/fg/js/util.js +++ b/ext/fg/js/util.js @@ -70,12 +70,36 @@ function addDefinition(definition, mode) { return invokeBgApi('addDefinition', {definition, mode}); } +function createImposter(element) { + const imposter = document.createElement('div'); + const elementRect = element.getBoundingClientRect(); + + imposter.className = 'yomichan-imposter'; + imposter.innerText = element.value; + imposter.style.cssText = window.getComputedStyle(element).cssText; + imposter.style.position = 'absolute'; + imposter.style.top = elementRect.top + 'px'; + imposter.style.left = elementRect.left + 'px'; + imposter.style.zIndex = 2147483646; + document.body.appendChild(imposter); + + imposter.scrollTop = element.scrollTop; + imposter.scrollLeft = element.scrollLeft; +} + +function destroyImposters() { + for (const element of document.getElementsByClassName('yomichan-imposter')) { + element.parentNode.removeChild(element); + } +} + function textSourceFromPoint(point) { const element = document.elementFromPoint(point.x, point.y); if (element !== null) { - const names = ['IMG', 'INPUT', 'BUTTON', 'TEXTAREA']; - if (names.includes(element.nodeName)) { + if (element.nodeName === 'IMG' || element.nodeName === 'BUTTON') { return new TextSourceElement(element); + } else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') { + createImposter(element); } } diff --git a/ext/manifest.json b/ext/manifest.json index e296ec06..ba7e36e6 100644 --- a/ext/manifest.json +++ b/ext/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Yomichan", - "version": "1.0.9", + "version": "1.0.10", "description": "Japanese dictionary with Anki integration", "icons": {"16": "img/icon16.png", "48": "img/icon48.png", "128": "img/icon128.png"},