[WIP] Typescript Port. #67

UrielCh · 2022-06-27T16:45:52Z

WIP

timondurot · 2023-08-13T21:16:39Z

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

> [email protected] tsc
> npm run clean-dist && npm run tsc-cjs && npm run tsc-esm


> [email protected] clean-dist
> rimraf dist


> [email protected] 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 · 2023-08-14T09:17:17Z

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 · 2023-08-14T09:18:03Z

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

timondurot · 2023-08-14T09:44:37Z

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/[email protected]/node_modules/axios
lrwxrwxrwx 1 timon timon   40 Aug 14 11:36 cpy-cli -> .pnpm/[email protected]/node_modules/cpy-cli
lrwxrwxrwx 1 timon timon   44 Aug 14 11:36 cross-env -> .pnpm/[email protected]/node_modules/cross-env
lrwxrwxrwx 1 timon timon   44 Aug 14 11:36 font-list -> .pnpm/[email protected]/node_modules/font-list
lrwxrwxrwx 1 timon timon   43 Aug 14 11:36 fs-extra -> .pnpm/[email protected]/node_modules/fs-extra
lrwxrwxrwx 1 timon timon   50 Aug 14 11:36 jest -> .pnpm/[email protected][email protected]/node_modules/jest
lrwxrwxrwx 1 timon timon   69 Aug 14 11:36 jest-environment-node -> .pnpm/[email protected]/node_modules/jest-environment-node
lrwxrwxrwx 1 timon timon   33 Aug 14 11:36 koa -> .pnpm/[email protected]/node_modules/koa
lrwxrwxrwx 1 timon timon   42 Aug 14 11:36 koa-body -> .pnpm/[email protected]/node_modules/koa-body
lrwxrwxrwx 1 timon timon   46 Aug 14 11:36 koa-static -> .pnpm/[email protected]/node_modules/koa-static
lrwxrwxrwx 1 timon timon   38 Aug 14 11:36 mkdirp -> .pnpm/[email protected]/node_modules/mkdirp
lrwxrwxrwx 1 timon timon   33 Aug 14 11:36 npm -> .pnpm/[email protected]/node_modules/npm
lrwxrwxrwx 1 timon timon   40 Aug 14 11:36 pidtree -> .pnpm/[email protected]/node_modules/pidtree
lrwxrwxrwx 1 timon timon   45 Aug 14 11:36 puppeteer -> .pnpm/[email protected]/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/[email protected]/node_modules/rimraf
lrwxrwxrwx 1 timon timon   78 Aug 14 11:36 ts-node -> .pnpm/[email protected]_@[email protected][email protected]/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/[email protected]/node_modules/typescript
lrwxrwxrwx 1 timon timon   48 Aug 14 11:36 url-toolkit -> .pnpm/[email protected]/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

> [email protected] build /home/timon/Desktop/ZAZAScript/fakebrowser
> npm run tsc


> [email protected] tsc
> npm run clean-dist && npm run tsc-cjs && npm run tsc-esm


> [email protected] clean-dist
> rimraf dist


> [email protected] 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 · 2023-08-14T19:59:49Z

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 · 2023-08-14T21:20:08Z

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

UrielCh added 29 commits June 10, 2022 20:21

add exports + add importer.ts

407f1fc

improve importer + improve types

71d9f68

improve importer

ddd7e1c

improve loader to improve development speed

18f78d1

PREPARE FOR BIG CHANGES

3944a4f

first pass

b0db8f0

TS

ce3b84b

more TS

38a7707

more TS

9120c38

more TS

2a12be0

more TS

2c3dd73

conver TS

9094e97

TS

8a0da4e

TS

5c5d52e

build pass

0771fa6

up[date package.json

3ed652e

clean fakebrowserEnv.js

9abdb24

test run 5 failed, 1 passed, 6 total

7b29735

Test Suites: 6 passed, 6 total

e753af5

improve withUtils

5b9c1a5

defrag code

e72e749

improve launcher

8f86d21

add isInteger + clean

23486fa

speedup test

e4e5252

reduce navigator.plugins-native

d857222

compact code

579f2ca

compress

dc9db2c

improve importer

a369515

update tests

f046c69

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Typescript Port. #67

[WIP] Typescript Port. #67

UrielCh commented Jun 27, 2022

timondurot commented Aug 13, 2023 •

edited

Loading

UrielCh commented Aug 14, 2023

UrielCh commented Aug 14, 2023

timondurot commented Aug 14, 2023

timondurot commented Aug 14, 2023

UrielCh commented Aug 14, 2023

[WIP] Typescript Port. #67

Are you sure you want to change the base?

[WIP] Typescript Port. #67

Conversation

UrielCh commented Jun 27, 2022

timondurot commented Aug 13, 2023 • edited Loading

UrielCh commented Aug 14, 2023

UrielCh commented Aug 14, 2023

timondurot commented Aug 14, 2023

timondurot commented Aug 14, 2023

UrielCh commented Aug 14, 2023

timondurot commented Aug 13, 2023 •

edited

Loading