Skip to main content

1688 数据采集插件

插件说明​

该插件用于各购物网站上进行商品图片相似图片的搜寻 目前实现平台

页面流程​

详情页面
获取图片信息 点击按钮跳转到 1688 商品页面 同时把1688 商品数据传递给服务端

分支​

gitLab​

http://git.mabangerp.com:2280/ui/ziniaoplugin

仓库地址​

分支名​

1688

目录说明​

1688/
    dist/       编译输出目录  用于导入chrome 扩展进行插件调试
    plugin/     编译脚本
    src/        开发目录
        assets/  静态资源 插件的小图标请放在该位置
          code/    公共代码
          html/    html 页面代码  多入口输出
            ts/      多入口js 文件开发目录 （根据文件名自动输出对应名称js 文件）
    zip/        发布版本压缩包 （zip）

开发说明：​

  • webpack5
  • typescript
  • less
  • node

运行：

npm run watch

Goggle浏览器 插件扩展 加载 dist 目录

发布打包​

执行命令

npm run build

根目录下 zip 目录中将生成 zip 包

包名格式：release-xxxxx-版本号.zip

接口对接接口说明​

服务端对接人： 后小彪

搜图接口： https://www.apifox.cn/apidoc/shared-01e88f92-6fd8-4674-9bcc-121857b8ec7e/api-12899843 1688 图片上传服务器接口；https://www.apifox.cn/apidoc/shared-4a8954d1-758a-4002-86ba-ac166b99775e/api-12646066

webpack编译说明​

由于chrome 插件对于文件格式的要求。我们讲按照chrome 目录文件格式进行编译输出

在开发目录 src中 html 和 ts 目录是固定目录； webpack 自动读取该目录下面的文件进行多入口数据

entry-resolve.ts​

该文件自动处理目录下文件 进行多入口形式输出，输出格式为对象格式

格式对象

{
  'js/background': './src/ts/background.ts',
  'js/content': './src/ts/content.ts',
  'js/fenxiao-content': './src/ts/fenxiao-content.ts',
  'js/shope-content': './src/ts/shope-content.ts'
}

my-manifest-plugin.js​

转换manifest 文件内容； 对于manifest文件中的 script: [] js: [] 按照正常目录路径引入即可； webpack 编译的时候 会自动改为js文件； 由于ts目录下编译输出的js文件较多，不确定实际配置哪个文件。所以采用传统的手动manifest 文件引入方式进行;和正常的开发流程一样你需要导入哪个js 文件就手动配置进去

    "background": {
            "scripts": ["./ts/background.ts"],
            "persistent": true
        },

        ...


    "content_scripts": [
    {
    ...
        "js": [
            "./ts/content.ts",
            "./ts/shope-content.ts"
        ],

zip.js​

打包编译文件为zip 包 npm run build 执行完成后 后自动执行 postbuild 命令来执行 node ./plugin/zip.js 通过对 dist 目录内容进行打包编译 同时输出到 zip 目录下