refactor: optimize event listener for `vue:settled` to handle HTMLTableElement variants by piquark6046 · Pull Request #234 · FilteringDev/NamuLink

piquark6046 · 2026-04-04T05:08:45Z

No description provided.

…leElement variants

Copilot

Pull request overview

Refactors the vue:settled event handler in the userscript to better detect/hide elements (including table-related layouts) by extracting the OCR pass into a helper and expanding the DOM/style-based heuristics.

Changes:

Extracts the OCR-based targeting logic into a new ExecuteOCR(...) helper and adds size constraints for OCR candidates.
Expands targeting heuristics to account for HTMLTableElement / table-cell variants and adds an additional exclusion filter.
Replaces the previous “FrameTargeted” handling with table-specific targeting and hiding logic.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-04T05:14:04Z

userscript/source/index.ts

          .filter(Child =>
            Child instanceof HTMLImageElement ||
            getComputedStyle(Child).backgroundImage !== 'none'
-          )
+          ).filter(Child => parseFloat(getComputedStyle(Child).getPropertyValue('width')) >= 5 && parseFloat(getComputedStyle(Child).getPropertyValue('height')) >= 5)
+          .filter(Child => parseFloat(getComputedStyle(Child).getPropertyValue('width')) <= 50 && parseFloat(getComputedStyle(Child).getPropertyValue('height')) <= 50)


This chain calls getComputedStyle(Child) multiple times per element for width/height checks, which can be expensive and can trigger repeated style calculations. Consider caching the computed style (or width/height) per Child before filtering to reduce overhead in the vue:settled handler.

Copilot · 2026-04-04T05:14:05Z

userscript/source/index.ts

+      if (Children.filter(Child => 
+        parseFloat(getComputedStyle(Child).getPropertyValue('padding-top')) >= 5 &&
+        parseFloat(getComputedStyle(Child).getPropertyValue('border-bottom-width')) >= 0.1
+      ).length === 1) return true
+      // HTMLTableElement
+      return Children.filter(Child => (Child instanceof HTMLTableElement || Child instanceof HTMLTableCellElement) &&
+        parseFloat(getComputedStyle(Child).getPropertyValue('padding-top')) >= 5 && parseFloat(getComputedStyle(Child).getPropertyValue('padding-bottom')) >= 5).length >= 2
+    })
+    Targeted = Targeted.filter(Ele => {
+      let Children = [...Ele.querySelectorAll('*')].filter(Child => Child instanceof HTMLElement)


Ele.querySelectorAll('*') is executed again in subsequent Targeted = Targeted.filter(...) steps (e.g., the next filter starting at line 101). Consider collecting Children once per Ele (or combining these predicates) to avoid repeated full DOM traversals for the same element.

Suggested change

if (Children.filter(Child =>

parseFloat(getComputedStyle(Child).getPropertyValue('padding-top')) >= 5 &&

parseFloat(getComputedStyle(Child).getPropertyValue('border-bottom-width')) >= 0.1

).length === 1) return true

// HTMLTableElement

return Children.filter(Child => (Child instanceof HTMLTableElement || Child instanceof HTMLTableCellElement) &&

parseFloat(getComputedStyle(Child).getPropertyValue('padding-top')) >= 5 && parseFloat(getComputedStyle(Child).getPropertyValue('padding-bottom')) >= 5).length >= 2

})

Targeted = Targeted.filter(Ele => {

let Children = [...Ele.querySelectorAll('*')].filter(Child => Child instanceof HTMLElement)

const MatchesStructure = Children.filter(Child =>

parseFloat(getComputedStyle(Child).getPropertyValue('padding-top')) >= 5 &&

parseFloat(getComputedStyle(Child).getPropertyValue('border-bottom-width')) >= 0.1

).length === 1 ||

// HTMLTableElement

Children.filter(Child => (Child instanceof HTMLTableElement || Child instanceof HTMLTableCellElement) &&

parseFloat(getComputedStyle(Child).getPropertyValue('padding-top')) >= 5 && parseFloat(getComputedStyle(Child).getPropertyValue('padding-bottom')) >= 5).length >= 2

if (!MatchesStructure) return false

Copilot · 2026-04-04T05:14:05Z

userscript/source/index.ts

+      // non-HTMLTableElement
+      if (Children.filter(Child => 
+        parseFloat(getComputedStyle(Child).getPropertyValue('padding-top')) >= 5 &&
+        parseFloat(getComputedStyle(Child).getPropertyValue('border-bottom-width')) >= 0.1
+      ).length === 1) return true


The comment // non-HTMLTableElement is misleading here: the predicate does not check that the child is not a table element, so table-related DOM could still satisfy this branch. Please either enforce the non-table condition or reword the comment to match the actual logic.

Copilot · 2026-04-04T05:14:05Z

userscript/source/index.ts

+    let RealTabletTargeted = Targeted.filter(Ele => {
+      if (!(Ele instanceof HTMLElement) || !(Ele instanceof HTMLTableElement)) return false
+      let Children = [...Ele.querySelectorAll('*')].filter(Child => Child instanceof HTMLElement)
+      return Children.some(Child => parseFloat(getComputedStyle(Child).getPropertyValue('padding-top')) >= 5 && parseFloat(getComputedStyle(Child).getPropertyValue('padding-bottom')) >= 5)
+    })
+    console.debug(`[${UserscriptName}] vue:settled RealTabletTargeted`, RealTabletTargeted)
+    RealTabletTargeted.forEach(Ele => {


Variable name RealTabletTargeted looks like a typo given the surrounding table-related logic (HTMLTableElement). Consider renaming to RealTableTargeted (or similar) to avoid confusion and to keep log messages consistent.

Suggested change

let RealTabletTargeted = Targeted.filter(Ele => {

if (!(Ele instanceof HTMLElement) || !(Ele instanceof HTMLTableElement)) return false

let Children = [...Ele.querySelectorAll('*')].filter(Child => Child instanceof HTMLElement)

return Children.some(Child => parseFloat(getComputedStyle(Child).getPropertyValue('padding-top')) >= 5 && parseFloat(getComputedStyle(Child).getPropertyValue('padding-bottom')) >= 5)

})

console.debug(`[${UserscriptName}] vue:settled RealTabletTargeted`, RealTabletTargeted)

RealTabletTargeted.forEach(Ele => {

let RealTableTargeted = Targeted.filter(Ele => {

if (!(Ele instanceof HTMLElement) || !(Ele instanceof HTMLTableElement)) return false

let Children = [...Ele.querySelectorAll('*')].filter(Child => Child instanceof HTMLElement)

return Children.some(Child => parseFloat(getComputedStyle(Child).getPropertyValue('padding-top')) >= 5 && parseFloat(getComputedStyle(Child).getPropertyValue('padding-bottom')) >= 5)

})

console.debug(`[${UserscriptName}] vue:settled RealTableTargeted`, RealTableTargeted)

RealTableTargeted.forEach(Ele => {

Copilot · 2026-04-04T05:14:05Z

userscript/source/index.ts

+  async function ExecuteOCR(Targeted: HTMLElement[]) {
+    const NextTargeted = []


ExecuteOCR returns an untyped empty array (const NextTargeted = []), so TypeScript infers any[] and you lose type-safety for Targeted after await ExecuteOCR(Targeted). Please type NextTargeted (e.g., HTMLElement[]) and/or add an explicit return type like Promise<HTMLElement[]>.

Suggested change

async function ExecuteOCR(Targeted: HTMLElement[]) {

const NextTargeted = []

async function ExecuteOCR(Targeted: HTMLElement[]): Promise<HTMLElement[]> {

const NextTargeted: HTMLElement[] = []

Copilot · 2026-04-04T05:14:05Z

userscript/source/index.ts

+  }
+
+  ArticleHTMLElement.addEventListener('vue:settled', async () => {
+    let Targeted = [...document.querySelectorAll('#app div[class] div[class] ~ div[class]')].filter(Ele => Ele instanceof HTMLElement)


This handler uses the global document for queries, while the rest of the userscript consistently uses the injected BrowserWindow.document (e.g., WaitForElement('#app', BrowserWindow.document) at line 47 and DOM creation at lines 132–135). For consistency and to avoid userscript sandbox/unsafeWindow mismatches, prefer querying via BrowserWindow.document (or ArticleHTMLElement.ownerDocument).

Suggested change

let Targeted = [...document.querySelectorAll('#app div[class] div[class] ~ div[class]')].filter(Ele => Ele instanceof HTMLElement)

let Targeted = [...BrowserWindow.document.querySelectorAll('#app div[class] div[class] ~ div[class]')].filter(Ele => Ele instanceof HTMLElement)

Copilot · 2026-04-04T05:14:06Z

userscript/source/index.ts

+        return parseFloat(getComputedStyle(Child).getPropertyValue('margin-bottom')) >= 10 && parseFloat(getComputedStyle(Child).getPropertyValue('padding-bottom')) >= 1 && parseFloat(getComputedStyle(Child).getPropertyValue('padding-top')) >= 1 &&
+        parseFloat(getComputedStyle(Child).getPropertyValue('border-top-width')) >= 0.25 && parseFloat(getComputedStyle(Child).getPropertyValue('border-bottom-width')) >= 0.25


Inside this some(...) predicate, getComputedStyle(Child) is effectively invoked multiple times per element (once per property). Consider caching const Style = getComputedStyle(Child) and reading all needed properties from it to reduce repeated style lookups.

Suggested change

return parseFloat(getComputedStyle(Child).getPropertyValue('margin-bottom')) >= 10 && parseFloat(getComputedStyle(Child).getPropertyValue('padding-bottom')) >= 1 && parseFloat(getComputedStyle(Child).getPropertyValue('padding-top')) >= 1 &&

parseFloat(getComputedStyle(Child).getPropertyValue('border-top-width')) >= 0.25 && parseFloat(getComputedStyle(Child).getPropertyValue('border-bottom-width')) >= 0.25

const Style = getComputedStyle(Child)

return parseFloat(Style.getPropertyValue('margin-bottom')) >= 10 && parseFloat(Style.getPropertyValue('padding-bottom')) >= 1 && parseFloat(Style.getPropertyValue('padding-top')) >= 1 &&

parseFloat(Style.getPropertyValue('border-top-width')) >= 0.25 && parseFloat(Style.getPropertyValue('border-bottom-width')) >= 0.25

piquark6046 added 2 commits April 4, 2026 04:49

refactor: optimize event listener for vue:settled to handle HTMLTab…

60850ef

…leElement variants

fix: refine filtering logic for HTML elements based on size constraints

8ba59cb

piquark6046 changed the title ~~Fix/html table element vriants~~ refactor: optimize event listener for vue:settled to handle HTMLTableElement variants Apr 4, 2026

piquark6046 marked this pull request as ready for review April 4, 2026 05:10

Copilot AI review requested due to automatic review settings April 4, 2026 05:10

piquark6046 merged commit 13153d3 into main Apr 4, 2026
11 checks passed

Copilot started reviewing on behalf of piquark6046 April 4, 2026 05:11 View session

Copilot AI reviewed Apr 4, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: optimize event listener for `vue:settled` to handle HTMLTableElement variants#234

refactor: optimize event listener for `vue:settled` to handle HTMLTableElement variants#234
piquark6046 merged 2 commits intomainfrom
fix/HTMLTableElement-vriants

piquark6046 commented Apr 4, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		async function ExecuteOCR(Targeted: HTMLElement[]) {
		const NextTargeted = []

	let Targeted = [...document.querySelectorAll('#app div[class] div[class] ~ div[class]')].filter(Ele => Ele instanceof HTMLElement)
	let Targeted = [...BrowserWindow.document.querySelectorAll('#app div[class] div[class] ~ div[class]')].filter(Ele => Ele instanceof HTMLElement)

		return parseFloat(getComputedStyle(Child).getPropertyValue('margin-bottom')) >= 10 && parseFloat(getComputedStyle(Child).getPropertyValue('padding-bottom')) >= 1 && parseFloat(getComputedStyle(Child).getPropertyValue('padding-top')) >= 1 &&
		parseFloat(getComputedStyle(Child).getPropertyValue('border-top-width')) >= 0.25 && parseFloat(getComputedStyle(Child).getPropertyValue('border-bottom-width')) >= 0.25

-        return parseFloat(getComputedStyle(Child).getPropertyValue('margin-bottom')) >= 10 && parseFloat(getComputedStyle(Child).getPropertyValue('padding-bottom')) >= 1 && parseFloat(getComputedStyle(Child).getPropertyValue('padding-top')) >= 1 &&
-        parseFloat(getComputedStyle(Child).getPropertyValue('border-top-width')) >= 0.25 && parseFloat(getComputedStyle(Child).getPropertyValue('border-bottom-width')) >= 0.25
+        const Style = getComputedStyle(Child)
+        return parseFloat(Style.getPropertyValue('margin-bottom')) >= 10 && parseFloat(Style.getPropertyValue('padding-bottom')) >= 1 && parseFloat(Style.getPropertyValue('padding-top')) >= 1 &&
+        parseFloat(Style.getPropertyValue('border-top-width')) >= 0.25 && parseFloat(Style.getPropertyValue('border-bottom-width')) >= 0.25

Conversation

piquark6046 commented Apr 4, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants