update tesseract js

doc/description.md

@@ -19,6 +19,9 @@ Mouseover Translate Any Language At Once
 English, Russian, Japanese, Chinese and so on
 
 # Change Log
+- 0.1.103
+  - update tesseract js v5.0.3
+  - fix pdf shortcut key (request by woong park)
 - 0.1.102
   - fix touch recognition
 - 0.1.101

package.json

@@ -51,7 +51,8 @@
     "match-url-wildcard": "^0.0.5",
     "source-map-support": "^0.5.21",
     "stream-browserify": "^3.0.0",
-    "tesseract.js": "^4.1.1",
+    "tesseract.js": "^5.0.3",
+    "textfit": "^2.4.0",
     "throttle-debounce": "^5.0.0",
     "tippy.js": "^6.3.7",
     "typeface-roboto": "^1.1.13",

public/tesseract/README

@@ -1,2 +1,2 @@
-https://unpkg.com/tesseract.js-core@4.0.4/tesseract-core.wasm.js
-https://unpkg.com/tesseract.js@4.1.1/dist/worker.min.js
+https://unpkg.com/tesseract.js-core@5.0.0/tesseract-core-lstm.wasm.js
+https://unpkg.com/tesseract.js@5.0.3/dist/worker.min.js

src/contentScript.js

@@ -6,10 +6,7 @@ import $ from "jquery";
 import tippy, { followCursor, hideAll } from "tippy.js";
 import { encode } from "he";
 import matchUrl from "match-url-wildcard";
-import delay from "delay";
-import { waitUntil } from "async-wait-until";
 import { debounce } from "throttle-debounce";
-// import * as GoogleDocsUtils from "google-docs-utils";
 
 import { enableSelectionEndEvent } from "/src/event/selection";
 import { enableMouseoverTextEvent } from "/src/event/mouseover";
@@ -33,15 +30,15 @@ var destructionEvent = "destructmyextension_MouseTooltipTranslator"; // + chrome
 const controller = new AbortController();
 const { signal } = controller;
 var mouseoverInterval;
-var writingField =
-  'input[type="text"], input[type="search"], input:not([type]), textarea, [contenteditable="true"], [role=textbox], [spellcheck]';
-var isYoutubeOn = false;
 var delayTime = 700;
 var isBlobPdf = false;
 var prevWordParam = [];
 var isGoogleDoc = false;
 var mouseKeyMap = ["ClickLeft", "ClickMiddle", "ClickRight"];
 var prevTooltipText = "";
+var isYoutubeOn = false;
+var isYoutubeScriptOn = false;
+var isYoutubeListenerOn = false;
 
 //tooltip core======================================================================
 $(async function initMouseTooltipTranslator() {
@@ -229,7 +226,7 @@ function getDetectType() {
 function checkMouseTargetIsSpecialWebBlock() {
   // if mouse targeted web element contain particular class name, return true
   //mousetooltip ocr block
-  return ["ocr_text_div"].some((className) =>
+  return ["ocr_text_div", "textFitted"].some((className) =>
     mouseTarget?.classList?.contains(className)
   );
 }
@@ -299,7 +296,7 @@ async function translateWriting() {
   //check current focus is write box
   if (
     !keyDownList[setting["keyDownTranslateWriting"]] ||
-    !getFocusedWritingBox()
+    !util.getFocusedWritingBox()
   ) {
     return;
   }
@@ -333,11 +330,6 @@ function insertText(inputText) {
   // document.execCommand("insertText", false, inputText);
 }
 
-function getFocusedWritingBox() {
-  var writingBox = $(":focus");
-  return writingBox.is(writingField) ? writingBox : null;
-}
-
 function getWritingText() {
   // get current selected text, if no select, get all
   if (window.getSelection().type == "Caret") {
@@ -463,7 +455,7 @@ function setMouseStatus(e) {
 const checkWritingBox = debounce(delayTime, () => {
   // if mouse target is not writing box or already bound, return
   // make key bind for preventDefault
-  var $writingField = $(writingField);
+  var $writingField = $(util.writingField);
   if (!$writingField.is(mouseTarget) || $writingField.data("mttBound")) {
     return;
   }
@@ -545,7 +537,7 @@ async function getSetting() {
     applyStyleSetting();
     selectedText = "";
     ocrView.removeAllOcrEnv();
-    initYoutubePlayer();
+    checkYoutube();
   });
 }
 
@@ -596,10 +588,8 @@ function applyStyleSetting() {
     .ocr_text_div{
       position: absolute;
       opacity: 0.7;
-      font-size: calc(100% + 1cqw);
-      overflow: hidden;
-      border: 2px solid CornflowerBlue;
       color: transparent !important;
+      border: 2px solid CornflowerBlue;
       background: none !important;
     }`;
 
@@ -715,14 +705,33 @@ async function checkYoutube() {
     !matchUrl(document.location.href, "www.youtube.com") ||
     setting["enableYoutube"] == "null"
   ) {
+    isYoutubeOn = false;
     return;
   }
+
   isYoutubeOn = true;
-  await util.injectScript("youtube.js");
-  initYoutubePlayer();
+  await injectYoutubeScript();
+  util.postFrame({
+    type: "initYoutubePlayer",
+    targetLang: setting["translateTarget"],
+    subSetting: setting["enableYoutube"],
+    captionOnStatusByUser: setting["captionOnStatusByUser"],
+  });
   addCaptionOnOffListener();
 }
+async function injectYoutubeScript() {
+  if (isYoutubeScriptOn) {
+    return;
+  }
+  isYoutubeScriptOn = true;
+  await util.injectScript("youtube.js");
+}
+
 function addCaptionOnOffListener() {
+  if (isYoutubeListenerOn) {
+    return;
+  }
+  isYoutubeListenerOn = true;
   util.addFrameListener("youtubeCaptionOnOff", ({ captionOnStatusByUser }) => {
     setting["captionOnStatusByUser"] = captionOnStatusByUser;
     setting.save();
@@ -735,16 +744,6 @@ function pausePlayer() {
 function playPlayer() {
   util.postFrame({ type: "playPlayer" });
 }
-function initYoutubePlayer() {
-  if (isYoutubeOn) {
-    util.postFrame({
-      type: "initYoutubePlayer",
-      targetLang: setting["translateTarget"],
-      subSetting: setting["enableYoutube"],
-      captionOnStatusByUser: setting["captionOnStatusByUser"],
-    });
-  }
-}
 
 function checkMouseTargetIsYoutubeSubtitle() {
   if (!isYoutubeOn || !$(mouseTarget).is(".ytp-caption-segment")) {

src/ocr/ocrIframe.js

@@ -2,6 +2,9 @@ import Tesseract from "tesseract.js";
 import { waitUntil, WAIT_FOREVER } from "async-wait-until";
 import * as util from "/src/util";
 
+var schedulerList = {};
+var loadingList = {};
+
 //ocr process, listen image from contents js and respond text
 //1. listen to get image from iframe host
 //2. use tesseract to process ocr to image to get text
@@ -20,7 +23,6 @@ window.addEventListener(
 );
 
 // ocr ===========================================================
-var schedulerList = {};
 
 async function doOcr(request) {
   var type = "ocrSuccess";
@@ -72,7 +74,6 @@ function useTesseract(image, lang, rectangles, mode) {
     try {
       var data = [];
       var scheduler = await getScheduler(lang, mode);
-
       // //ocr on plain image
       if (mode == "auto") {
         var d = await scheduler.addJob("recognize", image);
@@ -97,41 +98,43 @@ function useTesseract(image, lang, rectangles, mode) {
   });
 }
 async function getScheduler(lang, mode) {
-  await waitUntil(() => schedulerList[lang + "_" + mode], {
+  var id = lang + "_" + mode;
+  await waitUntil(() => schedulerList[id], {
     timeout: WAIT_FOREVER,
   });
-  return schedulerList[lang + "_" + mode];
+  return schedulerList[id];
 }
 
 async function loadScheduler(lang, mode) {
-  if (schedulerList[lang + "_" + mode]) {
-    return schedulerList[lang + "_" + mode];
+  var id = lang + "_" + mode;
+  if (loadingList[id]) {
+    return;
   }
+  loadingList[id] = true;
 
-  var isLocal = lang == "jpn_vert";
   var scheduler = Tesseract.createScheduler();
-  var workerIndexList = mode == "auto" ? [0] : [0, 1];
+  var workerIndexList = mode == "auto" ? [0] : [0, 1, 2, 3];
+  var workerPath = chrome.runtime.getURL("/tesseract/worker.min.js");
+  var corePath = chrome.runtime.getURL(
+    "/tesseract/tesseract-core-lstm.wasm.js"
+  );
+
   var tessedit_pageseg_mode =
     mode == "auto"
       ? Tesseract.PSM.AUTO_ONLY
-      : lang == "jpn_vert"
+      : lang.includes("vert")
       ? Tesseract.PSM.SINGLE_BLOCK_VERT_TEXT
       : Tesseract.PSM.SINGLE_BLOCK;
 
   await Promise.all(
     workerIndexList.map(async (i) => {
-      var worker = await Tesseract.createWorker({
+      var worker = await Tesseract.createWorker(lang, 1, {
         workerBlobURL: false,
-        workerPath: chrome.runtime.getURL("/tesseract/worker.min.js"),
-        corePath: chrome.runtime.getURL("/tesseract/tesseract-core.wasm.js"),
-        langPath: isLocal
-          ? chrome.runtime.getURL("/traindata")
-          : "https://raw.githubusercontent.com/naptha/tessdata/gh-pages/4.0.0", //https://github.com/zodiac3539/jpn_vert
-        gzip: isLocal ? false : true,
-        // logger: m => console.log(m), // Add logger here
+        workerPath,
+        corePath,
+        // logger: (m) => console.log(m), // Add logger here
       });
-      await worker.loadLanguage(lang);
-      await worker.initialize(lang);
+
       await worker.setParameters({
         user_defined_dpi: "100",
         tessedit_pageseg_mode,
@@ -141,13 +144,11 @@ async function loadScheduler(lang, mode) {
     })
   );
 
-  schedulerList[lang + "_" + mode] = scheduler;
-  return schedulerList[lang + "_" + mode];
+  schedulerList[id] = scheduler;
 }
 
 function initTesseract(request) {
-  loadScheduler(request.lang, "auto");
-  loadScheduler(request.lang, "bbox");
+  loadScheduler(request.lang, request.mode);
 
   response({
     windowPostMessageProxy: request.windowPostMessageProxy,