Using puppeteer-extra-plugin-stealth

.github/workflows/build.yml

@@ -2,12 +2,18 @@ name: Release
 
 on:
   release:
-    types: [published, prereleased]
+    types: [published]
 
 permissions:
   contents: write
   pull-requests: write
 
+env:
+  ZIP_LAMBDA: lambda-${{github.event.release.tag_name}}.zip
+  ZIP_CHROMIUM: chromium-${{github.event.release.tag_name}}.zip
+  ZIP_LIBS: libs-${{github.event.release.tag_name}}.zip
+  ZIP_FONTS: fonts-${{github.event.release.tag_name}}.zip
+
 jobs:
   upload-artifact:
     runs-on: ubuntu-latest
@@ -32,40 +38,40 @@ jobs:
         run: |
           yarn build
           echo '{"type": "module"}' > dist/package.json
-          zip -rj lambda.zip dist
+          zip -rj ${{env.ZIP_LAMBDA}} dist
 
       - name: Build `chromium` layer
         run: |
           mkdir work-chromium
           cd work-chromium
           git clone --depth=1 https://github.com/sparticuz/chromium.git
           cd chromium
-          make chromium.zip
-          mv chromium.zip ../../
+          make ${{env.ZIP_CHROMIUM}}
+          mv ${{env.ZIP_CHROMIUM}} ../../
 
       - name: Build `libs` layer
         run: |
           mkdir nodejs
           rm -rf node_modules
           yarn workspaces focus --production
           cp -r node_modules nodejs
-          zip -r libs.zip nodejs
+          zip -r ${{env.ZIP_LIBS}} nodejs
 
       - name: Build `fonts` layer
         run: |
           mkdir work-fonts
           cd work-fonts
           git clone --depth=1 https://github.com/dev-protocol/stackroom.git
           cd stackroom/fonts
-          mv IBM_Plex_Sans_JP/* ./
+          mv IBM_Plex_Sans_JP/IBMPlexSansJP-Bold.ttf ./
           rm -rf IBM_Plex_Sans_JP
           mv Noto_Color_Emoji/* ./
           rm -rf Noto_Color_Emoji
           cd ../
-          zip -r fonts.zip fonts
-          mv fonts.zip ../../
+          zip -r ${{env.ZIP_FONTS}} fonts
+          mv ${{env.ZIP_FONTS}} ../../
 
       - name: Upload Artifact
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: gh release upload ${{ github.event.release.tag_name }} lambda.zip chromium.zip libs.zip fonts.zip
+        run: gh release upload ${{ github.event.release.tag_name }} ${{env.ZIP_LAMBDA}} ${{env.ZIP_CHROMIUM}} ${{env.ZIP_LIBS}} ${{env.ZIP_FONTS}}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "template-repos-ts",
-	"version": "2.0.4",
+	"version": "2.1.0-beta.4",
 	"description": "Template repository for using TypeScript",
 	"type": "module",
 	"scripts": {
@@ -14,10 +14,10 @@
 	"author": "Dev Protocol",
 	"license": "MPL-2.0",
 	"dependencies": {
-		"@devprotocol/util-ts": "^4.0.0",
 		"@sparticuz/chromium": "^132.0.0",
-		"aws-lambda": "^1.0.7",
-		"puppeteer-core": "23.6.0"
+		"puppeteer-core": "^24.2.0",
+		"puppeteer-extra": "^3.3.6",
+		"puppeteer-extra-plugin-stealth": "^2.11.2"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.12.0",
@@ -30,6 +30,7 @@
 		"@types/eslint-config-prettier": "^6.11.3",
 		"@types/eslint__js": "^8.42.3",
 		"@types/node": "22.7.9",
+		"aws-lambda": "1.0.7",
 		"dotenv": "16.4.5",
 		"eslint": "^9.12.0",
 		"eslint-config-prettier": "^9.1.0",

src/index.ts

@@ -30,7 +30,7 @@
 	'networkidle2',
 ] satisfies PuppeteerLifeCycleEvent[]
 
 export const handler: Handler = async ({
 	queryStringParameters,
 }: APIGatewayEvent): Promise<APIGatewayProxyResult> => {
 	console.log('queryStringParameters', queryStringParameters)
@@ -60,14 +60,15 @@
 		const browser = await Chromium.getInstance(options)
 		const page = await browser.newPage()
 
-		// set the viewport size
-		await page.setViewport({
-			width: width ? Math.abs(parseInt(width)) : 1920,
-			height: height ? Math.abs(parseInt(height)) : 1080,
-			deviceScaleFactor: 1,
-		})
-
-		await page.setRequestInterception(true)
+		await Promise.all([
+			// set the viewport size
+			page.setViewport({
+				width: width ? Math.abs(parseInt(width)) : 1920,
+				height: height ? Math.abs(parseInt(height)) : 1080,
+				deviceScaleFactor: 1,
+			}),
+			page.setRequestInterception(true),
+		])
 
 		// eslint-disable-next-line functional/no-return-void
 		page.on('request', (req) => {

src/libs/chromium.ts

@@ -1,17 +1,21 @@
 import type { Browser, PuppeteerLaunchOptions } from 'puppeteer-core'
-import puppeteer from 'puppeteer-core'
+import puppeteer from 'puppeteer-extra'
+import StealthPlugin from 'puppeteer-extra-plugin-stealth'
+
+// eslint-disable-next-line functional/no-expression-statements
+puppeteer.use(StealthPlugin())
 
 export const Chromium = (() => {
 	const instances: WeakMap<PuppeteerLaunchOptions, Browser> = new WeakMap()
 
 	const createInstance = (options: PuppeteerLaunchOptions) => {
 		// eslint-disable-next-line functional/no-expression-statements
 		console.log('&&&&&', 'new chromium instanse will be created')
 		return puppeteer.launch(options)
 	}
 
 	return {
 		getInstance: async (options: PuppeteerLaunchOptions) => {
 			const fromCache = instances.get(options)
 			const instance = fromCache
 				? fromCache

tsconfig.json

@@ -1,6 +1,6 @@
 {
 	"compilerOptions": {
-		"module": "nodenext",
+		"module": "es2022",
 		"lib": ["esnext"],
 		"target": "esnext",
 		"outDir": "dist",
@@ -9,6 +9,6 @@
 		"strict": true,
 		"esModuleInterop": true,
 		"skipLibCheck": true,
-		"moduleResolution": "nodenext"
+		"moduleResolution": "bundler"
 	}
 }