目录

1.起因

2.思路

3.分析

3.1iframe嵌入及跨站注入

3.2随机元素名称或ID的捕获

3.3连续播放

4.训练AI生成代码

4.1跨iframe及点击canvas的代码生成

4.2定时器的代码生成

5.最终生成的代码

6.部署

1.起因

原始需求：最近因某些原因，需要登录某继续教育网站，通过在线学习网课获得认证。然而，该网站的课程播放页面做了诸多限制，比如浏览器切换到后台时，课程自动停止播放；本节课播放完毕后，没法继续自动播放下一节课等。这对于忙于工作的我来说很不方便，毕竟还有许多工作需要在电脑上完成，实在是不能保证浏览器始终在前台工作，而公司又不可能为此专配一台电脑用于刷课。况且即便有专用电脑刷课，还得等课程播放完毕后，时不时用鼠标点击下一节课的播放按钮，以便继续刷课。

2.思路

解决思路：由于网页源码不受控，拟采用JS注入方法实现需求。后考虑到要及时跟踪网站的防刷等变化，必须考虑低成本解决，于是想到使用浏览器的开发工具和AI相结合，解决课程播放的限制。

注：实现上述需求的过程中，我计划使用AI以低成本方式解决，并不打算亲自编写。个人观点：这也算一种使用AI提高工作效率的有益的尝试。

3.分析

打开继续教育平台，登录后打开课程播放页面，并打开开发工具，查看源码。

3.1iframe嵌入及跨站注入

如上图所示，课程播放页面内嵌了iframe，由另一个站点播放视频。因此，直接采用document捕获网页元素是不行的，必须首先获得iframe才可以。另外，还要考虑控制台操作iframe中的元素时，由于访问的是另一个站点，需要解决跨域访问的安全性问题。

3.2随机元素名称或ID的捕获

如上图所示，播放按钮的class采用了随机命名，比如图种canvas的class以play字符串开头，以-canvas字符串结尾。这在使用querySelectorAll时，是不能直接写死的。必须采用正则表达式进行匹配。

3.3连续播放

众所周知，新版本Chrome内核的浏览器在播放视频时，如果没有开启静音模式，一般在网页加载后没法自动播放的。在本次JavaScript注入时，我也遇到了这个问题，必须点击播放器的静音按钮后，视频才可以自动连续播放。因此，要对静音按钮也进行注入操作。

4.训练AI生成代码

借助AI生成代码时，要注意向AI给出清晰的提示词：清楚的描述代码编写需求，并注意将复杂的需求，转化为“少量多次”的子需求进行提出。

4.1跨iframe及点击canvas的代码生成

4.2定时器的代码生成

5.最终生成的代码

注：下面代码是AI自动生成的，本人并未参与编写，若有不足之处与我无关-_-||b

<code>// 函数：点击符合特定class模式的canvas元素

function clickCanvasWithSpecificClass() {

// 获取iframe的文档对象 浏览器需要加上参数启动以便解决跨域访问的问题

var iframe = document.getElementById('iframe'); // 假设iframe的id是'iframe'

var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

// 查找class以'play'开头且以'-canvas'结尾的canvas元素

var canvases = iframeDoc.querySelectorAll('canvas');

var targetCanvas = null;

for (var i = 0; i < canvases.length; i++) {

var className = canvases[i].className;

if (/^play.*-canvas$/.test(className)) {

targetCanvas = canvases[i];

break;

}

}

// 如果找到了匹配的canvas，则触发点击事件

if (targetCanvas) {

var clickEvent = new MouseEvent('click', {

bubbles: true,

cancelable: true,

view: iframe.contentWindow // 使用iframe的window对象

});

targetCanvas.dispatchEvent(clickEvent);

console.log('Canvas clicked!');

} else {

console.log('No matching canvas found.');

}

}

// 设置定时器，每隔5秒钟执行一次clickCanvasWithSpecificClass函数

setInterval(clickCanvasWithSpecificClass, 5000); // 5000毫秒 = 5秒

// 初始化一个状态变量来确定当前需要点击哪种canvas

var currentClickType = 'mute';

// 定义一个函数来交替点击两种类型的canvas

function alternateClickCanvases() {

// 获取iframe的文档对象

var iframe = document.getElementById('iframe'); // 假设iframe的id是'iframe'

var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

var canvases;

if (currentClickType === 'mute') {

// 选择所有class以'mute'开头并以'-canvas'结尾的canvas元素

canvases = iframeDoc.querySelectorAll('canvas[class^="mute"][class$="-canvas"]');

}

// 如果没有找到任何canvas，则不执行点击

if (canvases.length === 0) return;

// 点击找到的第一个canvas元素

var canvasToClick = canvases[0];

var clickEvent = new MouseEvent('click', {

bubbles: true,

cancelable: true,

view: window

});

canvasToClick.dispatchEvent(clickEvent);

console.log('Clicked canvas with class:', canvasToClick.className);

}

// 设置定时器，每隔1秒钟执行一次alternateClickCanvases函数

setInterval(alternateClickCanvases, 6000);

6.部署

1.浏览器启动时，要以--disable-web-security命令行参数启动

2.将上述代码保存在浏览器控制台的代码片段中，每次刷课时，打开开发工具选择此片段运行即可。