【爬虫】浏览器插件

下载插件起始代码：
chrome-extension-boilerplate-react-vite

在IDE中打开：

并使用：

bash 复制代码

pnpm install

使用

bash 复制代码

pnpm dev

跑起来程序。

打开chrome浏览器扩展页面：

打开加载已解压的扩展程序，选择dist文件夹

第一步：分析网页结构：

第二部：查看页面源代码，找到需要爬取信息的重复模块并复制。

提示词模板：

请你给我获取这个页面上所有类似元素的选择器的JavaScript代码，并且返回给我数组的形式。我希望能爬取到所有数据，我要爬取的字段是：

1.课程图片 u-courseCardWithTime-img

2.课程名称 f-thide u-courseCardWithTime-teacher_span

3.课程所属大学 f-thide u-courseCardWithTime-school_span

4.曾观看人数 u-icon-person

5.课程状态 txt isover_span

需要注意：不要使用特殊类名或者包含Hash的元素选择器，而是找元素位置的规律

提示词：模板

(() => {

// 1) 选取所有课程卡片的入口链接：用 href 的结构规律，而不是类名

const anchors = Array.from(document.querySelectorAll('a $href\*="/course/"$ '))

.filter(a => /^/?/?www.icourse163.org/course//.test(a.getAttribute('href') || '') || //course//.test(a.href || ''))

// 只保留看起来像课程卡片的（包含图片）

.filter(a => a.querySelector('img'));

// 2) 将每个课程卡片按结构位置解析：

// 结构规律（从的直接子元素顺序判断）：

// 0: 图片容器 -> 内含

// 1: 课程名称容器 -> 内含文本

// 2: 学校容器 -> 内含文本

// 3: 时间/状态容器 -> 内含"已结束/进行中"等文本

// 4: 人数容器 -> 内含"人"或数字（常伴随一个人形图标元素）

const data = anchors.map(a => {

const sections = Array.from(a.querySelectorAll(':scope > div'));

复制代码

// 图片
const imgEl = sections[0]?.querySelector('img');
const image = imgEl?.getAttribute('src') || imgEl?.getAttribute('data-src') || '';

// 课程名称
const courseName = (sections[1]?.textContent || '').trim();

// 所属大学
const university = (sections[2]?.textContent || '').trim();

// 课程状态（优先从第 3 块中取最靠内的文本）
const statusRaw = (sections[3]?.textContent || '').trim();
const status = statusRaw.replace(/\s+/g, ''); // 页面上常无空格，这里规整一下

// 曾观看人数（从第 4 块里提取数字）
const peopleText = (sections[4]?.textContent || '').replace(/\s+/g, '');
const peopleMatch = peopleText.match(/\d[\d,]*/);
const people = peopleMatch ? peopleMatch[0].replace(/,/g, '') : '';

return {
  image,                    // 课程图片
  courseName,               // 课程名称
  university,               // 课程所属大学
  people,                   // 曾观看人数
  status                    // 课程状态
};

});

return data;

})();

请根据上面的代码，完成数据获取的逻辑：

1.请你移除掉 @Popup.tsx 中所有的样式

2.在 @Popup.tsx 中添加一个按钮，按钮叫做：获取课程数据

3.该按钮只在 @https://www.icourse163.org/university/PKU#/c 页面才能点击

4.用户点击按钮，执行你上面的代码，获取数据

5.获取到的数据保存为CSV格式文件，并且本地下载。

分页提示词：

这个页面有一个分页逻辑，我希望在点击按钮之后，你能自动帮我从第一页自动的开始跳转，等两秒后获取当前页面数据，然后跳转下一页，知道最后一页。

到最后一页的标识是下一页按钮出现js-disabled这个类名。然后保存全部的数据到我的CSV数据表中。