Image downloader 的交互逻辑是这样的:用户点击Image downloader的图标,会向页面(content script,见上一篇文章: 谷歌插件Image downloader开发之 content script )发送收集图片事件,页面收集完图片后,将对应的图片地址数组发送给popup页处理。popup页就是点击谷歌插件图标所弹出来的页面。Image downloader的popup页是长成这样的:
popup页采用了vue1.0来做数据绑定,主要包含了以下功能:
1、显示原始图片大小
2、根据图片大小筛选图片
3、设置是否显示img标签的图片、是否显示背景图片,是否显示自定义属性的图片
4、根据自定义属性规则,收集所配置的自定义属性的值
5、下载图片
图片容器:
imgs: { // 图片容器 attrImg: [], // 属性图 bgImg: [], // 背景图 img: [], // img标签图 }, /** * 向tab发送收集图片信息,接收tab返回的图片url列表 * @param action {string} 值为'all'或'attr',如果为all,则收集所有图片,为attr则只收集属性图 * @param attr {string} 用;分隔开的属性规则 */ sendMessage(action, attr) { chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { chrome.tabs.sendMessage(tabs[0].id, { action, attr }, (response) => { if (action === 'all') { const attrImg = response.attrImg const bgImg = response.bgImg const img = response.img // 重置容器 this.resetImgContainer('attrImg') this.resetImgContainer('bgImg') this.resetImgContainer('img') // 获取图片的宽高 this.mapImg(this.imgs.attrImg, attrImg) this.mapImg(this.imgs.bgImg, bgImg) this.mapImg(this.imgs.img, img) } else { this.resetImgContainer('attrImg') this.mapImg(this.imgs.attrImg, response.attrImg) } }); }); },
popup页用了chrome的tabs的api,query查询当前页签,并用sendMessage向页签发送action和配置的属性值,如果action为'all'则是收集所有图片,如果为'attr',则只收集所配置的属性图片, resetImgContainer
方法只是简单地将容器置空,response是content script所返回的结果,mapImg方法用来获取图片的长和宽,下文会讲到。
而在content script中,则用onMessage来接收popup的信息,并将收集到的图片数组返回给popup
// 接收popup的指令,如果action为all,则获取所有图片url,如果为attr,则获取属性图片 chrome.runtime.onMessage.addListener(({ action, attr }, sender, sendResponse) => { if (attr) { configAttr = [] configAttr.push(...initAttr) configAttr.push(...attr.split(',')) } else { configAttr = [] configAttr.push(...initAttr) } if (action === 'all') { sendResponse({ attrImg: [...new Set(getConfigAttrUrl())], bgImg: [...new Set(getBackgroundImage())], img: [...new Set(getImgUrl())] }) } if (action === 'attr') { sendResponse({ attrImg: [...new Set(getConfigAttrUrl())], }) } });
上篇文章发在div.io上时,@幾米 提到了图片去重的问题,所有在返回图片是,用es6的Set方法去重,这个只处理同类型图片的去重,不处理如背景图片和图片标签之间的重复图片。
/** * 获取属性图片 */ getAttrImg() { clearTimeout(this.progress) this.progress = setTimeout(() => { this.sendMessage('attr', this.attr) }, 500) },
配置的属性值发生变化时,向页面发送获取属性图片事件
/** * 遍历图片,设置图片的宽高属性 * @param container {array} 容器 * @param imgs {array} 图片url列表 */ mapImg(container, imgs) { imgs.forEach((src) => { this.imgNatureSize(container, src) }) }, /** * 获取图片原始宽高,并将图片push进容器 * @param container {array} 容器 * @param src {string} 图片url */ imgNatureSize(container, src) { const size = { width: '', height: '', } let image = new Image() image.src = src image.onload = function() { container.push({ src, width: image.width, height: image.height, }) } },
遍历拿到的图片,获取图片的宽和高,并将宽高属性保存起来
/** * 下载图片 */ downLoad(url) { chrome.downloads.download({ url }, () => { console.log('下载成功') }) }
调用谷歌插件的download方法来进行图片下载,本来想搞个批量下载的,但是没有发现谷歌插件有提供批量下载的API,如果遍历所选中的图片列表,不断调用download方法,会一下子弹出很多保存窗口,没有什么意义,就作罢了。
最后,所有文章都会同步发送到微信公众号上,欢迎关注,欢迎提意见: