Skip to Content
文档智能脚本

智能脚本

官方内置了一键下载某电商网站商品主图、SKU 图以及详情图的功能，同时也支持自定义提取高清图片。

image.png

自定义JSON模板配置功能能够针对某个网站的网页代码进行正则表达式配置，从而使插件可以动态地拓展所支持的网站。

本文的读者及使用用户需具备以下能力：

  1. 了解 HTML、JavaScript、CSS、AJAX 等基本的网页前端技术，以便更好地理解网页结构和代码逻辑，为进行正则表达式配置提供基础。
  2. 熟练使用 Chrome 浏览器的开发者工具，能够利用该工具进行网页分析、调试和查看代码结构，为配置过程提供有力支持。
  3. 熟练使用正则表达式及工具，掌握正则表达式的语法和规则，能够准确地提取所需的网页内容。
  4. 拥有自我学习和解决问题的能力，在使用过程中遇到问题时能够主动学习和探索解决方案，以确保顺利完成配置工作。

📃脚本示例

访问 「某东」 的某店铺，通过配置脚本把相关图片进行分组

{
  "id": 10009,
  "name": "1688",
  "ico": "https://assets.pichound.app/1688.ico",
  "version": "25.1.1",
  "description": "智能提取1688详情页面商品相关大图及视频",
  "reg": "detail.1688.com/offer",
  "status": "prod",
  "tags": [
    "ec"
  ],
  "examples": [
    "https://detail.1688.com/offer/739240146617.html"
  ],
  "groups": [
    {
      "fn": "updateGroupByIds",
      "props": {
        "groupName": "主图",
        "groupIndex": 0,
        "source": "Object.entries(window.__INIT_DATA.data).find(([k,v]) => v.componentType === '@ali/tdmod-pc-od-main-pic')[1]?.data?.offerImgList",
        "ids": [
          {
            "attributes": []
          }
        ]
      }
    },
    {
      "fn": "updateGroupByIds",
      "props": {
        "groupName": "SKU",
        "groupIndex": 1,
        "source": "window.__INIT_DATA.globalData.skuModel.skuProps.reduce((acc, o) => { acc.push(...o.value); return acc }, []);",
        "ids": [
          {
            "attributes": [
              "imageUrl"
            ],
            "imageNameAttributes": [
              "name"
            ],
            "replaceUrlRules": [
              {
                "pattern": "!q.*$",
                "replaceValue": "?sku"
              }
            ]
          }
        ]
      }
    },
    {
      "fn": "updateGroupByIds",
      "props": {
        "groupName": "详情",
        "groupIndex": 2,
        "ids": [
          {
            "id": ".content-detail img",
            "attributes": [
              "dataset.lazyloadSrc",
              "src"
            ]
          }
        ]
      }
    },
    {
      "fn": "updateGroupByIds",
      "props": {
        "groupName": "视频",
        "groupIndex": 3,
        "source": "[Object.entries(window.__INIT_DATA.data).find(([k,v]) => v.componentType === '@ali/tdmod-pc-od-main-pic')[1]?.data?.video]",
        "ids": [
          {
            "attributes": [
              "videoUrl"
            ],
            "type": "VIDEO"
          }
        ]
      }
    }
  ]
}

🔑API文档

export interface IGroup {
  _id?: string;
  // 唯一 ID
  id: string;
  // 配置：是否开启
  enable: boolean;
  // 类型
  type: 'custom' | 'official';
  // 其他配置
  config?: IGroupConfig;
  // 表单
  rawConfig?: string;
  // 更新时间
  updateAt?: number;
}
 
export interface IGroupConfig {
  // 唯一 ID
  id: number;
  // 插件名
  name: string;
  // 插件icon
  ico?: string;
  // 插件版本
  version?: string;
  // 插件描述
  description?: string;
  // 默认匹配路径
  reg: string;
  // 前置脚本
  prevJS: string;
  // 插件分组功能
  groups: IRun[];
  // 发布状态
  status?: string;
  // 例子
  examples?: string[];
}
 
export interface IRun {
  // 函数能力
  fn: string;
  // 额外传参
  props: IRunProps;
}
 
export interface IIds {
  // 参数 Ids
  id: string;
  // 参数路径
  attributes?: string[];
  // 类型, 有可能是视频类型
  type?: string;
  // 图片描述信息
  alt?: string;
  // 替换图片规则
  replaceUrlRules?: IReplaceUrlRule[];
  // 过滤图片规则
  filterUrlRules?: IReplaceUrlRule[];
  // 获取图片名称的参数
  imageNameAttributes?: string[];
}
 
export interface IReplaceUrlRule {
  // 替换正则
  pattern: string
  // 正则局部/全匹配
  flags?: string
  // 替换值
  replaceValue?: string
}
 
export interface IRunProps {
  // 来源对象 默认是 document.querySelectorAll, 返回可迭代数组
  source?: string;
  // 参数 Ids
  ids: IIds[];
  // 分组名
  groupName: string;
  // 分组索引
  groupIndex: number;
}
概览常见问题