feat: implement OCR client, worker, and types for text detection

builder/package.json

@@ -8,26 +8,24 @@
     "debug": "tsx source/debug.ts",
     "clean": "rm -rf dist && rm -rf .buildcache"
   },
-  "dependencies": {
-    "@types/node": "^24.12.0"
-  },
   "devDependencies": {
-    "@adguard/agtree": "^4.0.1",
+    "@adguard/agtree": "^4.0.4",
     "@npmcli/package-json": "^7.0.5",
+    "@types/node": "^24.12.0",
     "@types/npmcli__package-json": "^4.0.4",
     "@types/semver": "^7.7.1",
-    "@typescript-eslint/eslint-plugin": "^8.57.0",
-    "@typescript-eslint/parser": "^8.57.0",
+    "@typescript-eslint/eslint-plugin": "^8.58.0",
+    "@typescript-eslint/parser": "^8.58.0",
     "@typescriptprime/parsing": "^2.0.0",
     "@typescriptprime/securereq": "^1.2.0",
     "chokidar": "^5.0.0",
-    "esbuild": "^0.27.3",
-    "eslint": "^10.0.3",
+    "esbuild": "^0.27.4",
+    "eslint": "^10.1.0",
     "semver": "^7.7.4",
-    "tldts": "^7.0.25",
+    "tldts": "^7.0.27",
     "tsx": "^4.21.0",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.0",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.0",
     "zod": "^4.3.6"
   }
 }

builder/source/banner/index.ts

@@ -28,6 +28,7 @@ export function CreateBanner(Options: BannerOptions): string {
   BannerString += `// @author       ${Options.Author}\n`
   BannerString += '//\n'
   BannerString += '// @grant        unsafeWindow\n'
+  BannerString += '// @grant        GM.xmlHttpRequest\n'
   BannerString += '// @run-at       document-start\n'
   BannerString += '//\n'
   BannerString += `// @description  ${Options.Description['en']}\n`

builder/source/build.ts

@@ -1,6 +1,7 @@
 import * as ESBuild from 'esbuild'
 import * as Zod from 'zod'
 import * as Process from 'node:process'
+import * as Path from 'node:path'
 import PackageJson from '@npmcli/package-json'
 import { CreateBanner } from './banner/index.js'
 import { SafeInitCwd } from './utils/safe-init-cwd.js'
@@ -44,14 +45,25 @@ export async function Build(OptionsParam?: BuildOptions): Promise<void> {
     }
   })
 
+  const WorkerCode = await ESBuild.build({
+    entryPoints: [Path.resolve(ProjectRoot, 'userscript', 'source', 'ocr-worker.ts')],
+    bundle: true,
+    minify: Options.Minify,
+    write: false,
+    target: ['es2024', 'chrome119', 'firefox142', 'safari26']
+  })
+
   await ESBuild.build({
-    entryPoints: [ProjectRoot + '/userscript/source/index.ts'],
+    entryPoints: [Path.resolve(ProjectRoot, 'userscript', 'source', 'index.ts')],
     bundle: true,
     minify: Options.Minify,
     outfile: `${ProjectRoot}/dist/NamuLink${Options.BuildType === 'development' ? '.dev' : ''}.user.js`,
     banner: {
       js: Banner
     },
-    target: ['es2024', 'chrome119', 'firefox142', 'safari26']
+    target: ['es2024', 'chrome119', 'firefox142', 'safari26'],
+    define: {
+      __OCR_WORKER_CODE__: JSON.stringify(WorkerCode.outputFiles[0].text)
+    }
   })
 }

builder/source/debug.ts

@@ -8,7 +8,7 @@ import { Build } from './build.js'
 import { SafeInitCwd } from './utils/safe-init-cwd.js'
 
 let ProjectRoot = SafeInitCwd({ Cwd: Process.cwd(), InitCwd: Process.env.INIT_CWD })
-const WatchingGlob = [];
+const WatchingGlob: string[] = [];
 ['builder/', 'userscript/', ''].forEach(Dir => {
   WatchingGlob.push(...Fs.globSync(`${ProjectRoot}/${Dir}source/**/*.ts`))
   WatchingGlob.push(...Fs.globSync(`${ProjectRoot}/${Dir}source/**/*.json`))
@@ -18,11 +18,13 @@ const Watcher = Chokidar.watch([...WatchingGlob], {
   ignored: '**/node_modules/**',
 })
 
-let BuildCooldownTimer: NodeJS.Timeout = null
+let BuildCooldownTimer: NodeJS.Timeout | null = null
 let ShouldPreventHTTPResponse = false
 let Version: number = 0
 Watcher.on('all', async (WatcherEvent, WatcherPath) => {
-  clearTimeout(BuildCooldownTimer)
+  if (BuildCooldownTimer) {
+    clearTimeout(BuildCooldownTimer)
+  }
   BuildCooldownTimer = setTimeout(async () => {
     console.log(`Detected file change (${WatcherEvent}):`, WatcherPath)
     ShouldPreventHTTPResponse = true

builder/source/utils/http-server.ts

@@ -26,7 +26,7 @@ export function RunDebugServer(Port: number, FileName: string[], ShouldPreventHT
       Res.writeHead(404)
       Res.end()
       return
-    } else if (!IsLoopBack(Req.socket.remoteAddress)) {
+    } else if (!IsLoopBack(Req.socket.remoteAddress ?? '')) {
       Res.writeHead(403)
       Res.end()
       return

builder/tsconfig.json

@@ -2,5 +2,8 @@
   "extends": "../tsconfig.json",
   "include": [
     "source/**/*.ts"
-  ]
+  ],
+  "compilerOptions": {
+    "types": ["node"]
+  }
 }

package.json

@@ -33,9 +33,9 @@
     "builder"
   ],
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^8.57.0",
-    "@typescript-eslint/parser": "^8.57.0",
-    "eslint": "^10.0.3",
-    "typescript-eslint": "^8.57.0"
+    "@typescript-eslint/eslint-plugin": "^8.58.0",
+    "@typescript-eslint/parser": "^8.58.0",
+    "eslint": "^10.1.0",
+    "typescript-eslint": "^8.58.0"
   }
 }

tsconfig.json

@@ -4,7 +4,6 @@
     "target": "ES2024",
     "moduleResolution": "NodeNext",
     "removeComments": false,
-    "alwaysStrict": false,
     "skipLibCheck": true,
     "paths": {
       "@builder/*": ["./builder/source/*"],

userscript/VM.d.ts

@@ -0,0 +1 @@
+import '@violentmonkey/types'

userscript/package.json

@@ -6,10 +6,11 @@
     "lint": "tsc --noEmit && eslint **/*.ts"
   },
   "devDependencies": {
-    "@types/web": "^0.0.342",
-    "@typescript-eslint/eslint-plugin": "^8.57.0",
-    "@typescript-eslint/parser": "^8.57.0",
-    "eslint": "^10.0.3",
-    "typescript-eslint": "^8.57.0"
+    "@types/web": "^0.0.345",
+    "@typescript-eslint/eslint-plugin": "^8.58.0",
+    "@typescript-eslint/parser": "^8.58.0",
+    "@violentmonkey/types": "^0.3.2",
+    "eslint": "^10.1.0",
+    "typescript-eslint": "^8.58.0"
   }
 }

userscript/source/dom-await.ts

@@ -0,0 +1,25 @@
+export function WaitForElement(Selector: string, Root: HTMLElement | Document = document.documentElement): Promise<HTMLElement> {
+  return new Promise((Resolve) => {
+    const Found = Root.querySelector(Selector)
+
+    if (Found && Found instanceof HTMLElement) {
+      Resolve(Found)
+      return
+    }
+
+    const Observer = new MutationObserver(() => {
+      const El = Root.querySelector(Selector)
+
+      if (El && El instanceof HTMLElement) {
+        Observer.disconnect()
+        Resolve(El)
+      }
+    })
+
+    Observer.observe(Root, {
+      subtree: true,
+      childList: true,
+      attributes: true
+    })
+  })
+}