[WIP] Typescript Port.

[UrielCh]

WIP

[timondurot]

Hey @UrielCh,

Really love the code quality on your Typescript port of this pretty dead project. I'm currently struggling a little with building your heavy-duty branch (https://github.com/UrielCh/fakebrowser/tree/heavy-duty). I saw that I needed your other project puppeteer-extra-ts (https://github.com/UrielCh/puppeteer-extra-ts) because there are 3 linked dependencies in the package.json. I changed the double backslashes to make it linux compatible:

"puppeteer-extra": "link:../puppeteer-extra-ts/packages/puppeteer-extra",
"puppeteer-extra-plugin": "link:../puppeteer-extra-ts/packages/puppeteer-extra-plugin",
"puppeteer-extra-plugin-user-preferences": "link:../puppeteer-extra-ts/packages/puppeteer-extra-plugin-user-preferences"

I was able to clone and build puppeteer-extra-ts very easily. After running yarn install, the symlinks to puppeteer-extra-ts work. Symlinks look like this in fakebrowser/node_modules:

drwxr-xr-x  5 timon timon  4096 Aug 13 22:42 puppeteer
lrwxrwxrwx  1 timon timon    49 Aug 13 22:42 puppeteer-extra -> ../../puppeteer-extra-ts/packages/puppeteer-extra
lrwxrwxrwx  1 timon timon    56 Aug 13 22:42 puppeteer-extra-plugin -> ../../puppeteer-extra-ts/packages/puppeteer-extra-plugin
drwxr-xr-x  3 timon timon  4096 Aug 13 22:42 puppeteer-extra-plugin-user-data-dir
lrwxrwxrwx  1 timon timon    73 Aug 13 22:42 puppeteer-extra-plugin-user-preferences -> ../../puppeteer-extra-ts/packages/puppeteer-extra-plugin-user-preferences
drwxr-xr-x  7 timon timon  4096 Aug 13 22:42 qrcode-terminal

So it seems like the dependencies are all there. But when I finally try building (yarn build) your heavy-duty Fakebrowser, I get this:

fakebrowser $ yarn build
yarn run v1.22.19
warning package.json: License should be a valid SPDX license expression
warning ../package.json: No license field
$ npm run tsc

> fakebrowser@0.0.66 tsc
> npm run clean-dist && npm run tsc-cjs && npm run tsc-esm

> fakebrowser@0.0.66 clean-dist
> rimraf dist

> fakebrowser@0.0.66 tsc-cjs
> rimraf dist/cjs && tsc -b src/tsconfig.cjs.json && cpy src/plugins/evasions/_utils/index.js dist/cjs/plugins/evasions/_utils/

src/core/FakeBrowser.ts:7:10 - error TS2614: Module '"puppeteer-extra"' has no exported member 'PuppeteerExtra'. Did you mean to use 'import PuppeteerExtra from "puppeteer-extra"' instead?

7 import { PuppeteerExtra } from 'puppeteer-extra';
           ~~~~~~~~~~~~~~

src/core/PptrPatcher.ts:9:10 - error TS2614: Module '"puppeteer-extra"' has no exported member 'PuppeteerExtra'. Did you mean to use 'import PuppeteerExtra from "puppeteer-extra"' instead?

9 import { PuppeteerExtra, PuppeteerExtraPlugin } from 'puppeteer-extra'
           ~~~~~~~~~~~~~~

src/core/Driver.ts:4:20 - error TS2614: Module '"puppeteer-extra"' has no exported member 'PuppeteerExtra'. Did you mean to use 'import PuppeteerExtra from "puppeteer-extra"' instead?

4 import { addExtra, PuppeteerExtra, PuppeteerExtraPlugin } from 'puppeteer-extra'
                     ~~~~~~~~~~~~~~

src/plugins/evasions/font.fingerprint/index.ts:710:25 - error TS2345: Argument of type 'unknown' is not assignable to parameter of type 'object'.

710                         styleDeclaration,
                            ~~~~~~~~~~~~~~~~

src/plugins/evasions/navigator.mediaDevices/index.ts:88:25 - error TS2571: Object is of type 'unknown'.

88                         _Reflect.apply(target, thisArg, args).catch((e: Error) => e);
                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/plugins/evasions/webgl/main.ts:89:17 - error TS18046: 'result' is of type 'unknown'.

89                 result.alpha = fakeDD[fakeDDPropName].contextAttributes.alpha;
                   ~~~~~~

src/plugins/evasions/webgl/main.ts:90:17 - error TS18046: 'result' is of type 'unknown'.

90                 result.antialias = fakeDD[fakeDDPropName].contextAttributes.antialias;
                   ~~~~~~

src/plugins/evasions/webgl/main.ts:91:17 - error TS18046: 'result' is of type 'unknown'.

91                 result.depth = fakeDD[fakeDDPropName].contextAttributes.depth;
                   ~~~~~~

src/plugins/evasions/webgl/main.ts:92:17 - error TS18046: 'result' is of type 'unknown'.

92                 result.desynchronized = fakeDD[fakeDDPropName].contextAttributes.desynchronized;
                   ~~~~~~

src/plugins/evasions/webgl/main.ts:93:17 - error TS18046: 'result' is of type 'unknown'.

93                 result.failIfMajorPerformanceCaveat = fakeDD[fakeDDPropName].contextAttributes.failIfMajorPerformanceCaveat;
                   ~~~~~~

src/plugins/evasions/webgl/main.ts:94:17 - error TS18046: 'result' is of type 'unknown'.

94                 result.powerPreference = fakeDD[fakeDDPropName].contextAttributes.powerPreference;
                   ~~~~~~

src/plugins/evasions/webgl/main.ts:95:17 - error TS18046: 'result' is of type 'unknown'.

95                 result.premultipliedAlpha = fakeDD[fakeDDPropName].contextAttributes.premultipliedAlpha;
                   ~~~~~~

src/plugins/evasions/webgl/main.ts:96:17 - error TS18046: 'result' is of type 'unknown'.

96                 result.preserveDrawingBuffer = fakeDD[fakeDDPropName].contextAttributes.preserveDrawingBuffer;
                   ~~~~~~

src/plugins/evasions/webgl/main.ts:97:17 - error TS18046: 'result' is of type 'unknown'.

97                 result.stencil = fakeDD[fakeDDPropName].contextAttributes.stencil;
                   ~~~~~~

src/plugins/evasions/webgl/main.ts:98:17 - error TS18046: 'result' is of type 'unknown'.

98                 result.xrCompatible = fakeDD[fakeDDPropName].contextAttributes.xrCompatible;
                   ~~~~~~

src/plugins/evasions/webgl/main.ts:110:21 - error TS2322: Type 'unknown' is not assignable to type 'string'.

110                     shaderPrecisionFormat,
                        ~~~~~~~~~~~~~~~~~~~~~

  src/plugins/evasions/webgl/main.ts:5:5
    5     shaderPrecisionFormat: string,
          ~~~~~~~~~~~~~~~~~~~~~
    The expected type comes from property 'shaderPrecisionFormat' which is declared here on type 'ShadderCache'

src/plugins/evasions/webrtc/index.ts:59:41 - error TS2345: Argument of type 'unknown' is not assignable to parameter of type 'string'.

59                 const dest = replaceIps(org);
                                           ~~~

src/plugins/evasions/webrtc/index.ts:68:41 - error TS2345: Argument of type 'unknown' is not assignable to parameter of type 'string'.

68                 const dest = replaceIps(org);
                                           ~~~

src/plugins/evasions/webrtc/index.ts:86:41 - error TS2345: Argument of type 'unknown' is not assignable to parameter of type 'string'.

86                 const dest = replaceIps(org);
                                           ~~~

Found 19 errors.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

It seems like the puppeteer-extra that's linked from your puppeteer-extra-ts project is exporting the interface a little different? It's probably not that, but that's what the error hints at... Really stuck on this part.

I'd be really glad if you could look into this because Fakebrowser is a great project and I'd love to use your changes, especially because its not only a Typescript port but you also fixed all of the _client stuff which was getting undefined errors and such. Thanks!

[UrielCh]

hi,

first of all I use to work witgh pnpm, not yarn. to buiild my fork, you also need my forked puppeteer-extra-ts

https://github.com/UrielCh/puppeteer-extra-ts

once your clone this repo also clone https://github.com/UrielCh/puppeteer-extra-ts next to it.

[UrielCh]

so use pnpm, should be all you need to make it works.

[timondurot]

Heres the two folders i cloned:

timon@Newton ~/Desktop/ZAZAScript $ ls fakebrowser/ puppeteer-extra-ts/
fakebrowser/:
demo  device-hub-demo  doc  jest.config.js  LICENSE  node_modules  package.json  pnpm-lock.yaml  README.md  script  src  test  tsconfig.json

puppeteer-extra-ts/:
lerna.json  LICENSE  node_modules  package.json  packages  pnpm-lock.yaml  README.md  yarn-error.log  yarn.lock

And these are the symlinks inside fakebrowser/node_modules to your puppeteer-extra-ts folder:

timon@Newton ~/Desktop/ZAZAScript $ ls -l fakebrowser/node_modules/
total 16
lrwxrwxrwx 1 timon timon   37 Aug 14 11:36 axios -> .pnpm/axios@0.24.0/node_modules/axios
lrwxrwxrwx 1 timon timon   40 Aug 14 11:36 cpy-cli -> .pnpm/cpy-cli@3.1.1/node_modules/cpy-cli
lrwxrwxrwx 1 timon timon   44 Aug 14 11:36 cross-env -> .pnpm/cross-env@7.0.3/node_modules/cross-env
lrwxrwxrwx 1 timon timon   44 Aug 14 11:36 font-list -> .pnpm/font-list@1.4.5/node_modules/font-list
lrwxrwxrwx 1 timon timon   43 Aug 14 11:36 fs-extra -> .pnpm/fs-extra@10.1.0/node_modules/fs-extra
lrwxrwxrwx 1 timon timon   50 Aug 14 11:36 jest -> .pnpm/jest@27.5.1_ts-node@10.8.1/node_modules/jest
lrwxrwxrwx 1 timon timon   69 Aug 14 11:36 jest-environment-node -> .pnpm/jest-environment-node@27.3.1/node_modules/jest-environment-node
lrwxrwxrwx 1 timon timon   33 Aug 14 11:36 koa -> .pnpm/koa@2.13.4/node_modules/koa
lrwxrwxrwx 1 timon timon   42 Aug 14 11:36 koa-body -> .pnpm/koa-body@5.0.0/node_modules/koa-body
lrwxrwxrwx 1 timon timon   46 Aug 14 11:36 koa-static -> .pnpm/koa-static@5.0.0/node_modules/koa-static
lrwxrwxrwx 1 timon timon   38 Aug 14 11:36 mkdirp -> .pnpm/mkdirp@1.0.4/node_modules/mkdirp
lrwxrwxrwx 1 timon timon   33 Aug 14 11:36 npm -> .pnpm/npm@8.13.1/node_modules/npm
lrwxrwxrwx 1 timon timon   40 Aug 14 11:36 pidtree -> .pnpm/pidtree@0.6.0/node_modules/pidtree
lrwxrwxrwx 1 timon timon   45 Aug 14 11:36 puppeteer -> .pnpm/puppeteer@11.0.0/node_modules/puppeteer
lrwxrwxrwx 1 timon timon   49 Aug 14 11:36 puppeteer-extra -> ../../puppeteer-extra-ts/packages/puppeteer-extra
lrwxrwxrwx 1 timon timon   56 Aug 14 11:36 puppeteer-extra-plugin -> ../../puppeteer-extra-ts/packages/puppeteer-extra-plugin
lrwxrwxrwx 1 timon timon   73 Aug 14 11:36 puppeteer-extra-plugin-user-preferences -> ../../puppeteer-extra-ts/packages/puppeteer-extra-plugin-user-preferences
lrwxrwxrwx 1 timon timon   38 Aug 14 11:36 rimraf -> .pnpm/rimraf@3.0.2/node_modules/rimraf
lrwxrwxrwx 1 timon timon   78 Aug 14 11:36 ts-node -> .pnpm/ts-node@10.8.1_@types+node@17.0.41_typescript@4.7.3/node_modules/ts-node
drwxr-xr-x 2 timon timon 4096 Aug 14 11:36 @types
lrwxrwxrwx 1 timon timon   46 Aug 14 11:36 typescript -> .pnpm/typescript@4.7.3/node_modules/typescript
lrwxrwxrwx 1 timon timon   48 Aug 14 11:36 url-toolkit -> .pnpm/url-toolkit@2.2.5/node_modules/url-toolkit

I was able to build puppeteer-extra-ts with pnpm run bootstrap && pnpm build. After that i made sure the symlinks were there. Buidling fakebrowser with pnpm build gives this error still:

timon@Newton ~/Desktop/ZAZAScript/fakebrowser $ pnpm build

> fakebrowser@0.0.66 build /home/timon/Desktop/ZAZAScript/fakebrowser
> npm run tsc

> fakebrowser@0.0.66 tsc
> npm run clean-dist && npm run tsc-cjs && npm run tsc-esm

> fakebrowser@0.0.66 clean-dist
> rimraf dist

> fakebrowser@0.0.66 tsc-cjs
> rimraf dist/cjs && tsc -b src/tsconfig.cjs.json && cpy src/plugins/evasions/_utils/index.js dist/cjs/plugins/evasions/_utils/

src/core/FakeBrowser.ts:7:10 - error TS2614: Module '"puppeteer-extra"' has no exported member 'PuppeteerExtra'. Did you mean to use 'import PuppeteerExtra from "puppeteer-extra"' instead?

7 import { PuppeteerExtra } from 'puppeteer-extra';
           ~~~~~~~~~~~~~~

src/core/PptrPatcher.ts:9:10 - error TS2614: Module '"puppeteer-extra"' has no exported member 'PuppeteerExtra'. Did you mean to use 'import PuppeteerExtra from "puppeteer-extra"' instead?

9 import { PuppeteerExtra, PuppeteerExtraPlugin } from 'puppeteer-extra'
           ~~~~~~~~~~~~~~

src/core/Driver.ts:4:20 - error TS2614: Module '"puppeteer-extra"' has no exported member 'PuppeteerExtra'. Did you mean to use 'import PuppeteerExtra from "puppeteer-extra"' instead?

4 import { addExtra, PuppeteerExtra, PuppeteerExtraPlugin } from 'puppeteer-extra'
                     ~~~~~~~~~~~~~~

Found 3 errors.

 ELIFECYCLE  Command failed with exit code 1.

Sorry for all the questions I'm new to the whole nodejs environment...

[timondurot]

Hey @UrielCh

I have a hacky solution to this: fix the errors manually by replacing the imports in 3 files!

src/core/FakeBrowser.ts
replace this:
import { PuppeteerExtra } from 'puppeteer-extra';
with this:
import { PuppeteerExtra } from 'puppeteer-extra/dist/PuppeteerExtra'

src/core/PptrPatcher.ts
replace this:
import { PuppeteerExtra, PuppeteerExtraPlugin } from 'puppeteer-extra'
with this:
import { PuppeteerExtra } from 'puppeteer-extra/dist/PuppeteerExtra'
import { PuppeteerExtraPlugin } from 'puppeteer-extra/dist/index'

src/core/Driver.ts
replace this:
import { addExtra, PuppeteerExtra, PuppeteerExtraPlugin } from 'puppeteer-extra'
with this:
import { addExtra } from 'puppeteer-extra'
import { PuppeteerExtra } from 'puppeteer-extra/dist/PuppeteerExtra'
import { PuppeteerExtraPlugin } from 'puppeteer-extra/dist/index'

This makes it build on my machine, any idea why these weird patches are needed? Maybe I'm making a mistake somewhere in the build steps, is there a more elegant solution?

[UrielCh]

I did not touch this for a while. so it's hard for me to fix that without checking the code....