fix(browser-ui, browser): enhance tabs handling and script injection (#106)

Co-authored-by: skychx <skychx.hotmail.com>

Author: skychx

packages/browser-ui/src/model/tabs.ts

@@ -32,12 +32,19 @@ export class UITabs extends Tabs<UITab> {
     this.#options = options;
   }
 
-  override createTabInstance(page: Page, options: TabOptions): UITab {
+  override async createTabInstance(
+    page: Page,
+    options: TabOptions,
+  ): Promise<UITab> {
     const uiOptions: UITabOptions = {
       ...options,
       cast: this.#options.cast,
+      injectVisibilityScript: true,
     };
-    return new UITab(page, this.#canvas, uiOptions);
+    const tab = new UITab(page, this.#canvas, uiOptions);
+    await tab.init();
+
+    return tab;
   }
 }
 

packages/browser-ui/src/types/model.ts

@@ -34,4 +34,7 @@ export interface UITabsOptions extends TabsOptions {
   cast?: CastOptions;
 }
 
-export type ScreenCastOptions = Omit<UITabOptions, 'envInfo' | 'userAgentInfo'>;
+export type ScreenCastOptions = Omit<
+  UITabOptions,
+  'envInfo' | 'userAgentInfo' | 'injectVisibilityScript'
+>;

packages/browser/src/injected-script/visibility.ts

@@ -9,6 +9,11 @@
 
 export const visibilityScript = /* javascript */ `
 function agentInfraVisibilityScript() {
+  if (window.__agent_infra_browser.visibility) {
+    return;
+  }
+  window.__agent_infra_browser.visibility = true;
+
   if (window.top !== window) {
     return;
   }

packages/browser/src/injected-script/webdriver.ts

@@ -7,6 +7,11 @@
 
 export const disableWebdriver = /* javascript */ `
 function agentInfraDriver() {
+  if (window.__agent_infra_browser.webdriver) {
+    return;
+  }
+  window.__agent_infra_browser.webdriver = true;
+
   delete navigator.webdriver;
 
   const originalNavigator = navigator;

packages/browser/src/tabs/tab.ts

@@ -40,7 +40,7 @@ export class Tab extends EventEmitter<TabEventsMap> {
   #isLoading = false;
   #reloadAbortController: AbortController | null = null;
 
-  #scriptsOnCreate: string[] = [disableWebdriver, visibilityScript];
+  #scriptsOnCreate: string[] = [disableWebdriver];
   #scriptsOnLoad: string[] = [];
 
   constructor(page: Page, options: TabOptions) {
@@ -58,20 +58,26 @@ export class Tab extends EventEmitter<TabEventsMap> {
     this.#keyboard = new Keyboard(page, this.#tabDialog, options.envInfo);
     this.#mouse = new Mouse(page, this.#tabDialog);
 
-    this.#setupVisibilityTracking();
-    this.#executeScriptsOnCreate();
-
-    // Set user agent if provided
-    if (options.userAgentInfo) {
-      this.#pptrPage.setUserAgent(options.userAgentInfo);
-    }
-
     // page events: https://pptr.dev/api/puppeteer.pageevent
     this.#pptrPage.on('domcontentloaded', this.#dclHandler);
     this.#pptrPage.on('load', this.#loadHandler);
     this.#pptrPage.on('framenavigated', this.#frameNavigatedHandler);
   }
 
+  async init() {
+    // Only setup visibility tracking if visibility script is injected
+    if (this.#options.injectVisibilityScript) {
+      this.#scriptsOnCreate.push(visibilityScript);
+      await this.#setupVisibilityTracking();
+    }
+
+    await this.#executeScriptsOnCreate();
+
+    if (this.#options.userAgentInfo) {
+      await this.#pptrPage.setUserAgent(this.#options.userAgentInfo);
+    }
+  }
+
   // #region meta info
 
   get tabId() {
@@ -464,8 +470,10 @@ export class Tab extends EventEmitter<TabEventsMap> {
   async #executeScriptsOnCreate() {
     try {
       const script = iife(this.#scriptsOnCreate.join('\n'));
-      await this.#pptrPage.evaluateOnNewDocument(script);
-      await this.#pptrPage.evaluate(script);
+      await Promise.race([
+        this.#pptrPage.evaluateOnNewDocument(script),
+        this.#pptrPage.evaluate(script),
+      ]);
     } catch (error) {
       console.warn('Failed to execute script on create:', error);
     }

packages/browser/src/tabs/tabs.ts

@@ -70,8 +70,14 @@ export class Tabs<T extends Tab = Tab> {
     };
   }
 
-  protected createTabInstance(page: Page, options: TabOptions): T {
-    return new Tab(page, options) as T;
+  protected async createTabInstance(
+    page: Page,
+    options: TabOptions,
+  ): Promise<T> {
+    const tab = new Tab(page, options) as T;
+    await tab.init();
+
+    return tab;
   }
 
   // #region init ExistingTabs
@@ -91,7 +97,7 @@ export class Tabs<T extends Tab = Tab> {
       .map(async (pptrPage) => {
         // @ts-ignore
         const tabId = pptrPage.target()._targetId;
-        const tab = this.createTabInstance(pptrPage, {
+        const tab = await this.createTabInstance(pptrPage, {
           tabId: tabId,
           ...this.#options,
         });
@@ -127,7 +133,7 @@ export class Tabs<T extends Tab = Tab> {
     }
     this.#operations.creatingTargetIds.add(targetId);
 
-    const tab = this.createTabInstance(pptrPage, {
+    const tab = await this.createTabInstance(pptrPage, {
       tabId: targetId,
       ...this.#options,
     });

packages/browser/src/types/tabs.ts

@@ -20,6 +20,7 @@ export interface TabsOptions {
 
 export interface TabOptions extends TabsOptions {
   tabId: string;
+  injectVisibilityScript?: boolean;
 }
 
 export const enum TabEvents {

packages/browser/src/utils/iife.ts

@@ -3,9 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 export const iife = (script: string) => /* javascript */ `(() => {
-  if (window.__agent_infra_injected_script) {
-    return;
+  if (!window.__agent_infra_browser) {
+    window.__agent_infra_browser = {};
   }
-  window.__agent_infra_injected_script = true;
   ${script}
 })();`;