OpenCLI 操作网页 从0到1完整实操指南

🚀 我会按环境准备 → 安装 → 验证 → 实战操作 → 常见问题的顺序，给你一份可直接跟着做的完整步骤，全程用 Windows 环境（PowerShell/CMD）为例，Mac/Linux 命令完全一致。

一、前置环境准备（必须先做）

1. 安装 Node.js（核心依赖）

OpenCLI 基于 Node.js 运行，必须先安装：

（1）打开Node.js 官网 LTS 版本，下载 Windows 安装包（.msi）

（2）安装时务必勾选「Add to PATH」（默认已勾选，不要取消）

（3）安装完成后，打开 PowerShell，执行命令验证：

node -v
npm -v

输出版本号（如 v20.10.0、10.2.3）即成功。

2. 安装 Chrome/Edge 浏览器（桥接网页用）

OpenCLI 通过浏览器扩展操作网页，推荐用 Chrome 或 Edge（Chromium 内核），确保浏览器已正常安装。

二、安装 OpenCLI 命令行工具

打开 PowerShell，执行以下命令：

# 全局安装 OpenCLI（管理员权限运行更稳定）
npm install -g @jackwener/opencli

# 验证安装（输出版本号即成功，当前最新为 v1.6.9）
opencli --version

若安装报错，执行 npm cache clean --force 清理缓存后重试，或用 npm install -g npx 后用 npx @jackwener/opencli 替代全局安装。

三、安装浏览器扩展（核心，连接网页与 CLI）

OpenCLI 靠扩展获取网页权限，步骤如下：

打开OpenCLI 官方 Releases 页面，下载最新版的 opencli-extension.zip

• 解压 zip 文件，得到一个包含 manifest.json 的文件夹
• 打开 Chrome/Edge，输入地址 chrome://extensions/（Edge 为 edge://extensions/）
• 开启右上角「开发者模式」开关
• 点击「加载已解压的扩展程序」，选择刚才解压的文件夹，完成安装
• 点击浏览器右上角的 OpenCLI 扩展图标，确认「Daemon Address」为 http://localhost:8080（默认无需修改）

四、一键验证环境（确保所有环节正常）

在 PowerShell 执行：

# 启动 OpenCLI 后台服务（首次运行会自动启动，后续可手动启动）
opencli daemon start

# 一键自检（检查服务、扩展、网络是否正常）
opencli doctor

✅ 看到以下输出，说明环境完全正常：

✓ Daemon is running at http://localhost:8080
✓ Extension is connected
✓ All systems ready to use

五、实战：用 OpenCLI 操作网页（直接复制命令就能用）

OpenCLI 内置了大量常用网站的适配器，直接用命令就能操作，以下是高频实用示例：

1. 国内常用网站操作

# 🔹 B站：查看热门视频（前5条）
opencli bilibili hot --limit 5

# 🔹 知乎：查看热榜（JSON格式输出，方便后续处理）
opencli zhihu hot -f json

# 🔹 淘宝：搜索商品（示例：搜索「无线耳机」）
opencli taobao search "无线耳机" --limit 10

# 🔹 京东：查看商品详情（需商品ID，示例为测试ID）
opencli jd detail 100012043978

# 🔹 微博：查看热搜榜
opencli weibo hot

2. 海外常用网站操作

# 🔹 HackerNews：查看头条（前5条）
opencli hackernews top --limit 5

# 🔹 GitHub：查看 trending 热门项目（日榜）
opencli github trending --period daily

# 🔹 Twitter/X：查看用户主页（示例：elonmusk）
opencli x user elonmusk

# 🔹 YouTube：搜索视频（示例：AI tutorial）
opencli youtube search "AI tutorial" --limit 5

3. 通用网页操作（任意网站都能用）

# 🔹 打开任意网页（自动唤起浏览器）
opencli browser open "https://www.baidu.com"

# 🔹 提取网页内容（自动解析正文，去除广告）
opencli browser extract "https://zhuanlan.zhihu.com/p/123456789"

# 🔹 网页截图（保存到本地）
opencli browser screenshot "https://www.bilibili.com" --output bilibili.png

# 🔹 执行自定义JS（操作网页元素，示例：获取页面所有链接）
opencli browser eval "document.querySelectorAll('a').map(a => a.href)"

六、进阶：自定义操作学校网页（写简单脚本）

任意网页（我这里只是例子，大家根据需要更改rul和配置）

📁 完整文件结构对照

确保你的文件结构完全如下所示：

clis/
└── sandau/
    ├── utils.ts      ✅ 工具函数（保持不变）
    ├── open.ts       ✅ 打开官网
    ├── news.ts       ✅ 获取新闻
    └── notice.ts     ✅ 存放通知公告代码

utils.ts

/**
 * 上海杉达学院工具函数
 */
import { CliError } from '@jackwener/opencli/errors';

export const SANDAU_BASE = 'https://www.sandau.edu.cn/';

/**
 * 检查页面是否正常加载
 */
export function checkPageLoaded(html: string): void {
  if (!html || html.length < 100) {
    throw new CliError('FETCH_ERROR', '页面加载失败', '请检查网络或网址');
  }
}

open.ts

import { cli, Strategy } from '@jackwener/opencli/registry';
import { SANDAU_BASE } from './utils.js';

cli({
  site: 'sandau',
  name: 'open',
  description: '打开上海杉达学院官网',
  domain: 'www.sandau.edu.cn',
  strategy: Strategy.PUBLIC,
  browser: true,

  func: async (page) => {
    await page.goto(SANDAU_BASE);
    return {
      message: '✅ 上海杉达学院官网已打开',
      url: SANDAU_BASE,
    };
  },
});

news.ts

import { cli, Strategy } from '@jackwener/opencli/registry';
import type { IPage } from '@jackwener/opencli/types';
import { CliError } from '@jackwener/opencli/errors';
import { SANDAU_BASE } from './utils.js';

// 新版新闻网（正确地址）
const NEWS_URL = 'https://news.sandau.edu.cn/';

cli({
  site: 'sandau',
  name: 'news',
  description: '获取上海杉达学院最新新闻',
  domain: 'news.sandau.edu.cn',
  strategy: Strategy.PUBLIC,
  browser: true,
  args: [
    { name: 'limit', type: 'int', default: 10, help: '获取条数（最多50条）' },
  ],
  columns: ['rank', 'title', 'date', 'url'],

  func: async (page: IPage, kwargs: { limit?: number }) => {
    const count = Math.min(kwargs.limit || 10, 50);
    await page.goto(NEWS_URL);

    const items = await page.evaluate(`
      (() => {
        const list = [];
        // 新版结构：.news-list li 或 .article li
        const items = document.querySelectorAll('li a');
        for (const a of items) {
          const title = a.textContent?.trim();
          const href = a.getAttribute('href');
          if (!title || !href || title.length < 4) continue;

          // 日期在相邻 span/date
          const dateEl = a.nextElementSibling || a.parentElement.querySelector('.date, .time, span');
          const date = dateEl?.textContent?.trim() || '-';

          list.push({
            title,
            url: new URL(href, window.location.href).href,
            date
          });
        }
        return list;
      })()
    `);

    const list = items as { title: string; url: string; date: string }[];
    if (!list.length) {
      throw new CliError('NO_DATA', '未能获取杉达学院新闻列表', '网站已改版，请使用新版 news.ts');
    }

    return list.slice(0, count).map((item, i) => ({
      rank: i + 1,
      title: item.title,
      date: item.date,
      url: item.url
    }));
  },
});

notice.ts

import { cli, Strategy } from '@jackwener/opencli/registry';
import type { IPage } from '@jackwener/opencli/types';
import { CliError } from '@jackwener/opencli/errors';
import { SANDAU_BASE } from './utils.js';

// 信息科学与技术学院 通知公告真实地址
const NOTICE_URL = 'https://info.sandau.edu.cn/tzgg/list.htm';

cli({
  site: 'sandau',
  name: 'notice',
  description: '获取上海杉达学院信息科学与技术学院通知公告',
  domain: 'info.sandau.edu.cn',
  strategy: Strategy.PUBLIC,
  browser: true,
  args: [
    { name: 'limit', type: 'int', default: 15, help: '获取条数（最多50条）' },
  ],
  columns: ['rank', 'title', 'date', 'url'],

  func: async (page: IPage, kwargs: { limit?: number }) => {
    const count = Math.min(kwargs.limit || 15, 50);
    await page.goto(NOTICE_URL);

    const items = await page.evaluate(`
      (() => {
        const results = [];
        // 适配信院通知列表的真实DOM结构
        const listItems = document.querySelectorAll('div[class*="list"] a, ul li a');
        
        for (const el of listItems) {
          const title = el.textContent?.trim() || '';
          const href = el.getAttribute('href') || '';
          
          // 过滤无效链接
          if (!title || title.length < 5 || !href) continue;
          
          // 拼接完整URL
          const url = href.startsWith('http') 
            ? href 
            : new URL(href, window.location.href).href;
          
          // 从父级/同级元素提取日期
          const parent = el.closest('li') || el.parentElement;
          const dateEl = parent?.querySelector('span:last-child, div:last-child');
          const date = dateEl?.textContent?.trim() || '';
          
          results.push({ title, url, date });
        }
        return results;
      })()
    `);

    const list = items as { title: string; url: string; date: string }[];
    if (!list.length) {
      throw new CliError(
        'NO_DATA',
        '未能获取信院通知公告',
        '页面结构可能变更，请检查NOTICE_URL'
      );
    }

    return list.slice(0, count).map((item, i) => ({
      rank: i + 1,
      title: item.title,
      date: item.date || '-',
      url: item.url,
    }));
  },
});

🚀 后续操作步骤（按顺序执行！）

1. 保存文件 ：将上一条发给你的代码复制，保存到 clis/sandau/notice.ts。

2. 重新编译（必须做！）：

运行

npm run build

3. 运行测试：

​​​（1） 打开官网（open）

运行

node dist/src/main.js sandau open

（2）获取学校新闻（news）

运行

node dist/src/main.js sandau news

（3）获取信息学院通知（notice）

运行

node dist/src/main.js sandau notice

⭐ 后续你可以用 OpenCLI 写简单脚本，自动化操作网页，比如自动签到、自动刷课：

# 示例：自动打开百度，搜索「OpenCLI」，然后截图
opencli browser open "https://www.baidu.com"
opencli browser type "#kw" "OpenCLI"  # 定位百度搜索框，输入内容
opencli browser click "#su"          # 点击搜索按钮
opencli browser screenshot --output baidu_search.png

七、常见问题排查（避坑指南）

问题	解决方法
opencli 命令找不到	重新执行 npm install -g @jackwener/opencli，或重启 PowerShell（环境变量未生效）
扩展连接失败	执行 opencli daemon restart 重启服务，检查扩展的 Daemon 地址是否为 localhost:8080
操作网页无响应	确保浏览器已打开对应网站，部分网站需要手动登录（OpenCLI 会复用浏览器登录状态）
安装权限报错	以管理员身份运行 PowerShell，再执行安装命令
端口占用报错	执行 `netstat -ano	findstr :8080` 找到占用进程，结束后重启服务

【附页】

OpenCLI插件GitHub链接：

OpenCLIhttps://github.com/jackwener/OpenCLI