Puppetter #77

WangShuXian6 · 2019-04-28T06:50:15Z

Puppetter

安装

pnpm i puppeteer -S

https://pptr.dev/
https://zhaoqize.github.io/puppeteer-api-zh_CN/

国内源
cnpm/cnpmjs.org#1246

PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org
npm i puppeteer

npm config set puppeteer_download_host=https://storage.googleapis.com.cnpmjs.org

WangShuXian6 · 2024-11-07T01:52:45Z

windows 11 启动后自动打开浏览器播放音频[没有限制]

新建 vite react 项目

pnpm create vite

音频文件

src\assets\纵贯线-公路.mp3

音频播放组件

src\components\AutoPlayAudio.tsx

import React, { useEffect, useRef } from "react";

import AudioFile from "../assets/纵贯线-公路.mp3";

export const AutoPlayAudio: React.FC = () => {
  // 使用泛型来指定引用元素的类型
  const audioRef = useRef<HTMLAudioElement | null>(null);

  useEffect(() => {
    // 确保引用元素存在后再尝试播放音频
    if (audioRef.current) {
      audioRef.current.play().catch((error) => {
        console.error("自动播放失败，可能需要用户交互", error);
      });
    }
  }, []);

  return (
    <div>
      <audio ref={audioRef} controls>
        <source src={AudioFile} type="audio/mpeg" />
        您的浏览器不支持 audio 元素。
      </audio>
    </div>
  );
};

使用组件

src\App.tsx

import './App.css'
import { AutoPlayAudio } from './components/AutoPlayAudio'

function App() {

  return (
    <>
      <AutoPlayAudio />
    </>
  )
}

export default App

puppeteer

安装

pnpm i puppeteer -S

npm-run-all 执行多个npm 命令

pnpm i npm-run-all -S

打开 puppeteer ，访问本地网页播放音频脚本

src\script\auto-play.js

import puppeteer from 'puppeteer';

(async () => {
  // 启动浏览器，并禁用自动播放限制
  const browser = await puppeteer.launch({
    headless: false, // 使用无头模式（设置为 true 则浏览器窗口不可见）
    args: ['--autoplay-policy=no-user-gesture-required'] // 禁用自动播放限制
  });

  // 打开新页面
  const page = await browser.newPage();

  // 导航到需要播放音频的网页
  await page.goto('http://localhost:5173/', { waitUntil: 'networkidle2' });

  // 使用 JavaScript 直接触发播放
  await page.evaluate(() => {
    // 获取音频元素
    const audio = document.querySelector('audio');
    if (audio) {
      audio.play().catch((error) => {
        console.error('自动播放失败', error);
      });
    } else {
      console.error('找不到音频元素');
    }
  });

  // 使用 setTimeout 进行等待
  //await new Promise(resolve => setTimeout(resolve, 10000)); // 等待 10 秒

  // 关闭浏览器
  //await browser.close();
})();

package.json

关键脚本

"dev": "vite",
"play": "node src/script/auto-play.js",
"start-all": "npm-run-all --parallel dev play"

{
  "name": "vite-audio",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "play": "node src/script/auto-play.js",
    "start-all": "npm-run-all --parallel dev play"
  },
  "dependencies": {
    "npm-run-all": "^4.1.5",
    "puppeteer": "^23.7.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^9.13.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "globals": "^15.11.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.11.0",
    "vite": "^5.4.10"
  }
}

windows 启动执行

bash 命令脚本

src\script\auto-play.bat

@echo off
timeout /t 10
cd /d D:\test\vite-audio
npm run start-all > start_log.txt 2>&1
pause

使用 pause 命令防止脚本立即关闭，以便查看可能的错误信息

添加启动延迟 timeout /t 10

将输出重定向到日志文件以帮助调试
npm run start-all > start_log.txt 2>&1

将脚本添加到 Windows 启动目录，以便在系统启动时自动运行。

按下 Win + R 键，输入 shell:startup，按下回车。

将 auto-play.bat 脚本复制到打开的启动文件夹中。

WangShuXian6 · 2024-11-07T02:02:47Z

Puppeteer 尺寸或全屏

在使用 Puppeteer 打开浏览器时，可以通过设置浏览器窗口的尺寸来实现“全屏”的效果，或者通过模拟按下全屏快捷键。以下是两种常用的方法：

方法 1：设置浏览器窗口尺寸为全屏

您可以通过 puppeteer.launch() 时传递 args 参数来设置浏览器的窗口尺寸，使其占据整个屏幕。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,  // 确保浏览器不是无头模式
    args: [
      '--start-maximized',  // 启动时最大化窗口
    ],
  });

  const page = await browser.newPage();

  // 设置页面视口大小为全屏
  await page.setViewport({
    width: 1920,   // 设置为您的屏幕宽度
    height: 1080,  // 设置为您的屏幕高度
  });

  // 在此执行页面操作
  await page.goto('https://example.com');

  // 浏览器操作...

  // 关闭浏览器
  // await browser.close();
})();

解释：

--start-maximized：此参数将浏览器窗口启动为最大化状态。
page.setViewport()：设置页面视口为全屏，参数值应与实际屏幕分辨率相匹配。

方法 2：使用 JavaScript 模拟按键进入全屏模式

您还可以通过在页面上运行 JavaScript 代码，模拟按下键盘快捷键来使页面进入全屏模式。以下是一个简单的方法：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: null,
  });

  const page = await browser.newPage();
  await page.goto('https://example.com');

  // 使用页面脚本模拟全屏
  await page.evaluate(() => {
    document.documentElement.requestFullscreen().catch(err => {
      console.error(`Error attempting to enable full-screen mode: ${err.message}`);
    });
  });

  // 浏览器操作...

  // 关闭浏览器
  // await browser.close();
})();

解释：

page.evaluate()：在页面上运行 JavaScript 代码。
document.documentElement.requestFullscreen()：使整个页面元素进入全屏模式。
catch()：捕捉可能的错误（例如不支持全屏的浏览器限制）。

方法 3：模拟按键 F11（Windows 系统）

您也可以使用 Puppeteer 模拟按下键盘上的 F11 键，通常这会触发浏览器的全屏模式。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: null,
  });

  const page = await browser.newPage();
  await page.goto('https://example.com');

  // 模拟按下 F11 键进入全屏模式
  await page.keyboard.press('F11');

  // 浏览器操作...

  // 关闭浏览器
  // await browser.close();
})();

总结

设置启动参数：通过 args: ['--start-maximized'] 将窗口最大化。
调整视口尺寸：使用 page.setViewport() 将页面调整为目标屏幕分辨率。
使用 JavaScript API：通过 requestFullscreen() 实现页面全屏。
模拟按键 F11：通过 page.keyboard.press('F11') 让浏览器进入全屏模式。

您可以根据您的具体需求和使用场景选择合适的方法来实现 Puppeteer 浏览器的自动全屏效果。

WangShuXian6 · 2024-11-07T02:04:27Z

Puppeteer 绕过限制

Puppeteer 确实能够控制 Chromium 浏览器（或 Chrome），并通过模拟用户操作的方式绕过一些常规浏览器的限制，例如自动播放视频、禁用弹窗等。但是，它并不能完全无视所有的浏览器安全策略或限制。以下是 Puppeteer 对于自动播放和一些浏览器限制的处理方式：

1. 自动播放（AutoPlay）

现代浏览器对于自动播放音视频内容会有所限制，特别是对于带有声音的视频，通常需要用户交互才能播放。这是为了减少未经用户允许的内容打扰。然而，Puppeteer 可以通过指定一些启动参数来绕过这些限制。

例如，可以使用以下参数来启用自动播放：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--autoplay-policy=no-user-gesture-required'  // 允许自动播放
    ]
  });

  const page = await browser.newPage();
  await page.goto('https://example.com');

  // 此处可以执行更多页面操作，例如播放视频
  // await page.click('video');

  // 关闭浏览器
  // await browser.close();
})();

解释：

--autoplay-policy=no-user-gesture-required：这个参数让 Chromium 允许自动播放音频和视频，即使没有用户交互也能自动播放。

2. 绕过浏览器权限限制

Puppeteer 也可以模拟用户的操作来绕过某些权限提示。例如，它可以自动接受位置请求或允许通知。对于很多浏览器中的权限限制，Puppeteer 可以通过 page.setPermission() 来配置页面的权限：

await page.setPermission('geolocation', 'granted');

这样，可以在页面加载时自动授权地理位置访问。

3. 禁用弹出窗口和广告

在 Puppeteer 中可以通过在启动浏览器时添加一些配置参数来禁用一些常见的弹出窗口、广告或其他干扰项。例如：

const browser = await puppeteer.launch({
  headless: false,
  args: [
    '--disable-popup-blocking', // 禁用弹窗拦截
    '--no-sandbox',             // 在沙盒环境下运行
    '--disable-infobars',       // 禁用“Chrome 正在受到自动化软件的控制”的信息栏
  ]
});

4. CSP（内容安全策略）限制

有些网页启用了内容安全策略（CSP），可能会限制某些类型的操作，比如内嵌脚本执行或者外部资源加载。Puppeteer 可以通过以下方式禁用 CSP 以绕过这些限制：

await page.setBypassCSP(true);

这样，页面就可以绕过内容安全策略加载一些被限制的资源。

5. 自动处理浏览器权限对话框

对于一些浏览器权限请求（如麦克风、摄像头、地理位置等），可以通过页面的事件监听来自动处理对话框：

page.on('dialog', async dialog => {
  await dialog.accept();  // 自动接受对话框
});

6. 禁用 WebRTC 限制

WebRTC（实时通信）会暴露用户的 IP 地址。在 Puppeteer 中，你可以通过添加一些启动参数来禁用这个特性：

const browser = await puppeteer.launch({
  headless: false,
  args: [
    '--disable-webrtc'  // 禁用 WebRTC，防止 IP 泄露
  ]
});

总结

Puppeteer 确实能够通过指定一些启动参数、脚本操作等绕过大部分的浏览器限制，包括自动播放视频、弹窗处理、内容安全策略等。然而，它并不能完全绕过所有安全策略，例如某些严格的浏览器内置的安全策略或需要特殊条件触发的用户操作。通过合理配置 Puppeteer 的选项，大多数浏览器限制确实可以较为容易地被自动化脚本绕过。

WangShuXian6 · 2024-11-07T02:41:26Z

chrome 自动播放音频视频

网站设置

声音-允许

结果

WangShuXian6 added the Headless label Apr 30, 2019

WangShuXian6 added Puppetter e2e 端到端 Test 测试 labels Nov 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Puppetter #77

Puppetter #77

WangShuXian6 commented Apr 28, 2019 •

edited

Loading

WangShuXian6 commented Nov 7, 2024

WangShuXian6 commented Nov 7, 2024

WangShuXian6 commented Nov 7, 2024

WangShuXian6 commented Nov 7, 2024 •

edited

Loading

Puppetter #77

Puppetter #77

Comments

WangShuXian6 commented Apr 28, 2019 • edited Loading

Puppetter

安装

WangShuXian6 commented Nov 7, 2024

windows 11 启动后自动打开浏览器播放音频[没有限制]

新建 vite react 项目

音频文件

音频播放组件

使用组件

puppeteer

安装

打开 puppeteer ，访问本地网页播放音频 脚本

package.json

windows 启动执行

bash 命令脚本

将脚本添加到 Windows 启动目录，以便在系统启动时自动运行。

WangShuXian6 commented Nov 7, 2024

Puppeteer 尺寸或全屏

方法 1：设置浏览器窗口尺寸为全屏

解释：

方法 2：使用 JavaScript 模拟按键进入全屏模式

解释：

方法 3：模拟按键 F11（Windows 系统）

总结

WangShuXian6 commented Nov 7, 2024

Puppeteer 绕过限制

1. 自动播放（AutoPlay）

2. 绕过浏览器权限限制

3. 禁用弹出窗口和广告

4. CSP（内容安全策略）限制

5. 自动处理浏览器权限对话框

6. 禁用 WebRTC 限制

总结

WangShuXian6 commented Nov 7, 2024 • edited Loading

WangShuXian6 commented Apr 28, 2019 •

edited

Loading

打开 puppeteer ，访问本地网页播放音频脚本

WangShuXian6 commented Nov 7, 2024 •

edited

Loading