Image downloader的交互逻辑是这样的:用户点击Image downloader的图标,会向页面(content script,见上一篇文章:谷歌插件Image downloader开发之 content script)发送收集图片事件,页面收集完图片后,将对应的图片地址数组发送给popup页处理。popup页就是点击谷歌插件图标所弹出来的页面。Image downloader的popup页是长成这样的:

popup页包含的功能

popup页采用了vue1.0来做数据绑定,主要包含了以下功能:

1、显示原始图片大小
2、根据图片大小筛选图片
3、设置是否显示img标签的图片、是否显示背景图片,是否显示自定义属性的图片
4、根据自定义属性规则,收集所配置的自定义属性的值
5、下载图片

popup与content script的交互

图片容器:

imgs: { // 图片容器    attrImg: [], // 属性图    bgImg: [], // 背景图    img: [], // img标签图},/**
 * 向tab发送收集图片信息,接收tab返回的图片url列表
 * @param action {string} 值为'all'或'attr',如果为all,则收集所有图片,为attr则只
        
		

网友评论