实战开发 AI Skill：网页内容抓取工具实现

我们需要安装 axios 用于 HTTP 请求，cheerio 用于 DOM 解析。

{
  "name": "website-content-fetch",
  "version": "1.0.0",
  "main": "scripts/fetch-content.js",
  "dependencies": {
    "axios": "^1.6.2",
    "cheerio": "^1.0.0-rc.12"
  }
}

2. 脚本实现 (scripts/fetch-content.js)

代码逻辑分为三步：获取页面、解析内容、保存媒体资源。

const axios = require("axios");
const cheerio = require("cheerio");
const path = require("path");
const fs = require("fs");

/**
 * 获取网页内容
 * @param {string} url - 目标 URL
 * @param {object} options - 可选参数，如 saveDir
 * @returns {Promise<object>} - 返回内容和元数据
 */
async function fetchWebsiteContent(url, options = {}) {
  try {
    const response = await axios.get(url);
    const $ = cheerio.load(response.data);

    // 1. 提取纯文本内容
    let content = $("body").text().trim();
    content = content.replace(/\s+/g, " ");

    // 2. 提取媒体资源
    const media = {
      images: [],
      videos: [],
      audios: [],
    };

    // 处理图片
    $("img").each((i, elem) => {
      const src = $(elem).attr("src");
      const alt = $(elem).attr("alt") || "";
      if (src) {
        const absoluteUrl = new URL(src, url).href;
        media.images.push({ url: absoluteUrl, alt });
      }
    });

    // 处理视频和 iframe
    $("video, iframe").each((i, elem) => {
      let src = $(elem).attr("src");
      if (!src && $(elem).attr("data-src")) {
        src = $(elem).attr("data-src");
      }
      if (src) {
        const absoluteUrl = new URL(src, url).href;
        media.videos.push({ url: absoluteUrl });
      }
    });

    // 处理音频
    $("audio").each((i, elem) => {
      const src = $(elem).attr("src");
      if (src) {
        const absoluteUrl = new URL(src, url).href;
        media.audios.push({ url: absoluteUrl });
      }
    });

    // 3. 下载并保存媒体文件（如果指定了目录）
    if (options.saveDir) {
      if (!fs.existsSync(options.saveDir)) {
        fs.mkdirSync(options.saveDir, { recursive: true });
      }

      // 保存图片
      for (let i = 0; i < media.images.length; i++) {
        const image = media.images[i];
        try {
          const imageResponse = await axios.get(image.url, {
            responseType: "stream",
          });
          const imageName = `image_${i}_${path.basename(new URL(image.url).pathname)}`;
          const imagePath = path.join(options.saveDir, imageName);
          const writer = fs.createWriteStream(imagePath);
          imageResponse.data.pipe(writer);
          await new Promise((resolve, reject) => {
            writer.on("finish", () => resolve());
            writer.on("error", reject);
          });
          image.localPath = imagePath;
        } catch (error) {
          console.error(`Error saving image ${image.url}:`, error.message);
        }
      }

      // 保存视频和音频逻辑类似，此处省略重复代码以精简展示
      // ... (实际项目中需补充 video/audio 保存逻辑)
    }

    return { content, length: content.length, url, media };
  } catch (error) {
    console.error("Error fetching website content:", error);
    throw new Error(`Failed to fetch content from ${url}: ${error.message}`);
  }
}

// 独立运行测试入口
if (require.main === module) {
  const url = process.argv[2] || "https://example.com";
  const saveDir = process.argv[3];
  const options = {};
  if (saveDir) options.saveDir = saveDir;

  fetchWebsiteContent(url, options)
    .then((result) => {
      console.log("Fetched content:");
      console.log(`URL: ${result.url}`);
      console.log(`Length: ${result.length} characters`);
      console.log("Media resources:", result.media);
    })
    .catch((error) => {
      console.error("Error:", error.message);
    });
}

module.exports = { fetchWebsiteContent };

注意：在实际工程中，建议将视频和音频的保存逻辑封装为通用函数，避免代码冗余。

3. 评估测试 (evals.json)

为了验证技能的稳定性，我们定义了基础测试用例：

{
  "skill_name": "website-content-fetch",
  "evals": [
    {
      "id": 1,
      "prompt": "Fetch content from https://example.com",
      "expected_output": "Should return the text content of example.com"
    },
    {
      "id": 2,
      "prompt": "Fetch content from a nonexistent domain",
      "expected_output": "Should throw an error about failed to fetch content"
    }
  ]
}

集成与使用

将开发好的 website-content-fetch 目录放入支持 Skills 的 AI 助手或 IDE 的对应路径下，即可被识别。

在对话中直接输入指令，例如：'使用 website-content-fetch skill 为我抓取 https://www.baidu.com 中的内容'。系统会自动检测脚本语言环境，若检测到 Node.js 则自动安装依赖，随后执行任务。

调试完成后，记得持续优化 SKILL.md 中的描述信息。更清晰的指令能让 AI 在下一次识别工具时，对功能和逻辑的理解更加精确，从而提升执行成功率。

通过这种方式，我们可以将复杂的网络爬虫逻辑封装成简单的技能模块，让 AI 助手具备更可控的数据获取能力。