15分钟撸一个谷歌插件采集器

2024-02-20 15:49:18

15分钟撸一个谷歌插件采集器

背景

前段时间由于公司业务需要，需要爬取国外很多服装网站数据，刚刚开始用node superagent模块爬取一些比较传统没啥反爬的网站还是挺舒服，喝杯茶时间可能就爬完一整家网站了。但后续有些难啃的骨头，比如几个国际大牌（michael kors、tommy hilfiger、ralph lauren）网站反爬做的就非常好，尝试了很多方法（更换user agent、referer、cookie、X-Forwarded-For等），都无济于事，返回的都是反爬提示。

于是，打算换个思路试试。在Chrome扩展商店逛了一圈，发现了神器：“Octoparse”。这是一款非常强大的网页数据采集工具。只需几个简单的步骤，即可轻松创建采集任务。可以满足大部分网站数据的采集需求。

但是，Octoparse是收费的。我试用了一段时间，不得不说确实好用。不过，对我这种刚开始玩爬虫的人来说，还是有点贵了。

于是，我打算自己动手做一个。

插件开发

这里我使用谷歌扩展程序开发工具。

步骤1：创建新扩展程序

打开谷歌扩展程序开发工具，选择“新建扩展程序”，输入扩展程序的名称和版本号，然后点击“创建”。

步骤2：添加脚本

在“脚本”选项卡中，添加一个名为“content.js”的脚本文件。这个脚本将在网页上运行，负责抓取数据。

// content.js

// 获取当前网页的URL
const url = window.location.href;

// 获取当前网页的标题
const title = document.title;

// 获取当前网页的正文内容
const content = document.body.innerText;

// 将获取到的数据发送给后台脚本
chrome.runtime.sendMessage({ url, title, content });

步骤3：添加后台脚本

在“后台脚本”选项卡中，添加一个名为“background.js”的脚本文件。这个脚本将在扩展程序的后台运行，负责接收和处理从网页上抓取的数据。

// background.js

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // 获取从网页上抓取的数据
  const { url, title, content } = request;

  // 将获取到的数据存储到本地
  localStorage.setItem(url, JSON.stringify({ title, content }));

  // 向网页发送响应
  sendResponse({ status: "success" });
});

步骤4：添加弹出窗口

在“弹出窗口”选项卡中，添加一个名为“popup.html”的HTML文件。这个文件将负责显示采集到的数据。

<!-- popup.html -->

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <h1>数据采集器</h1>
    <ul id="data-list"></ul>
  </body>
</html>

步骤5：添加弹出窗口脚本

在“弹出窗口脚本”选项卡中，添加一个名为“popup.js”的脚本文件。这个脚本将在弹出窗口中运行，负责显示采集到的数据。

// popup.js

const dataList = document.getElementById('data-list');

// 从本地存储中获取采集到的数据
const data = localStorage.getItem('url');

// 将数据解析为JSON对象
const dataObject = JSON.parse(data);

// 将数据显示到弹出窗口中
for (const url in dataObject) {
  const title = dataObject[url].title;
  const content = dataObject[url].content;

  const listItem = document.createElement('li');
  listItem.innerHTML = `<b>${title}</b><br/>${content}`;

  dataList.appendChild(listItem);
}