Content Script in iFrame pauses if browser is minimized

[David Jung]

Greetings together!

I inject a content script using the following lines of code in my manifest V2:

  "content_scripts": [

    {

      "matches": ["file:///C:/Users/david/demo_iframe.html"],

      "all_frames": true,

      "js": ["js/content_script.js"]

    }

  ],

This code does work if the browser window is open or in the background. But if I minimize the browser window, the content script pauses the execution. 

To give a bit more details:

In my content script I am calling an async function to write text into a textbox.

Is this a known issue? Is there any way to solve that?

Thanks in advance,
David

[Cuyler Stuwe]

Does it pause execution, or does it stop triggering the timers/events/etc. that trigger your execution?

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/8c21e264-54af-4b4c-862a-c4da7377d093n%40chromium.org.

[David Jung]

It does stop the execution.

I am using a function to write a text, example "123456789".

If I minimize the browser window in after "123", wait a minute and open it again, it continues with "456789".

[Cuyler Stuwe]

And you’re saying it happens only in content scripts in iframes? Not for top-frame content scripts?

[David Jung]

I saw the issue only with iFrames. Now I made a simple script to test top-frame content-scripts and I see the same behaviour. So the content scripts pause the execution if the browser is minimized (top-frame and iFrame-scripts)

[Cuyler Stuwe]

What does your script look like?

[David Jung]

That's the function in the content script:

async function checkPageStatus() {

  console.log("[ALL] Checking page status...")

  await randomTimeout(2000)

  await setText("//input[@id='1']", "Test 1234567890", true)

}

randomTimeout:

async function randomTimeout(minTimeToWait: number) {

   // some number randomizing

   return new Promise((resolve) => setTimeout(resolve, msToWait + timeout))

}

setText:

async function setText(<myParams>): Promise<HTMLInputElement>{

  // Mouse movements using Input.dispatchMouseEvent
  // iterating through every character in the string and using the following method to insert the char

   document.execCommand("insertText", false, char)

}

[Cuyler Stuwe]

The entirety of the function would've been nice, but this is at least a start.

document.execCommand is weird.

Have you tried logging to console or doing anything else instead of document.execCommand as a sanity check to test your assertion that the script itself is paused?

[David Jung]

Yes, I used console.log(char) instead of document.execCommand and I face the same issue.

Here is the full code:

export async function setText(

  xpath: string,

  text: string,

  simulateTyping: boolean,

  waitTime = 200,

  typeSpeed = 0,

): Promise<HTMLInputElement> {

  const element = getInput(xpath)

  if (element) {

    await setElementText(element, text, simulateTyping, waitTime, typeSpeed)

  }

  return element

}

async function setElementText(

  element: HTMLInputElement,

  text: string,

  simulateTyping: boolean,

  waitTime = 500,

  typeSpeed: number,

): Promise<void> {

  element.focus()

  element.select()

  document.execCommand("delete", false)

  element.focus()

  if (simulateTyping) {

    for (const char of text) {

      await typingTimeout(typeSpeed)

      //document.execCommand("insertText", false, char)

      console.log(char)

    }

  } else {

    if (!document.execCommand("insertText", false, text)) {

      // Fallback for Firefox: just replace the value

      element.value = text

    }

  }

  element.click()

  await randomTimeout(waitTime)

}

export async function typingTimeout(extra = 0): Promise<number> {

  const min = Number(200) - (Math.random() * (15 - 5) + 5)

  const max = Number(200) + (Math.random() * (15 - 5) + 5)

  const timeout = Math.random() * (max - min) + min + extra

  return new Promise((resolve) => setTimeout(resolve, timeout))

}

// random timeout with minimum time to wait

export async function randomTimeout(msToWait = 0): Promise<number> {

  const min = Number(200) - (Math.random() * (15 - 5) + 5)

  const max = Number(200) + (Math.random() * (15 - 5) + 5)

  const timeout = Math.random() * (max - min) + min

  return new Promise((resolve) => setTimeout(resolve, msToWait + timeout))

}

[Cuyler Stuwe]

Have you tried pasting this code into the console of a given webpage to see whether it behaves the same way outside of the context of a content script?

[David Jung]

I tried using a light-version of my code and did not had the issue.

async function write() {
    for (const char of "Test123456789") {
      await new Promise(r => setTimeout(r, 500));
      console.log(char)
    }
}

await write()

[David Jung]

Tried again with my code in the extension and changed the timeout parameter to 10 (milliseconds). With this way I saw, that the functions only execute, if the browser window is not minimized. So now I would say it really stops triggering events/timers etc.

[hrg...@gmail.com]

Does the same occur if instead of minimizing the window you activate another tab in that window?

[David Jung]

Yes it does.

[PhistucK]

Timers are significantly throttled in background/minimised tabs/windows. Since your code seems to use timers, they are being throttled.

I would expect them to be throttled to once per second, though, not to be completely paused, but implementation details vary, I guess.

☆PhistucK

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/53b3f30c-f526-4993-9ffc-30d9bcf6ca5cn%40chromium.org.

[hrg...@gmail.com]

According to this document, throttling should occur in a tab after 5 minutes of being hidden, not immediately.

Have you checked if the issue also occurs with normal scripts in a page (not content scripts)?

For example, if you go to google.com and execute this script in DevTools:

count=0 ; setInterval(()=> document.querySelector('[name=q]').value = ++count, 1000) ;

Does the script stop executing too?

Alternatively, try creating a local html file and put a timer routing in it.

[Cuyler Stuwe]

“Which OS?” is a pretty important question here too.

I’ve seen several platform-specific bugs with regard to determining visibility/focus over the years.

[Cuyler Stuwe]

@hrg — I think that’s an old and/or incomplete document. For example, a minimized window throttles its timers to once every second as soon as it’s minimized.

[Cuyler Stuwe]

This is the link I’ve referred to in the past for a more comprehensive overview of throttling behavior:

https://developer.chrome.com/blog/timer-throttling-in-chrome-88/

It doesn’t say anything about pausing execution entirely, though.