feat: enable the chrome-remote-interface

package.json

@@ -50,12 +50,14 @@
         "@eslint/eslintrc": "^3.3.1",
         "@eslint/js": "^9.23.0",
         "@types/adm-zip": "^0.5.0",
+        "@types/chrome-remote-interface": "^0.31.14",
         "@types/jest": "^29.0.0",
         "@types/node": "^22.0.0",
         "@types/node-fetch": "^2.6.1",
         "@types/puppeteer": "^7.0.0",
         "@types/useragent": "^2.3.1",
         "browserslist": "^4.21.1",
+        "chrome-remote-interface": "^0.33.3",
         "eslint": "^9.23.0",
         "eslint-config-prettier": "^10.1.1",
         "fast-csv": "^5.0.0",

packages/fingerprint-injector/src/fingerprint-injector.ts

@@ -1,4 +1,5 @@
 import { readFileSync } from 'fs';
+import CDP from 'chrome-remote-interface';
 
 import {
     BrowserFingerprintWithHeaders,
@@ -19,6 +20,13 @@ interface EnhancedFingerprint extends Fingerprint {
     historyLength: number;
 }
 
+type AttachFingerprintToCDPparams = {
+    page: CDP.StableDomains['Page'];
+    network: CDP.StableDomains['Network'];
+    emulation: CDP.StableDomains['Emulation'];
+    browser: CDP.StableDomains['Browser'];
+};
+
 declare function overrideInstancePrototype<T>(
     instance: T,
     overrideObj: Partial<T>,
@@ -166,6 +174,51 @@ export class FingerprintInjector {
         );
     }
 
+    /**
+     * Adds script that is evaluated before every document creation.
+     * Sets User-Agent and viewport using native puppeteer interface
+     * @param params AttachFingerprintToCDPparams `AttachFingerprintToCDPparams` object to be injected with the fingerprint.
+     * @param fingerprint Fingerprint from [`fingerprint-generator`](https://github.com/apify/fingerprint-generator).
+     */
+    async attachFingerprintToCDP(
+        { page, network, emulation, browser }: AttachFingerprintToCDPparams,
+        browserFingerprintWithHeaders: BrowserFingerprintWithHeaders,
+    ): Promise<void> {
+        const { fingerprint, headers } = browserFingerprintWithHeaders;
+        const enhancedFingerprint = this._enhanceFingerprint(fingerprint);
+        const { screen, userAgent } = enhancedFingerprint;
+
+        await network.setUserAgentOverride({ userAgent });
+        const { product: browserVersion } = await browser.getVersion();
+
+        if (!browserVersion.toLowerCase().includes('firefox')) {
+            page.setDeviceMetricsOverride({
+                screenHeight: screen.height,
+                screenWidth: screen.width,
+                width: screen.width,
+                height: screen.height,
+                mobile: /phone|android|mobile/i.test(userAgent),
+                screenOrientation:
+                    screen.height > screen.width
+                        ? { angle: 0, type: 'portraitPrimary' }
+                        : { angle: 90, type: 'landscapePrimary' },
+                deviceScaleFactor: screen.devicePixelRatio,
+            });
+
+            await network.setExtraHTTPHeaders({
+                headers: this.onlyInjectableHeaders(headers, browserVersion),
+            });
+
+            await emulation.setEmulatedMedia({
+                features: [{ name: 'prefers-color-scheme', value: 'dark' }],
+            });
+        }
+
+        await page.addScriptToEvaluateOnNewDocument({
+            source: this.getInjectableFingerprintFunction(enhancedFingerprint),
+        });
+    }
+
     /**
      * Gets the override script that should be evaluated in the browser.
      */
@@ -375,3 +428,18 @@ export async function newInjectedPage(
 
     return page;
 }
+
+export async function newCDPInjector(
+    args: AttachFingerprintToCDPparams,
+    options?: {
+        fingerprint?: BrowserFingerprintWithHeaders;
+        fingerprintOptions?: Partial<FingerprintGeneratorOptions>;
+    },
+): Promise<void> {
+    const generator = new FingerprintGenerator();
+    const fingerprintWithHeaders =
+        options?.fingerprint ??
+        generator.getFingerprint(options?.fingerprintOptions ?? {});
+    const injector = new FingerprintInjector();
+    await injector.attachFingerprintToCDP(args, fingerprintWithHeaders);
+}

test/fingerprint-injector/crossbrowser.test.ts

@@ -1,10 +1,12 @@
 import {
     FingerprintInjector,
+    newCDPInjector,
     newInjectedContext,
     newInjectedPage,
 } from 'fingerprint-injector';
 import playwright from 'playwright';
-import puppeteer from 'puppeteer';
+import puppeteer, { Browser } from 'puppeteer';
+import CDP from "chrome-remote-interface";
 
 function generateCartesianMatrix(A: any, B: any) {
     const matrix = [];
@@ -81,3 +83,50 @@ describe('Puppeteer controlled instances', () => {
         },
     );
 });
+describe('CDP controller instances', () => {
+    const fingerprintBrowsers = [
+        'chrome',
+        'firefox',
+        'safari',
+        'edge',
+    ] as const;
+    test.each(fingerprintBrowsers)(
+        `should inject %s fingerprint`,
+        async (fingerprintBrowser: (typeof fingerprintBrowsers)[number]) => {
+            const puppeteer_browser = await puppeteer.launch({
+                browser: 'chrome',
+                debuggingPort: 9222, // need to specify it explicitly or puppeteer launcher won't open it up
+                headless: true,
+            });
+            const webSocketDebuggerUrl = puppeteer_browser.wsEndpoint();
+            const client = await CDP({ target: webSocketDebuggerUrl });
+            const { Target } = client;
+
+            // getting the default 'about:blank' page
+            const { targetInfos} = await Target.getTargets();
+            const ctx_client = await CDP({ target: targetInfos[0].targetId });
+
+            const { Network, Page, Browser, Emulation } = ctx_client;
+            await Network.enable();
+            await Page.enable();
+
+            await newCDPInjector({
+                network: Network,
+                page: Page,
+                browser: Browser,
+                emulation: Emulation,
+            }, {
+                fingerprintOptions: {
+                    browsers: [fingerprintBrowser],
+                },
+                });
+
+            const { frameId } = await Page.navigate({
+                url: 'http://example.com',
+            });
+            expect(frameId).toBeDefined();
+            await client.close();
+            await puppeteer_browser.close();
+        },
+    );
+});